Element – obraz

Z poprzedniego modułu wiesz, jak atrybut srcset umożliwia udostępnianie wersji tego samego obrazu w różnych rozmiarach. Przeglądarka może wtedy zdecydować, która wersja jest odpowiednia. Jeśli chcesz całkowicie zmienić obraz, musisz użyć elementu picture.

Podobnie jak srcset opiera się na atrybucie src, element picture opiera się na elemencie img. Element picture otacza 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 atrybut srcset podaje przeglądarce sugestie, a element picture – polecenia. Dzięki temu masz kontrolę.

source

W elemencie picture możesz określić kilka elementów source, z których każdy ma własny atrybut srcset. Przeglądarka wykona pierwszy z nich, który będzie w stanie.

Formaty graficzne

W tym przykładzie znajdują się 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">
</picture>

Pierwszy element source wskazuje obraz w nowym formacie AVIF. Jeśli przeglądarka może renderować obrazy AVIF, wybierze ten plik obrazu. W przeciwnym razie przejdzie do następnego elementu source.

Drugi source element wskazuje obraz w formacie WebP. Jeśli przeglądarka może renderować obrazy WebP, użyje tego pliku obrazu.

W przeciwnym razie przeglądarka wróci do pliku obrazu w atrybucie src elementu img. Ten obraz jest w formacie JPEG.

Oznacza to, że możesz zacząć używać nowych formatów obrazów bez utraty zgodności wstecznej.

W tym przykładzie atrybut type informuje przeglądarkę, jaki format obrazu został określony.

Rozmiary obrazów

Oprócz przełączania się między formatami obrazów możesz też przełączać się między rozmiarami obrazów. Użyj atrybutu media, aby poinformować przeglądarkę, jak szeroki będzie wyświetlany obraz. W atrybucie media umieść zapytanie o 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">
</picture>

W tym przypadku informujesz 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żyć średniego obrazu. Poniżej 40em przeglądarka musi użyć małego obrazu.

Różni się to od używania atrybutów srcset i sizes w elemencie img. W takim przypadku podajesz przeglądarce sugestie. Element source jest bardziej poleceniem niż sugestią.

W atrybucie srcset elementu source możesz też użyć deskryptora gęstości pikseli.

<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"
    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 ma możliwość wybrania obrazu najbardziej odpowiedniego dla gęstości pikseli urządzenia.

Przycinam

Jeśli musisz tylko udostępniać wersje tego samego obrazu w różnych rozmiarach, najlepszym rozwiązaniem jest srcset. Jeśli jednak obraz nie wygląda dobrze w mniejszych rozmiarach, możesz spróbować utworzyć jego przyciętą wersję.

Różne obrazy mogą mieć różne proporcje szerokości i wysokości, aby lepiej pasowały do kontekstu. Na przykład w przeglądarce mobilnej możesz chcieć wyświetlać przycięty obraz, który jest wąski i wysoki, a w przeglądarce na komputerze – przycięty obraz, który jest 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. Do każdego elementu source dodaj atrybuty width i height.

<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" fetchpriority="high">
</picture>

Pamiętaj, że nie możesz 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.

W przypadku większości obrazów w konfiguracji elastycznej prawdopodobnie nie będziesz musiał używać elementu picture – atrybuty srcset i sizes w elemencie img obejmują wiele przypadków użycia. Jeśli jednak potrzebujesz większej kontroli, element picture jest przydatnym narzędziem.

Istnieje jeden rodzaj obrazu, w przypadku którego możesz nie potrzebować żadnego z tych rozwiązań – ikony. O tym będzie następny moduł.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o elemencie picture