Element – obraz

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