chevron-left chevron-right

[HTML5] Jak zaimplementować responsywne obrazki na stronie?

Tworząc strony internetowe posiadające jakiekolwiek obrazki w treści na pewno się spotkałeś/aś z problemem ładowania zbyt dużych obrazków na urządzeniach mobilnych. W wielu przypadkach, aby załadować obrazek odpowiedniej wielkości trzeba rozważyć szereg kryteriów jeśli chodzi o ekran wyświetlający stronę.

Do takich kryteriów możemy zaliczyć:

  1. Zagęszczenie pikseli na ekranie - DPR,
  2. Wymiary ekranu,
  3. Rozmiar obrazka w wersji oryginalnej,
  4. Rozmiar obrazka na stronie.

Jeśli chodzi o powyższe kryteria to przeglądarki od razu mają dane dotyczące punktu 1). i 2). Informacje na temat punktu 3). będą miały dopiero gdy pobiorą obrazek. Natomiast informacje odnośnie ostatniego punktu będą miały dopiero gdy pobiorą plik CSS odpowiedzialny za styl obrazka na stronie.

Na szczęście, my jako projektanci stron WWW jesteśmy w stanie dostarczyć informacje dotyczące dwóch ostatnich punktów za pomocą kodu HTML5.

Responsywne obrazki za pomocą HTML5

Wraz z wprowadzeniem specyfikacji HTML5 pojawiły się nowe tagi HTML5 i nowe atrybuty HTML5, które można dołączać do istniejących tagów. Do taga odpowiadającego za umieszczanie obrazków na stronie - <img />, dorzucono 2 nowe atrybuty:

  • srcset - odpowiedzialny za określenie zestawu obrazków, które mają być załadowane w zależności od szerokości ekranu;
  • sizes - odpowiedzialny za określenie zakresu rozmiarów ekranu w których ma być ładowany obrazek o określonych wymiarach.

Na pierwszy rzut brzmi to skomplikowanie, ale tak nie jest. Najlepiej będzie zobaczyć sposób ich działania na przykładach.

Responsywne obrazki - przykłady zastosowania

Jest wiele różnych sposobów zastosowania responsywnych obrazków.

Responsywne obrazki z gęstość pikseli

img-srcset-dpr

Załóżmy, że chcemy osiągnąć efekt jak na obrazku powyżej - tj. obrazek ma określoną szerokość, ale jego wielkość a przez to jakość obrazka będzie dostosowywana do zagęszczenia pikseli (screenshot został wykonany na urządzeniu z ekranem o DPR wynoszącym x2).

Aby osiągnąć efekt dopasowania rozmiaru do gęstości pikseli na ekranie należy zastosować następujący zapis:

1
2
3
4
5
6
7
8

<img 
    src="http://placehold.it/350x150"
    srcset="
        http://placehold.it/525x225 1.5x,
        http://placehold.it/750x300 2x,
        http://placehold.it/1050x450 3x"
    width="350"
    alt="DPR" />

Responsywne obrazki a rozmiar obrazka na stronie

img-srcset-width

Innym przykładem zastosowania może być dopasowywanie rozmiaru pobranego obrazka w zależności od szerokości obrazka na stronie:

1
2
3
4
5
6
7
8

<img 
    src="http://placehold.it/350x150"
    sizes="33vw"
    srcset="
        http://placehold.it/525x225 525w,
        http://placehold.it/750x300 750w,
        http://placehold.it/1050x450 1050w"
    alt="Zmienna szerokość obrazka" />

Powyższy kod mówi nam, że obrazek będzie miał szerokość równą 33vw co przekłada się na 1/3 szerokości ekranu (więcej informacji o jednostce miary vw znajdziesz tutaj). W tej sytuacji, przeglądarka znając szerokość ekranu oblicza jaką szerokość będzie miał obrazek i wybiera jeden z dostępnych rozmiarów bazując na tych przeliczeniach. Zapis 525w mówi nam że obrazek ma rzeczywistą szerokość 525 pikseli. W przypadku, gdyby szerokość ekranu wynosiła 1024 piksele to zostanie pobrany pierwszy obrazek określony miarą 525w, ponieważ 1024 / 3 będzie wynosiło w zaokrągleniu 342 piksele i najbliżej tej wartości jest miara 525 pikseli.

W przypadku gdyby szerokość ekranu wynosiła 1920 piksele to zostanie pobrany drugi obrazek, tj. ten o wymiarach 750 pikseli na 300 pikseli, ponieważ 750 pikseli jest bliższe 640 pikselom niż 525 pikseli.

Responsywne obrazki a szerokość ekranu

img-srcet-sizes-media-query

Ostatni przypadek użycia jaki zamierzam przedstawić będzie dotyczył dopasowania obrazka do szerokości ekranu.

1
2
3
4
5
6
7
8
9
10
11
12
13

<img 
    src="http://placehold.it/350x150"
    sizes="
        (min-width: 900px) 900px,
        (min-width: 600px) 750px,
        (min-width: 300px) 525px,
        350px"
    srcset="
        http://placehold.it/350x150 200w,
        http://placehold.it/525x225 300w,
        http://placehold.it/750x300 600w,
        http://placehold.it/1050x450 900w"
    alt="W pełni responsywny obrazek">

To jest najciekawszy przykład, ponieważ dopasowuje rozmiar pobranego obrazka do wykrytej szerokości ekranu. Dodatkowo, rozmiar obrazka na stronie zmienia się w zależności od szerokości strony i w takiej sytuacji inaczej wygląda przeliczenie szerokości obrazka do pobrania.

Warto pamiętać o tym, że ważna jest kolejność obrazków zdefiniowanych w srcset, ponieważ przeglądarki będą zawsze pobierać pierwszy pasujący do wymiarów obrazek. Dodatkowo, jeśli zmienimy rozmiar okna, obrazek nie zostanie ponownie pobrany. Aby zobaczyć zmianę należy po prostu odświeżyć stronę.

Jak dodać responsywne obrazki w WordPress?

Pora na mały bonus. Z racji tego, że wiele osób tworzy strony oparte o CMS WordPress to zamierzam przedstawić sposób na implementację responsywnych obrazków w tym systemie.

Aby osiągnąć ten efekt należy wprowadzić dwie modyfikacje:

  • Określić rozmiar obrazków ładowanych w systemie WordPress w pliku functions.php;
  • Zaimplementować responsywne obrazki w szablonie pojedynczego posta.

Zacznijmy od określenie w jakich rozmiarach mają być dostępne obrazki w WordPress. W pliku functions.php dodajemy poniższy kod:

1
2
3
4

add_image_size('post-main-x4', 1440, 960);
add_image_size('post-main-x3', 1080, 720);
add_image_size('post-main-x2', 720, 480);
add_image_size('post-main-x1', 360, 240);

To są przykładowe rozmiary obrazków, możesz je dostosować do swoich wymagań.

Następnie, w pliku szablonu odpowiedzialnym za widok pojedynczego posta, np. single.php lub content-post.php wstawiamy następujący kawałek kodu, który będzie odpowiedzialny za wyświetlanie głównego obrazka postu na stronie:

1
2
3
4
5
6
7
8
9
10

<img src="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id(), 'post-main-x2')[0]; ?>"
    sizes="(min-width: 1920px) 1440px,
            (min-width: 1440px) 1080px,
            (min-width: 1080px) 720px,
            360px"
    srcset="<?php echo wp_get_attachment_image_src(get_post_thumbnail_id(), 'post-main-x1')[0]; ?> 360w,
            <?php echo wp_get_attachment_image_src(get_post_thumbnail_id(), 'post-main-x2')[0]; ?> 720w,
            <?php echo wp_get_attachment_image_src(get_post_thumbnail_id(), 'post-main-x3')[0]; ?> 1080w,
            <?php echo wp_get_attachment_image_src(get_post_thumbnail_id(), 'post-main-x4')[0]; ?> 1440w"
    alt="<?php the_title(); ?>">

Tym sposobem zaimplementowaliśmy responsywne obrazki w szablonie dla WordPress.

Podsumowanie

Jak widać, implementacja responsywnych obrazków jest prosta. Ogranicza się tylko do stosowania odpowiednich atrybutów HTML5 oraz określenia wymiarów obrazków. Oczywiście, należy też pamiętać aby dany obrazek przygotować w kilku wersjach/rozmiarach aby przeglądarka mogła pobrać odpowiedni rozmiar obrazka.

Mam nadzieję, że ten wpis okaże się przydatny w Twojej pracy. Jeśli masz jakiekolwiek pytania odnośnie zastosowanych technik, to nie wahaj się zadać pytania w komentarzach do tego artykułu.