Responsywne obrazki (RWD) już dziś

> Dodaj do ulubionych

Odkąd w 2010 r. Ethan Marcotte rozpoczął dyskusję na temat projektowania stron responsywnych (RWD) programiści i projektanci rozpaczliwie próbowali znaleźć sposób na zapewnienie responsywności obrazków. To Responsive Issues Community Group (RICG), głowi się nad rozwiązaniem tej zagwozdki. Z tego powodu trwają prace nad włączeniem do specyfikacji HTML 5.1 elementu picture oraz atrybutów srcset i sizes. Ponieważ nie możemy przewidzieć jak ani gdzie użytkownicy będą wyświetlać nasze strony, musimy sprawić, by o odpowiedni wybór obrazka pod kątem danej sytuacji zadbała przeglądarka. Nowa specyfikacja określi zasady selekcji obrazków na podstawie:

  • zagęszczenia pikseli na ekranie urządzenia,
  • obszaru widoku,
  • wersji obrazka,
  • formatu obrazka.

W specyfikacji pojawią się także dwa nowe atrybuty elementu imgsrcset oraz sizes. Atrybut srcset umożliwia zadeklarowanie zbioru obrazów, które zostaną wykorzystane przez przeglądarkę w pewnych okolicznościach, określonych za pomocą deskryptorów. Deskryptory x wskazują na stopień nasycenia obrazu pikselami, zaś deskryptory w oznaczają szerokość obrazka — na podstawie tych danych przeglądarka wybiera odpowiedni obrazek z listy. Z kolei atrybut sizes dostarcza przeglądarce informacji na temat rozmiaru jaki ma mieć wyświetlany obrazek i nie wolno go pominąć, jeśli korzystamy z atrybutu srcset z deskryptorami w. To szczególnie istotne w przypadku obrazów o zmiennej szerokości, które szczegółowo omówię w dalszej części tego artykułu.

Najważniejsze, że teraz mamy możliwość doboru obrazów innej jakości lub wersji w zależności od obszaru widoku użytkownika, bez potrzeby dokonywania skomplikowanych ustawień po stronie serwera. Responsywne obrazki staną się integralną częścią specyfikacji języka HTML i, koniec końców, będą obsługiwane przez wszystkie przeglądarki.

Przejdźmy teraz do omówienia typów selekcji i sposobów ich zastosowania.

Obrazki o stałej szerokości — selekcja w oparciu o zagęszczenie pikseli na ekranie urządzenia

Od czasu pojawienia się na rynku ekranów Retina nie wystarczy mieć na uwadze jedynie rozdzielczości ekranu, lecz należy także pamiętać o poziomie zagęszczenia pikseli. Zarówno ekrany Retina jak i wyświetlacze o rozdzielczości 4K czy UltraHD mają o wiele więcej pikseli niż ekrany tego samego rozmiaru lecz o standardowej rozdzielczości. Więcej pikseli = wyraźniejsze obrazy.

Jeśli z jakiegoś powodu szerokość twojego obrazka jest zawsze taka sama, niezależnie od rozmiaru ekranu — może być to logo strony czy zdjęcie profilowe — to wówczas powinieneś zastosować selekcję w oparciu o poziom zagęszczenia pikseli na ekranie urządzenia.

Atrybut srcset zawiera listę możliwych do wyświetlenia obrazów, z których przeglądarka wybierze ten odpowiedni. Elementy listy są od siebie oddzielone przecinkami. Deskryptor x wskazuje natomiast poziom zagęszczenia pikseli obrazka. Przeglądarka skorzysta z tej informacji i wybierze optymalny obrazek pod kątem środowiska, w którym pracuje. Przeglądarki, dla których atrybut srcset jest niezrozumiały wczytają po prostu obraz src.

<img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" src="crest-255.jpg" alt="USWNT crest" />

Przykładem obrazu o stałej szerokości może być logo strony internetowej, którego rozmiar nie zmienia się bez względu na szerokość pola widoku. Z kolei obrazki ilustrujące treść strony są zwykle responsywne, a ich rozmiar ulega zmianie w zależności od pola widoku. Do ich selekcji można zastosować lepszą metodę.

Obrazki o płynnej szerokości — selekcja na podstawie pola widoku

W przypadku obrazów o płynnej szerokości korzystamy z atrybutu srcset z deskryptorem w i atrybutu sizes. Deskryptor w przekazuje przeglądarce informacje na temat szerokości każdego obrazu z listy. Atrybut sizes jest również listą z elementami oddzielonymi przecinkami, która zawiera dwie wartości. Zgodnie z najnowsza specyfikacją, jeżeli w zbiorze srcset znajdują się jakiekolwiek obrazy o szerokości określonej przy pomocy deskryptora w, należy posłużyć się także atrybutem sizes.

Atrybut sizes ma dwie wartości. Pierwsza z nich określa parametry ekranu. Druga natomiast to szerokość, jaką ma mieć obrazek wyświetlany na określonym ekranie. Należy pamiętać, że wartości tej nie można wyrazić procentowo — jedyną możliwą, znaną z CSS jednostką jest vw.

<img srcset="uswnt-480.jpg 480w, 
             uswnt-640.jpg 640w, 
             uswnt-960.jpg 960w,
             uswnt-1280.jpg 1280w" 
     sizes="(max-width: 400px) 100vw, 
            (max-width: 960px) 75vw, 
            640px" 
     src="uswnt-640.jpg" alt="USWNT World Cup victory">
USWNT World Cup victory

Przekazuję w ten sposób przeglądarce informację, że w przypadku obszarów widoku szerokich na maksymalnie 400 pikseli obrazek ma zajmować 100% tej szerokości. Jeśli obszar widoku ma do 960 pikseli szerokości, obrazek powinien być wyświetlany na 75% szerokości widoku. Natomiast w przypadku obszarów szerszych obrazek ma mieć 640 pikseli. Jeśli jednostka vw nie jest ci znana, zapoznaj się ze świetnym artykułem, w którym Tim Severien wyjaśnia jednostki służące do określania obszaru widoku.

Przeglądarka korzysta z informacji zawartych w atrybutach srcset i sizes, by wyświetlić obraz najlepiej dopasowany do podanych parametrów. Jeśli obszar widoku przeglądarki ma 600 pikseli, to najprawdopodobniej wyświetlony zostanie obrazek o szerokości 75vw. Przeglądarka dokona próby wczytania pierwszego obrazka większego niż 450 pikseli, czyli uswnt-480.jpg. Jeśli natomiast strona będzie przeglądana na wyświetlaczu Retina, w przypadku którego stopień zagęszczenia pikseli wynosi 2, to przeglądarka spróbuje wczytać pierwszy obrazek większy niż 900 pikseli — powinien być to plik uswnt-960.jpg. Nie możemy być pewni, który konkretnie obrazek zostanie zaserwowany, ponieważ algorytmy różnych przeglądarek mogą nieco inaczej zadecydować o wyborze odpowiedniego obrazu w oparciu o podane przez nas informacje. Tym właśnie jest „selekcja na podstawie pola widoku”.

W pierwszych dwóch przykładach wyświetlane są warianty tego samego obrazka różniące się pod względem jakości, do czego wystarczy sam atrybut srcset. Przypomnijmy: jeśli martwisz się o prawidłowe działanie strony w starszych wersjach przeglądarek, to właśnie do tego służy element src — przeglądarki te potraktują go jak zwykły obrazek i załadują określony w nim plik. Natomiast jeśli chciałbyś wyświetlać nieco inną wersję obrazka zależnie od jego dopuszczalnej szerokości (by np. mniejsze obrazki obejmowały tylko najważniejszą część grafiki), skorzystaj z elementu picture.

picture — selekcja w zależności od pożądanej wersji obrazka

Można powiedzieć, że element picture opakowuje obrazek i jego adresy. Przeglądarki i tak potrzebują elementu img, by wiedzieć, że należy zaserwować obrazek — bez img nic nie zostanie wyświetlone. Element source zawiera natomiast alternatywne wersje obrazów, które może wybrać przeglądarka. Selekcja zależna od wersji obrazka przydaje się wówczas, gdy chcemy wyświetlić konkretny obraz na określonym punkcie kontrolnym. Jeśli korzystamy z elementu picture, wybór obrazka jest jednoznaczny.

<picture>
  <source media="(min-width: 960px)" srcset="ticker-tape-large.jpg">
  <source media="(min-width: 575px)" srcset="ticker-tape-medium.jpg">
  <img src="ticker-tape-small.jpg" alt="USWNT ticker-tape parade">
</picture>
USWNT ticker-tape parade

W powyższym przykładzie, jeśli obszar widoku jest większy niż 960 pikseli, wczytany zostanie obrazek w orientacji poziomej (ticker-tape-large.jpg). W przypadku obszaru o szerokości przekraczającej 575 pikseli, przeglądarka wczyta natomiast przycięty obrazek w orientacji pionowej (ticker-tape-medium.jpg). A jeśli szerokość obszaru ma mniej niż 575 pikseli, to wczytany zostanie obrazek (ticker-tape-small.jpg), który jest przycięty tak, by przedstawiał tylko jednego gracza.

Element picture jest zgodny wstecznie ze starszymi przeglądarkami — te, które go nie obsługują, wyświetlą po prostu obrazek img. Wszystkie standardowe atrybuty obrazków, np. alt, należy dodawać do znacznika img, nie picture.

source — selekcja obsługiwanego formatu obrazka

W ostatnich latach pojawiło się wiele nowych formatów plików graficznych oferujących lepszą jakość przy zmniejszonym rozmiarze pliku. Brzmi nieźle, prawda? W rzeczywistości jednak żaden z tych formatów nie jest obsługiwany przez wszystkie przeglądarki. Rozwijany przez Google format WebP sprawdza się bardzo dobrze, lecz rodzimie obsługują go jedynie przeglądarki Chrome i Opera. JPEG-XR, pierwotnie znany pod nazwą HD Photo, był zamkniętym formatem firmy Microsoft, obsługiwanym tylko w przeglądarce Internet Explorer. Jeśli chciałbyś dowiedzieć się więcej na temat nowych formatów, przeczytaj poświęcony im wyczerpujący artykuł Zoltana Hawryluka.

<picture>
  <source type="image/vnd.ms-photo" src="wwc2015.jxr">
  <source type="image/jp2" src="wwc2015.jp2">
  <source type="image/webp" src="wwc2015.webp">
  <img src="wwc2015.png" alt="WWC 2015">
</picture>

Element source zawiera atrybut type, dlatego dzięki określeniu typu MIME każdego obrazka przeglądarka może wybrać pierwszy obrazek, którego atrybut odpowiada obsługiwanemu typowi MIME. W tym przypadku kolejność źródeł ma znaczenie, ale jeśli przeglądarka nie rozpozna żadnego typu obrazka, to wyświetlony zostanie oryginalny obrazek określony w elemencie img.

Czy mogę już korzystać z tych wszystkich nowości?

Na tę chwilę element picture obsługiwany jest w najnowszych wersjach stabilnych Firefoksa, Chrome i Opery. Nie obsługują go natomiast Safari i Internet Explorer. W przypadku elementu srcset sytuacja jest nieco lepsza — jest on w pełni obsługiwany w najnowszych stabilnych wersjach Firefoksa, Chrome i Opery. Częściowo obsługuje go natomiast Safari 8 i Internet Explorer Edge, gdzie można używać deskryptorów x do określania różnych rozdzielczości. Nie działają tam jednak deskryptory w.

Istnieje sporo wypełniaczy, dzięki którym problem ten można rozwiązać. Najbardziej znanym jest chyba picturefill autorstwa Scotta Jehla. Ja na swojej stronie aktualnie korzystam z respimage opracowanego przez Alexandra Farkasa. Nareszcie udało nam się osiągnąć porozumienie co do sposobu serwowania obrazków responsywnych i rozwiązanie to jest sukcesywnie wdrażane we wszystkich głównych przeglądarkach. Wciąż trwają prace nad udoskonaleniem specyfikacji języka, jednak jesteśmy już bardzo blisko standardowego rozwiązania umożliwiającego tworzenie responsywnych stron internetowych.

Jeśli chcesz być na bieżąco, polecam śledzić stronę Responsive Issues Community Group.

Autor: Chen Hui Jing

Źródło: http://alistapart.com/article/using-responsive-images-now

Tłumaczenie: Joanna Liana

Tłumaczenie wykonano za pozwoleniem portalu A List Apart i autora tekstu.