Element <picture> nie renderuje niczego sam, ale umożliwia podejmowanie decyzji dotyczących wewnętrznego elementu <img>.
i określić, co ma się wyświetlać. <picture> ma zastosowanie do poprzedzania określonego przez elementy <audio> i <video>: element otoki
zawierający poszczególne elementy <source>.
<picture>
<source …>
<source …>
<img …>
</picture …>
Wewnętrzny mechanizm <img> zapewnia też niezawodny wzorzec kreacji zastępczej na potrzeby starszych przeglądarek, który nie obsługuje obrazów elastycznych:
Jeśli element <picture> nie zostanie rozpoznany przez przeglądarkę użytkownika, zostanie zignorowany. Elementy <source> również są odrzucane.
ponieważ przeglądarka w ogóle ich nie rozpozna lub nie będzie miała dla nich istotnego kontekstu bez elementu nadrzędnego <video> lub <audio>.
Wewnętrzny element <img> zostanie jednak rozpoznany przez każdą przeglądarkę, a źródło określone w jego src będzie renderowane zgodnie z oczekiwaniami.
„Kierownictwo artystyczne” zdjęcia, na których jest <picture>
Wprowadzanie zmian w treści lub współczynniku proporcji obrazu na podstawie rozmiaru obrazu na stronie jest zwykle nazywane „kierowaniem graficznym”.
elastycznych obrazów. srcset i sizes działają w sposób niewidoczny i zastępują źródła według poleceń przeglądarki użytkownika.
Czasami jednak możesz chcieć zmienić źródła między punktami przerwania, aby lepiej uwidocznić treść, tak samo jak dostosowujesz układy strony.
Na przykład: obraz nagłówka o pełnej szerokości z niewielkim centralnym ostrością może sprawdzić się w dużym widocznym obszarze:
Jednak przy pomniejszeniu, by pasowało do małych widocznych obszarów, centralny punkt obrazu może zostać utracony:
Obiekt tych źródeł zdjęć jest taki sam, ale aby lepiej skupić się na tym obiekcie wizualnie, części źródła obrazu, które zmieniają się między punktami przerwania. np. większe powiększenie w środkowej części obrazu; niektóre szczegóły na krawędziach są przycięte:
Tego rodzaju „przycinanie” można uzyskać za pomocą CSS, ale jednocześnie wymagaliby od użytkownika żądania wszystkich danych składających się na obraz, nawet jeśli w końcu nigdy tego nie zobaczą.
Każdy element source ma atrybuty określające warunki wyboru tego elementu (source): media, który akceptuje
zapytanie o media i type, które akceptuje typ multimediów (wcześniej znany jako „typ MIME”). Pierwsze <source> w źródle
zgodnie z bieżącym kontekstem przeglądania użytkownika, a na tej stronie source zostanie wybrany atrybut srcset
posłuży do określenia
odpowiednich kandydatów w danym kontekście. W tym przykładzie pierwsze pole source z atrybutem media
pasujący do rozmiaru widocznego obszaru użytkownika zostanie wybrany:
<picture>
<source media="(min-width: 1200px)" srcset="wide-crop.jpg">
<img src="close-crop.jpg" alt="…">
</picture>
Wewnętrzny element img musisz zawsze określać na końcu w kolejności, jeśli żaden z elementów source nie pasuje do ich media ani type.
będzie działał jako „domyślny” źródła. Jeśli używasz min-width zapytań o media, chcesz dodać największą z nich.
jak widać w poprzednim kodzie. Gdy używasz zapytań o media (max-width), na początku umieszczaj najmniejsze źródło.
<picture>
<source media="(max-width: 400px)" srcset="mid-bp.jpg">
<source media="(max-width: 800px)" srcset="high-bp.jpg">
<img src="highest-bp.jpg" alt="…">
</picture>
Jeśli źródło zostanie wybrane na podstawie określonych przez Ciebie kryteriów, atrybut srcset w source jest przekazywany do parametru
<img> tak, jakby zostało zdefiniowane w samej usłudze <img> – co oznacza, że możesz używać usługi sizes do optymalizacji obrazów kierowanych na sztukę
źródeł.
<picture>
<source media="(min-width: 800px)" srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w">
<source srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w">
<img src="fallback.jpg" alt="…" sizes="calc(100vw - 2em)">
</picture>
Oczywiście proporcje obrazu, które mogą się różnić w zależności od wybranego elementu <source>, mogą powodować problemy z wydajnością:
Atrybut <img> obsługuje tylko jeden atrybut width i height, ale pominięcie tych atrybutów może znacznie negatywnie wpłynąć na wrażenia użytkowników.
Aby to uwzględnić, względnie niedawny – ale
dobrze obsługiwane – dodatek do kodu HTML
specyfikacja pozwala na użycie atrybutów height i width w elementach <source>. Pozwalają także ograniczyć przesunięcia układu
tak jak w <img>, więc w układzie jest tylko odpowiednie miejsce na wybrany element <source>.
<picture>
<source
media="(min-width: 800px)"
srcset="high-bp-1600.jpg 1600w, high-bp-1000.jpg 1000w"
width="1600"
height="800">
<img src="fallback.jpg"
srcset="lower-bp-1200.jpg 1200w, lower-bp-800.jpg 800w"
sizes="calc(100vw - 2em)"
width="1200"
height="750"
alt="…">
</picture>
Trzeba pamiętać, że kierunek artystyczny może służyć nie tylko do podejmowania decyzji o rozmiarze widocznego obszaru, a poza tym powinien.
większość z tych spraw można sprawniej rozwiązać, używając srcset/sizes. np. lepiej wybrać źródło obrazu,
zgodnie ze schematem kolorów, który odpowiada preferencjom użytkownika:
<picture>
<source media="(prefers-color-scheme: dark)" srcset="hero-dark.jpg">
<img srcset="hero-light.jpg">
</picture>
Atrybut type
Atrybut type umożliwia używanie systemu decyzyjnego opartego na pojedynczym żądaniu w elemencie <picture> do wyświetlania tylko formatów obrazów
w przeglądarkach, które je obsługują.
Jak wiesz z artykułu Formaty i kompresja obrazów, kodowanie, którego przeglądarka nie może przeanalizować, nie zostanie nawet rozpoznane jako zdjęcia.
Przed wprowadzeniem elementu <picture> wymagane były najbardziej skuteczne rozwiązania interfejsu do wyświetlania nowych formatów obrazów.
żądanie i próba przeanalizowania pliku graficznego przed podjęciem decyzji, czy odrzucić go i załadować plik zastępczy. O
typowym przykładem był skrypt w następujący sposób:
<img src="image.webp"
data-fallback="image.jpg"
onerror="this.src=this.getAttribute('data-fallback'); this.onerror=null;"
alt="...">
Przy tym wzorcu żądanie image.webp jest nadal wysyłane w każdej przeglądarce, co oznacza, że przesyłanie z niego skorzystało.
bez obsługi WebP. Przeglądarki, które nie mogły następnie przeanalizować kodowania WebP, wywołałyby zdarzenie onerror, które spowodowałoby zamianę
wartość data-fallback na src. Było to marudne rozwiązanie, ale podobne rozwiązania nie okazały się jedyną opcją.
dostępne w interfejsie. Pamiętaj, że przeglądarka zaczyna wysyłać żądania obrazów, zanim jakiekolwiek niestandardowe skrypty
nie możemy uruchomić – a nawet przeanalizować – tego procesu.
Element <picture> został zaprojektowany tak, aby unikać tych zbędnych żądań. Mimo że nadal nie ma możliwości, aby przeglądarka
aby rozpoznać format, którego nie obsługuje, bez żądania, atrybut type ostrzega przeglądarkę o źródle
o kodowaniu, aby umożliwić podjęcie decyzji, czy wysłać żądanie.
W atrybucie type podajesz Typ nośnika (wcześniej MIME type).
źródła obrazu określonego w atrybucie srcset każdego elementu <source>. Dzięki temu przeglądarka będzie miała dostęp do wszystkich informacji,
musi natychmiast określić, czy obraz kandydujący dostarczony przez ten obiekt source może zostać zdekodowany bez użycia zewnętrznego
żądań – jeśli typ mediów nie zostanie rozpoznany, <source> i wszyscy jego kandydaci zostaną zignorowane, a przeglądarka przejdzie do pracy.
<picture>
<source type="image/webp" srcset="pic.webp">
<img src="pic.jpg" alt="...">
</picture>
W tym przypadku każda przeglądarka obsługująca kodowanie WebP rozpozna typ nośnika image/webp określony w atrybucie type.
elementu <source>, wybierz <source>, a ponieważ w srcset podano tylko jednego kandydata – przekaż wewnętrzny
<img>, aby zażądać, przenieść i renderować pic.webp. Każda przeglądarka nie obsługująca WebP zignoruje source.
jeśli nie ma żadnych sprzecznych instrukcji, <img> wyrenderuje treść src tak samo jak od 1992 roku.
Oczywiście nie musisz określać w tym miejscu drugiego elementu <source> z atrybutem type="image/jpeg" – możesz przyjąć, że standardowo obsługuje on format JPEG.
Niezależnie od kontekstu przeglądania przez użytkownika wszystko to robi się w ramach jednego transferu pliku i nie marnuje przepustowości sieci.
źródeł obrazów, których nie można wyrenderować. Jest to również perspektywiczne: wraz z pojawianiem się nowych, wydajniejszych formatów plików
z własnymi typami mediów, dzięki czemu będziemy mogli je wykorzystać dzięki picture – bez JavaScriptu ani po stronie serwera.
i z szybkością, jaką udostępnia <img>.
Przyszłość obrazów elastycznych
Wszystkie omówione tutaj wzorce znaczników okazały się istotnym wyzwaniem w kontekście standaryzacji: zmiana funkcjonalności
Było to nie lada wyczyn, a zestaw problemów, których celem było znalezienie rozwiązania, okazała się silna i centralna dla sieci, <img>
były delikatne i powszechne. Jeśli nie wiesz, że wiele można poprawić,
masz rację. Standardy te od samego początku miały stanowić punkt odniesienia dla przyszłych rozwiązań.
technologii.
Wszystkie te rozwiązania zawsze bazowały na znacznikach, tak więc zostały one uwzględnione we wstępnym ładunku pochodzącym z serwera
i dotrze w odpowiednim czasie, aby przeglądarka mogła poprosić o źródła obrazów. To ograniczenie, które doprowadziło do przyznania, że atrybutu sizes jest dość nieporęczny.
Jednak ze względu na to, że te funkcje zostały wprowadzone na platformie internetowej, wprowadzono natywną metodę odroczenia żądań obrazów.
Żądania elementów <img> z atrybutem loading="lazy" są wysyłane dopiero wtedy, gdy znany jest układ strony. Pozwoli to opóźnić
żądania obrazów poza początkowym obszarem widocznym dla użytkownika, aż do momentu zakończenia procesu renderowania strony, co potencjalnie pozwala uniknąć
zbędnych żądań. W chwili wysyłania takiego żądania przeglądarka w pełni rozumie układ strony,
Zaproponowano atrybut sizes="auto" jako uzupełnienie specyfikacji HTML
aby uniknąć w takich przypadkach konieczności ręcznego wpisywania atrybutów sizes.
Planujemy też dodanie elementu <picture>, aby uwzględnić wyjątkowo ekscytujące zmiany
do stylu układów stron. Choć informacje o widocznym obszarze to solidna podstawa do podejmowania ogólnych decyzji dotyczących układu,
nie możemy przyjąć całościowego podejścia do programowania
– elementu, który można upuścić
do dowolnych części układu strony, przy użyciu stylów odpowiadających przestrzeni zajmowanej przez ten komponent. Ten problem spowodował
do tworzenia zapytań dotyczących kontenerów, czyli metody określania stylów elementów
według rozmiaru kontenera nadrzędnego, a nie samego widocznego obszaru.
Chociaż składnia zapytań dotyczących kontenerów właśnie się ustabilizowała, a obsługa przeglądarek jest bardzo ograniczona,
w momencie pisania – dodanie technologii, które umożliwiają tę przeglądarkę, sprawi, że element <picture> otrzyma funkcję
pozwala na zrobienie tego samego: potencjalny atrybut container, który pozwala określić <source> kryteriów wyboru, na podstawie
jaki obszar zajmuje <img> elementu <picture>, a nie wielkość widocznego obszaru.
Jeśli brzmi to trochę niejasno, ma to ku temu dobry powód: dyskusje na temat standardów internetowych toczy się w dalszym ciągu, ale nie są jeszcze ustabilizowane. nie może jeszcze z nich korzystać.
Elastyczne znaczniki obrazów mają być z czasem ułatwiać pracę, tak jak w przypadku każdej technologii internetowej, ale istnieje wiele usług, technologii i platform ułatwiających odręczne pisanie tych znaczników. W następnym module w tym artykule omówimy, jak zintegrować wszystkie zebrane informacje o formatach obrazów, kompresji i obrazach elastycznych w nowoczesnym procesie programowania.