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ć.