Responsywny obrazek <picture, source>

Wstęp

Znamy już sposób wstawienia obrazka na stronę za pomocą znacznika IMG. Niestety istnieją przypadki, kiedy jest on niewystarczający. Najczęściej ma to związek z urządzeniami mobilnymi. Trudno spodziewać się, że to samo zdjęcie będzie równie dobrze wyglądać zarówno na dużym ekranie laptopa i na niewielkim smartfonie. Ponadto urządzenia mobilne są również częściej narażone na niestabilną prędkość transferu danych. Właśnie z tych powodów do specyfikacji HTML5 wprowadzono nowy element: PICTURE.

Dopasowanie formatu <picture, source type>

<picture>
	<source srcset="lokalizacja pliku w formacie 1" type="format 1">
	<source srcset="lokalizacja pliku w formacie 2" type="format 2">
	(...)
	<img src="lokalizacja pliku w formacie podstawowym" alt="Tekst alternatywny">
</picture>

Na urządzeniach mobilnych zwykle duże znaczenie ma ilość pobieranych danych przez sieć. Użytkownicy smatfonów często płacą za każdy kilobajt transferu. A nawet jeśli posiadają abonament z wysokim limitem danych, to i tak może się zdarzyć, że znajdą się akurat w miejscu o słabym zasięgu sieci. Wtedy wyświetlenie strony z ciężkimi zdjęciami może trwać bardzo długo.

Rozwiązaniem tego problemu mogłoby być używanie nowoczesnych formatów zdjęć - np. WEBP lub JXR - które zapewniają lepszy stopień kompresji danych. Dzięki temu pliki w nich zapisane mogą być nawet kilkukrotnie lżejsze niż np. w tradycyjnym formacie JPG. Niestety starsze przeglądarki nie obsługują takich formatów, a wtedy na stronie zamiast pożądanej ilustracji użytkownik zobaczy zapewne ikonę zastępczą informującą o uszkodzonym pliku graficznym. Możemy jednak przygotować wiele formatów zdjęcia i dać przeglądarce możliwość wyboru. Każdy element SOURCE umieszczony wewnątrz znacznika PICTURE może mieć nadany inny atrybut type="...", dzięki któremu przeglądarka sama wybierze sobie pierwszy z kolei, który obsługuje.

Na końcu wewnątrz znacznika PICTURE zawsze należy wstawić element IMG w najpowszechniej obsługiwanym formacie graficznym (np. JPEG). Jeśli tego nie zrobimy, w starszych przeglądarkach nie zostanie wyświetlony żaden obrazek.

Przykład <picture, source type>

<picture>
	<source srcset="zdjecie.webp" type="image/webp">
	<source srcset="zdjecie.jxr" type="image/vnd.ms-photo">
	<img src="zdjecie.jpg" alt="Przykładowe zdjęcie">
</picture>

Jeśli przeglądarka nie będzie obsługiwać żadnego z nowoczesnych formatów graficznych, wtedy na ekranie zostanie wyświetlony obrazek: "zdjecie.jpg".

Dopasowanie kadru <picture, source media>

<picture>
	<source srcset="lokalizacja pliku 1" media="zapytanie mediów 1">
	<source srcset="lokalizacja pliku 2" media="zapytanie mediów 2">
	(...)
	<img src="lokalizacja pliku podstawowego" alt="Tekst alternatywny">
</picture>

Niektóre ilustracje umieszczone na stronie mogą być zbyt duże, aby zmieściły się na małym ekranie urządzenia mobilnego. Teoretycznie moglibyśmy sobie z tym poradzić w bardzo prosty sposób za pomocą CSS:

img {
	max-width: 100%;
	height: auto;
}

Wstawienie takiej reguły w zewnętrznym lub wewnętrznym arkuszu stylów spowoduje, że żaden obrazek nie będzie szerszy niż dostępne miejsce na stronie. Grafiki mniejsze pozostaną bez zmian, natomiast większe będą przeskalowane w dół. Problem w tym, że nie zawsze jest to dobre rozwiązanie. Pomijając już fakt, że mimo przeskalowania zdjęcia przeglądarka i tak będzie musiała pobrać przez sieć ciężki plik w pełnym rozmiarze, to czasami na małym ekranie smartfona po prostu niewiele będzie widać na takiej ilustracji.

Lepiej do tego podejść w inny sposób. W wersji dla standardowych komputerów możemy pokusić się o zamieszczenie na stronie fotografii np. z całą rozległą panoramą, na której sylwetki ludzkie będą względnie niewielkie, ale nadal rozpoznawalne - co podkreśli bezkres fotografowanego krajobrazu. Jednak na smartfonie bardziej korzystne może być wykadrowanie zdjęcia tak, aby dało się rozpoznać twarze widocznych na nim osób. Wtedy piękne widoki w tle mogą nie być takie kluczowe, więc możemy je wyciąć. Każdy element SOURCE umieszczony wewnątrz znacznika PICTURE może mieć nadany inny atrybut media="...", dzięki któremu przeglądarka sama wybierze sobie pierwszy z kolei, który będzie najbardziej odpowiedni. O tym jak określać wartości tego atrybutu możesz dowiedzieć się z rozdziału: Zapytania mediów.

Na końcu wewnątrz znacznika PICTURE zawsze należy wstawić element IMG. Jeśli tego nie zrobimy, w starszych przeglądarkach nie zostanie wyświetlony żaden obrazek.

Przykład <picture, source media>

<picture>
	<source srcset="duze-zdjecie.jpg" media="(min-width: 1024px)">
	<source srcset="srednie-zdjecie.jpg" media="(min-width: 400px)">
	<img src="male-zdjecie.jpg" alt="Przykładowe zdjęcie">
</picture>

Na urządzeniach z ekranem o szerokości co najmniej 1024 pikseli zostanie wyświetlony obrazek: "duze-zdjecie.jpg". Jeśli pozioma rozdzielczość ekranu będzie się zawierać w przedziale od 400 do 1023 pikseli, przeglądarka wyświetli: "srednie-zdjecie.jpg". W przeciwnym razie zostanie pokazany obrazek: "male-zdjecie.jpg".

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
<picture>	38 2014-10-07	38 2015-05-12	13 2015-11-12	25 2014-10-15	9.1 2016-03-21
<source>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source height>	90 2021-04-13	108 2022-12-13	90 2021-04-15	76 2021-04-28	15 2021-09-20
<source media>	3 2009-09-15	15 2012-08-28	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source src>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18
<source srcset>	38 2014-10-07	38 2015-05-12	13 2015-11-12	25 2014-10-15	9.1 2016-03-21
<source type>	3 2009-09-15	3.5 2009-06-30	12 2015-07-29	15 2013-07-02	3.1 2008-03-18