Przejdź do treści

HTML / HTML5

Responsywny obrazek <PICTURE, SOURCE>

W jaki sposób wstawić na stronie internetowej obrazek (grafikę, zdjęcie, fotografię, ilustrację), który automatycznie dopasowuje się do wielkości ekranu?

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

(interpretuje: Firefox 38, Opera 25, Chrome 38)

<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>
gdzie:
lokalizacja pliku w formacie 1, lokalizacja pliku w formacie 2...
Lokalizacja pliku obrazka na dysku lub adres URL do pliku w Internecie zapisanego przy użyciu różnych formatów. Zostanie wyświetlony tylko jeden z podanych plików graficznych - pierwszy w kolejności którego format jest obsługiwany przez przeglądarkę.
format 1, format 2...
Nazwa formatu (typ MIME), w którym został zapisany plik obrazka [zobacz: sekcja "Filtr typu plików" w rozdziale Selektor plików] - np.: "image/webp" (WebP), "image/vnd.ms-photo" (JPEG XR - extended range), "image/svg+xml" (Scalable Vector Graphics).
lokalizacja pliku w formacie podstawowym
Lokalizacja pliku dla przeglądarek, które w ogóle nie obsługują znacznika PICTURE albo jeśli nie obsługują żadnego z formatów wymienionych w znacznikach SOURCE.
Tekst alternatywny
Tekst który zostanie wyświetlony, jeżeli przeglądarka nie zdoła wyświetlić żadnego obrazka.

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

(interpretuje: Firefox 38, Opera 25, Chrome 38)

<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>
gdzie:
lokalizacja pliku 1, lokalizacja pliku 2...
Lokalizacja pliku obrazka na dysku lub adres URL do pliku w Internecie wykadrowanego w odpowiedni sposób. Zostanie wyświetlony tylko jeden z podanych plików graficznych - pierwszy w kolejności który spełnia zapytanie mediów podane w atrybucie media="...".
zapytanie mediów 1, zapytanie mediów 2...
Na przykład: "(max-width: 500px)" [zobacz: Zapytania mediów].
lokalizacja pliku podstawowego
Lokalizacja pliku dla przeglądarek, które w ogóle nie obsługują znacznika PICTURE albo jeśli nie spełniają żadnego z zapytań mediów wymienionych w znacznikach SOURCE.
Tekst alternatywny
Tekst który zostanie wyświetlony, jeżeli przeglądarka nie zdoła wyświetlić żadnego obrazka.

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 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 piksele 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".

Komentarze

Zobacz więcej komentarzy

Facebook