Główne zdjęcie witryny
Nie ma znaczenia jak wolno idziesz, tak długo jak nie przestajesz. – Konfucjusz

Responsywne obrazy w HTML

Obrazy wyświetlane na różnych urządzeniach

Dawno temu wszelkie obrazy umieszczane na stronach internetowych musiały mieć z góry określone rozmiary. Wraz z rozwojem technologii webowych wzrastały wymagania co do właściwego ich wyświetlania na urządzeniach o różnych parametrach – w szczególności rozdzielczości ich ekranów. Z tego względu chciałbym Ci pokazać jak umieścić obrazek na stronie WWW dostosowujący się do zmiennych warunków. Chociaż, że obecnie żyjemy w czasach szybkiego internetu, nie należy również lekceważyć użytkowników płacących za transfer przesyłanych danych – rozmiar grafik umieszczanych na stronach powinienen być jak najmniejszy wraz z zachowaniem wystarczająco zadowalającej jakości obrazu. W tym poradniku przedstawię Ci najbardziej przyjazne internautom rozwiązania stosowane przez profesjonalnych webmasterów.

Wprowadzwenie

Aby obstylizować obrazek na stronie internetowej tak, aby jego szerokość – i co ważne: wraz z zachowaniem jego proporcji – zawsze „skurczała” się do szerokości zawierającego go kontenera (np. <header>) należy użyć poniższego kodu CSS:

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

W powyższym kodzie właściwość max-width: 100%; sprawi, że szerokość obrazu będzie dążyć do szerkości swojego rodzica (dokładniej to jej nie przekroczy). Być może zastanawiasz się dlaczego po prostu nie napisałem width: 100%; – otóż w obu przypadkach obrazek co prawda będzie się odpowiednio zmniejszał, ale drugi sposób rozciągnie obraz, gdy okaże się za mały (wywołując efekt rozmycia). I tutaj dochodzimy do sedna sprawy: jak załadować obraz o odpowiedniej rozdzielczości, aby jego rozmiar (mam na myśli np. w kilobajtach) był jak najmniejszy wraz z zachowaniem jak najlepszej jego wizualnej jakości? Przyjrzyjmy się bliżej technikom RWD dotyczących obrazów na stronach internetowych.

A tak poza tym na marginesie: właściwość display: block; jest opcjonalna, lecz warto jej użyć, aby uniknąć niepotrzebnej pustej przestrzeni pod obrazkiem (domyślnie elementy te są śródliniowe).

Sposób pierwszy – znaczniki <picture> i <source>

Jako, iż istnieje kilka sposobów na implementację responsywanych obrazów, zdecydowałem się na przedstawienie ich od najprostszej w zrozumieniu metody. Jej przykładowy kod HTML przedstawia się następująco:

<picture>
	<source media="(max-width: 400px)" srcset="fishes-500x100.jpg" />
	<source media="(max-width: 600px)" srcset="fishes-750x150.jpg" />
	<img src="aquarium-1000x200.jpg" alt="Rybki w akwarium" />
</picture>

W powyższym kodzie pojawiły się nowe, semantycznie brzmiące znaczniki <picture></picture>, które stanowią niejako kontener wewnątrz którego umieściliśmy trzy źródła różnych obrazków (choć może być ich dowolna ilość). Ze wspomnianego kontenera zawsze zostanie wybrany ten jeden najbardziej optymalny (o ile to prawidłowo oprogramujemy). Poszczególne grafiki definiujemy za pomocą znaczników <source /> wraz z odpowiadającymi im atrybutami srcset, w których podajemy poprawne ścieżki dostępu. Natomiast w atrybutach media określamy maksymalne dopuszczalne w pikselach szerokości ekranu (bądź okna przeglądarki), dla których wymienione grafiki zostaną zastosowane. W powyższym przykładzie kolejność doboru obrazka będzie następująca:

  1. Jeśli szerokość ekranu urządzenia lub okna przeglądarki internetowej nie będzie większa niż 400 pikseli – wyświetl obraz o rozdzielczości 500x100 pikseli (fishes-500x100.jpg).
  2. Jeśli zamiast powyższego szerokość ekranu urządzenia lub okna przeglądarki internetowej będzie większa niż 400 pikseli ale mniejsza lub równa 600 pikseli – wyświetl obraz o rozdzielczości 750x150 pikseli (fishes-750x150.jpg).
  3. Jeśli żaden z powyższych warunków nie zostanie spełniony lub przeglądarka internetowa nie obsługuje tej technologii – wyświetl domyślny obraz o rozdzielczości 1000x200 pikseli wymieniony w zwykłym znaczniku <img />, którego dodanie na samym końcu jest bardzo zalecane jako rozwiązanie awaryjne (aquarium-1000x200.jpg).

Oczywiście, zanim zabierzemy się do kodowania należy przygotować wszystkie grafiki w odpowiednich rozmiarach. Ciekawostką jest to, że w danych warunkach możemy zastosować obrazek przedstawiający zupełnie coś innego. Z tego wniosek: jak nie rybki – to akwarium. 🙂

Być może zauważyłeś, że w każdym przypadku zastosowałem grafikę o nieco większej rozdzielczości niż to konieczne. Po prostu uważam, że warto zadbać o lepszą jakość obrazu, chociażby w przypadku użytkowników, którzy powiększają przeglądaną stronę. Z tego względu koniecznie należy również zadbać o odpowiednią kompresję oraz format pliku graficznego:

Jeśli to możliwe należy wyłącznie stosowoać grafikę wektorową jak SVG, a w przypadku zapisu rastowego warto rozpatrzyć nowy format WebP rozwijany przez Google'a.

Na zakończenie dodam tylko, że istnieje drugi, lecz identycznie działający do poprzedniego sposób wyboru obrazów, który można osiągnąć za pomocą poniższego odwrotnego zapisu (po prostu wybierz ten, który bardziej Ci się podoba):

<picture>
	<source media="(min-width: 800px)" srcset="fishes-1000x200.jpg" />
	<source media="(min-width: 600px)" srcset="fishes-750x150.jpg" />
	<img src="aquarium-500x100.jpg" alt="Rybki w akwarium" />
</picture>

Sposób drugi – atrybuty srcset i sizes wewnątrz znacznika <img />

Drugi sposób (a właściwie składający się z kilku podsposobów) implementacji responywnych obrazów opiera się na znanym wszystkim zwykłym atrybucie <img />. W każdym przypadku musimy znać i powiadomić przeglądarkę internetową o szerokości zamieszczanego obrazka – zwykle za pomocą atrybutu sizes, ale najpierw go pominę i wykorzystam zwykły atrybut width.

Pierwszym i rozpoczynającym przykładem będzie omówienie dostosowania rozmiaru obrazu od zagęszczenia pikseli na ekranie, czyli DPR (ang. Device Pixel Ratio). Aby osiągnąć efekt dopasowania jakości grafiki do gęstości pikseli na ekranie należy wzorować się na następującym kodzie HTML:

<img 
	src="aquarium-500x100.jpg"
	srcset="
		fishes-1600x320.jpg 3x,
		fishes-1066x213.jpg 2x,
		fishes-800x160.jpg 1.5x"
	width="500"
	alt="Rybki w akwarium" />

Powyższy kod zawiera obowiązkowy atrybut src wskazujący na domyślny obrazek oraz width określający jego rzeczywistą szerokość. Natomiast za pomocą atrybutu srcset wymieniamy kolejno obrazy (zazwyczaj wymienia się kilka) jakie mają być załadowane w zależności od aktualnego współczynnika DPR, które podajemy po nazwie lub ścieżce dostępu każdego obrazka. Natomiast poszczególne pary wartości oddzielamy znakiem przecinka. Wybór obrazu przebiega wraz z kolejnością jego wystąpienia w atrybucie srcset. Tak więc, według powyższego kodu, jeśli ekran urządzenia ma DPR równe lub znajdujące się najbliżej wartości 2x – zostanie wczytany obraz fishes-1066x213.jpg.

Drugi przykład jest bardzo podobny do wcześniej omówionej metody wykorzystującej znaczniki <picture> i <source>, ponieważ dopasowuje rozmiar pobieranego obrazka do wykrytej szerokości ekranu urządzenia. Jego przykładowy kod przedstawia się następująco:

<img 
	src="aquarium-1600x320.jpg"
	srcset="
		fishes-1600x320.jpg 1600w,
		fishes-1066x213.jpg 1066w,
		fishes-800x160.jpg 800w,
		fishes-500x100.jpg 500w"
	sizes="
		(max-width: 375px) 500px,
		(max-width: 600px) 800px,
		(max-width: 800px) 1066px,
		1600px"
	alt="Rybki w akwarium" />

Za pomocą atrybutu srcset wymieniamy obrazy we wszystkich dostępnych rozdzielczościach oraz ich rzeczywiste szerokości w jednostach w (ang. Wide), a nie w pikselach (na chłopski rozum to jest to samo). Poszczególne pary wartości oddzielamy znakiem przecinka. Natomiast w atrybucie sizes określamy maksymalne dopuszczalne w pikselach szerokości ekranu urządzenia dla których wymienione grafiki zostaną zastosowane. Ostatnia wartość tego atrybutu nie posiada określonego warunku, dlatego jest stosowana domyślnie dla wszystkich pozostałych wielkości ekranu. Warto pamiętać o tym, że ważna jest kolejność reguł zdefiniowanych w atrybutach srcsetsizes, ponieważ przeglądarki internetowe będą zawsze pobierać pierwszy pasujący do wymiarów obrazek.

W tym przypadku również istnieje drugi identycznie działający do powyższego sposób wyboru obrazów, który można osiągnąć za pomocą odwrotnego następującego zapisu (nie ma znaczenia, który wybierzesz):

<img 
	src="aquarium-1600x320.jpg"
	srcset="
		fishes-500x100.jpg 500w,
		fishes-800x160.jpg 800w,
		fishes-1066x213.jpg 1066w,
		fishes-1600x320.jpg 1600w"
	sizes="
		(min-width: 1200px) 1600px,
		(min-width: 800px) 1066px,
		(min-width: 600px) 800px,
		500px"
	alt="Rybki w akwarium" />

Według obydwu powyższych przykładów, jeśli szerokość ekranu urządzenia będzie wynosić 1366 pikseli (np. na laptopie lub tablecie) zostanie wczytany obraz aquarium-1600x320.jpg. Natomiast w przypadku mniejszej szerokości jak 375 piksele (np. na telefonie) zostanie załadowany plik fishes-500x100.jpg.

Trzecim i ostatnim przykładem zastosowania responsywnych obrazów będzie dopasowywanie rozmiaru pobranego obrazka w zależności od zajmowanej szerokości obrazka na stronie internetowej. Spójrz na poniższy kod HTML:

<img 
	src="aquarium-1600x320.jpg"
    srcset="
		fishes-500x100.jpg 500w,
		fishes-800x160.jpg 800w,
		fishes-1066x213.jpg 1066w"
	sizes="50vw"
    alt="Rybki w akwarium" />

Na powyższym listingu atrybut sizes zawiera wartość 50vw (ang. Visible Width), która oznacza, że umieszczony obraz zawsze będzie miał szerokość równą 50% szerokości ekranu urządzenia, bądź okna przeglądarki internetowej. Przeglądarka WWW znając szerokość ekranu lub własnego okna oblicza jaką szerokość będzie miał obrazek i wybiera jeden z dostępnych rozmiarów bazując na tych przeliczeniach. Rozpatrzmy dwa możliwe scenariusze:

  1. W przypadku, gdyby szerokość ekranu lub okna przeglądarki internetowej wynosiła 1366 piksele to zostanie pobrany drugi obrazek określony miarą 800w, ponieważ 50% z 1366 pikseli wynosi 683 piksele i najbliżej tej wartości jest miara 800 pikseli.
  2. W przypadku gdyby szerokość ekranu albo okna przeglądarki internetowej wynosiła 1920 piksele to zostanie pobrany trzeci obrazek, tj. ten o szerokości 1066 pikseli, ponieważ 960 pikseli jest bliższe 1066 pikselom niż 800 pikseli.

Tak jak we wszystkich wcześniejszych przykładach, także i tym razem zastosowałem nieco większe rozdzielczości obrazów niż to konieczne, aby uniknąć efektu rozmycia.

Zakończenie

Należy podkreślić, że znaczniki <picture><source> oraz atrybuty srcsetsizes to nowe elementy HTML5, które są prawidłowo obsługiwane tylko przez nowoczesne przeglądarki internetowe. Moim zdaniem nie trzeba zbytnio się tym martwić, gdyż niebawem szybko staną się one standardem, tym bardziej, że możemy zawsze zastosować przedstawione rozwiązania awaryjne. I o to właśnie chodzi w Responsive Web Design. Warto jeszcze zwrócić uwagę na jedną rzecz:

Stosując pierwszy przedstawiony sposób responsywny obraz umieszczony na stronie internetowej dynamicznie i automatycznie przeładuje się wraz ze zmianą rozmiaru okna przeglądarki, natomiast w przypadku drugiego sposobu do zauważenia zmiany konieczne jest odświeżenie strony WWW.

Dziękuję za uwagę i mam nadzieję, że przyczyniłem się do powiększenia Twojej wiedzy, dlatego proszę o komentarz!

Komentarze

Ten wpis nie ma jeszcze żadnych komentarzy. 😟

Dodaj własny komentarz

Formularz dodawania komentarza
Kontynuując przeglądanie niniejszej witryny internetowej automatycznie wyrażasz zgodę na wykorzystanie plików cookies.