W poprzednim module pokazaliśmy, jak atrybut srcset pozwala przesyłać wersje tego samego obrazu w różnych rozmiarach. Przeglądarka może wtedy zdecydować, której wersji użyć. Jeśli chcesz całkowicie zmienić obraz, potrzebujesz elementu picture.
W taki sam sposób, w jaki element srcset wykorzystuje atrybut src, również element picture bazuje na elemencie img. Element picture nakłada się na element img.
<picture>
<img src="image.jpg" alt="A description of the image.">
</picture>
Jeśli w elemencie picture nie ma zagnieżdżonego elementu img, 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 podaje sugestie przeglądarce, element picture wydaje polecenia. To daje Ci kontrolę.
source
W elemencie picture możesz określić wiele elementów source, każdy z własnym atrybutem srcset. Następnie przeglądarka wykonuje pierwszą, która jest w stanie wykonać.
Formaty graficzne
W tym przykładzie mamy 3 różne 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 umożliwia renderowanie obrazów w formacie AVIF, wybiera odpowiedni plik obrazu. W przeciwnym razie nastąpi przejście do następnego elementu source.
Drugi element source wskazuje obraz w formacie WebP. Jeśli przeglądarka ma możliwość renderowania obrazów WebP, użyje tego pliku graficznego.
W przeciwnym razie przeglądarka zostanie przełączona na plik graficzny w atrybucie src elementu img. Ten obraz to JPEG.
Oznacza to, że możesz zacząć korzystać z nowych formatów graficznych bez negatywnego wpływu na zgodność wsteczną.
W tym przykładzie atrybut type informujeł przeglądarkę o formacie obrazu.
Rozmiary obrazów
Oprócz przełączania między formatami obrazów możesz też przełączać między rozmiarami obrazów. Aby poinformować przeglądarkę, jak szeroki będzie obraz, użyj atrybutu media. 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>
Użytkownik ten informuje przeglądarkę, że jeśli szerokość widocznego obszaru jest większa niż 75em, musi użyć dużego obrazu. Między 40em a 75em przeglądarka musi używać średniego obrazu. Poniżej 40em przeglądarka musi używać małego obrazu.
Różni się to od korzystania z atrybutów srcset i sizes elementu img. W takim przypadku możesz przesyłać sugestie do przeglądarki. Element source przypomina polecenie, a nie 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 informujesz przeglądarkę, co ma robić w różnych punktach przerwania, ale teraz przeglądarka może wybrać obraz najbardziej odpowiedni do danej gęstości pikseli na urządzeniu.
Przycinanie
Jeśli chcesz wyświetlać tylko wersje tego samego obrazu w różnych rozmiarach, najlepszym rozwiązaniem będzie srcset. Jeśli jednak obraz nie wygląda dobrze w mniejszych rozmiarach, możesz spróbować utworzyć przyciętą wersję obrazu.
Różne obrazy mogą mieć różne współczynniki szerokości i wysokości, aby lepiej pasowały do kontekstu. Na przykład w przeglądarce mobilnej przycięcie może być wąskie i wysokie, a w przeglądarce na komputerze – szeroki i krótki.
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żna zmienić atrybutu alt w zależności od źródła obrazu. Musisz napisać atrybut alt, który opisuje zarówno obraz w pełnym rozmiarze, jak i przycięty.
Prawdopodobnie nie będziesz potrzebować elementu picture w przypadku większości obrazów elastycznych – atrybuty srcset i sizes w elemencie img mają wiele zastosowań. Jednak w sytuacjach, gdy potrzebujesz większej kontroli, bardzo skutecznym narzędziem może być element picture.
Są obrazy, w których przypadku żadne rozwiązanie może nie być potrzebne: ikony. Co dalej?
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o elemencie „Obraz”
Gdy atrybut srcset przekazuje przeglądarce ________, element <picture> określa ________.
Oto niektóre możliwości elementu <picture>:
avif lub webp, które można łatwiej pobrać.