Z racji pojawiania się kolejnych urządzeń z większą ilością pikseli na centymetr kwadratowy - ostatnio MacBooka z wyświetlaczem Retina Display - coraz głośniej mówi się o sposobach na rozwiązanie problemu serwowania różnych obrazków dla urządzeń z różną gęstością pikseli. Kilka dni temu pojawił się pierwszy szkic specyfikacji Responsive Images.

Responsive ImagesKlasycznym przykładem rozwiązania problemu jest serwowanie dwa razy większych grafik dla urządzeń z wyświetlaczem Retina Display, ale problem pojawia się w momencie korzystania z Internetu na urządzeniu 3G, na którym każdy kilobajt się liczy. Pobieranie obu grafik - normalnej i dwa razy większej - na takim urządzeniu to błąd karygodny, powstała więc koncepcja serwowania obrazków w sposób podobny do stosowanych już tagów <audio> i <video>, a więc z pomocą <source> i wielokrotnego określania źródła. Zmiana działania <img> nie wchodzi w grę, więc trzeba było wybrać coś innego - idealnie nadaje się do tego <picture>. Tak może wyglądać przykładowa implementacja:

<picture alt="Alternatywny tekst">

	<source media="(min-width: 45em)"

		srcset="large-1.jpg 1x, large-2.jpg 2x">

	<source media="(min-width: 18em)"

		srcset="med-1.jpg 1x, med-2.jpg 2x">

	<source srcset="small-1.jpg 1x,

		small-2.jpg 2x"> 

	<img src="small-1.jpg"> 

</picture>

Dzięki temu zabezpieczymy się na wszystkie możliwe sposoby: pierwszy <source> zostanie użyty w momencie, gdy minimalna szerokość urządzenia wynosi 45em, drugi <source> dla minimalnej szerokości 18em, a trzeci jest ustawieniem najmniejszym i domyślnym, bez zdefiniowanej szerokości urządzenia. Wszystkie trzy elementy <source> posiadają dwa zestawy obrazków według schematu nazwa1.jpg 1x, nazwa2.jpg 2x, dzięki któremu będzie można zaserwować odpowiedniej wielkości obrazki w zależności od ekranu - standardowe dla normalnych ekranów i dwa razy większe dla ekranów z większą gęstością, np. Retina Display. Ostatni <img> wewnątrz <picture> służy jako wsparcie dla starszych przeglądarek nieobsługujących tego rozwiązania.

Problemem może być teraz mechanizm przeglądarek, które automatycznie pobierają wszystkie zasoby używane na stronie niezależnie od tego, czy rzeczywiście są potrzebne i zostaną użyte, czy nie, ale i nad tym trwają prace. Z racji faktu, że jest to tylko szkic, pomysł na implementację - żadna przeglądarka jeszcze tego nie obsługuje.

Ciekawym, podsumowującym dotychczasowe rozwiązania artykułem jest Which responsive images solution should you use? autorstwa Chrisa Coyiera. Warto zwrócić także uwagę na stronę Adaptive-Images.com.

Czy to rozwiązanie jest idealne? Na pewno jest najbliżej ideału patrząc na wszystkie inne propozycje. Od developerów zależy czy zaczną z niego korzystać w swoich projektach.