Adaptive images, proste i wydajne

Ostatnio usłyszałem o tym rozwiązaniu od kolegi, postanowiłem zaimplementować u siebie. Adaptive images polega na dynamicznym generowaniu obrazków w zależności od rozdzielczości ekranu. Co przy RWD i urządzeniach mobilnych daje nam bardzo duży performance, dzieki generowaniu mniejszych obrazków dopaswoanych do szerokości ekranu. Przykład, gdy mamy obrazki o rozdzielczości 1280px x 1024px i odpalamy je na urządzeniu o rozdzielczości 640px x 480px, ładujemy niepotrzebnie dodatkowe kb a obrazek i tak będzie przeskalowany do rozdzielczości urządzenia. Adaptive Images to proste 2 skrypty PHP, pierwszy ustawia cookie z parametrem szerokości ekranu, plik php jest odpalamy z CSS media queries. Drugi plik php generuje nam obrazek w odpowiedniej rozdzielczości z uzyciem modrewrite nie zmieniamy nic w html, ścieżka i nazwa obrazka się nie zmienia. Można powiedzieć, że jest przezroczyste i nie ingeruje w html.

Dodatkowo Adaptive images możemy uzyć dynamicznym picturefill i w locie konwertować obrazki, coś dla RWD. Choć moim zdaniem dynamiczne generowanie ma sens gdy zwiększamy szerokośc ekranu, w drugą stronę już możemy skalować.

Możemy też użyć do generowania dynamicznych thumbnails.