W poprzednim module pokazaliśmy, jak atrybut srcset umożliwia przesyłanie wersji tego samego zdjęcia w różnych rozmiarach. Przeglądarka może wtedy zdecydować, której wersji chce użyć. Jeśli chcesz całkowicie zmienić obraz, potrzebujesz elementu picture.
W taki sam sposób, w jaki srcset opiera się na atrybucie src, element picture opiera się na elemencie img. Element picture znajduje się wokół elementu img.
<picture>
<img src="image.jpg" alt="A description of the image.">
</picture>
Jeśli w elemencie picture nie ma elementu img zagnieżdżonego, element picture nie będzie działać.
Podobnie jak atrybut srcset, element picture zaktualizuje wartość atrybutu src w tym elemencie img. Różnica polega na tym, że tam, gdzie atrybut srcset przekazuje przeglądarce sugestie, element picture generuje polecenia. To daje Ci kontrolę.
source
W elemencie picture możesz określić wiele elementów source, z których każdy ma własny atrybut srcset. Przeglądarka wykonuje wtedy pierwsze dostępne polecenie.
Formaty graficzne
W tym przykładzie mamy 3 obrazy w 3 różnych formatach:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="A description of the image."
width="300" height="200" loading="lazy" decoding="async">
</picture>
Pierwszy element source wskazuje obraz w nowym formacie AVIF. Jeśli przeglądarka jest w stanie renderować obrazy AVIF, jest to wybrany plik graficzny. W przeciwnym razie przechodzi do następnego elementu source.
Drugi element source wskazuje obraz w formacie WebP. Jeśli przeglądarka może renderować obrazy WebP, użyje tego pliku graficznego.
W przeciwnym razie przeglądarka przełączy się na plik obrazu w atrybucie src elementu img. Ten obraz jest w formacie JPEG.
Oznacza to, że możesz zacząć korzystać z nowych formatów obrazów bez utraty zgodności wstecznej.
W tym przykładzie atrybut type informuje przeglądarkę o tym, jaki format obrazu został określony.
Rozmiary obrazów
Możesz też przełączać się między formatami obrazów, a także przełączać się między nimi. Użyj atrybutu media, aby poinformować przeglądarkę, jak szeroki będzie wyświetlany obraz. Umieść zapytanie o media w atrybucie media.
<picture>
<source srcset="large.png" media="(min-width: 75em)">
<source srcset="medium.png" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image."
width="300" height="200" loading="lazy" decoding="async">
</picture>
Tutaj informujesz przeglądarkę, że jeśli szerokość widocznego obszaru jest szersza niż 75em, musi używać dużego obrazu. Od 40em do 75em przeglądarka musi używać obrazu o średniej rozdzielczości. Poniżej 40em przeglądarka musi używać małego obrazu.
Różni się to od korzystania z atrybutów srcset i sizes w elemencie img. W takim przypadku przeglądarka wyświetla sugestie. Element source przypomina raczej polecenie niż sugestię.
Możesz też użyć deskryptora gęstości pikseli w atrybucie srcset elementu source.
<picture>
<source srcset="large.png 1x" media="(min-width: 75em)">
<source srcset="medium.png 1x, large.png 2x" media="(min-width: 40em)">
<img src="small.png" alt="A description of the image." width="300" height="200" loading="lazy" decoding="async"
srcset="small.png 1x, medium.png 2x, large.png 3x">
</picture>
W tym przykładzie nadal wskazujesz przeglądarce, co ma robić w różnych punktach przerwania, ale teraz przeglądarka może wybrać obraz najlepiej pasujący do gęstości pikseli na ekranie urządzenia.
Przycinanie
Jeśli chcesz wyświetlać tylko wersje tego samego obrazu o różnych rozmiarach, najlepszą opcją jest srcset. Jeśli jednak obraz w mniejszym rozmiarze nie wygląda dobrze, możesz spróbować utworzyć jego przyciętą wersję.
Różne obrazy mogą mieć inny współczynnik szerokości i wysokości, aby lepiej dopasować je do kontekstu. Na przykład w przeglądarce mobilnej chcesz wyświetlić wąskie i wysokie przycięcie, a w przeglądarce na komputerze – szerokie i krótkie.
Oto przykład banera powitalnego, który zmienia swoją zawartość i kształt w zależności od szerokości widocznego obszaru. Dodaj atrybuty width i height do każdego elementu source.
<picture>
<source srcset="full.jpg" media="(min-width: 75em)" width="1200" height="500">
<source srcset="regular.jpg" media="(min-width: 50em)" width="800" height="400">
<img src="cropped.jpg" alt="A description of the image." width="400" height="400" loading="eager" decoding="sync">
</picture>
Pamiętaj, że nie możesz zmienić atrybutu alt w zależności od źródła obrazu. Musisz napisać atrybut alt opisujący zarówno obraz w pełnym rozmiarze, jak i obraz przycięty.
Prawdopodobnie nie będziesz musiał używać elementu picture w przypadku większości obrazów elastycznych – atrybuty srcset i sizes w elemencie img mają zastosowanie w wielu przypadkach. Jeśli jednak potrzebujesz bardziej szczegółowej kontroli, element picture to zaawansowane narzędzie.
W przypadku jednego z obrazów żadne z tych rozwiązań może nie być potrzebne: ikony. Co dalej.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat elementu obrazu
Gdzie atrybut srcset przekazuje przeglądarce ________, a element <picture> zawiera ________.
Oto niektóre możliwości elementu <picture>:
avif lub webp, jeśli to możliwe.