Tych, którzy zetknęli się z tematem Responsive Web Design i wyznają filozofię mobile first z pewnością zainteresuje bardzo ciekawe narzędzie, jakim jest Adaptive Images.

O Adaptive Images piszą w jednym z artykułów w tegorocznym cyklu przedświątecznych artykułów na 24ways.org. O co chodzi? Chodzi o obrazy, które pojawiają się na stronach. W RWD chodzi przede wszystkim o serwowanie treści w sposób najbardziej optymalny dla urządzenia, na którym ta treść jest wyświetlana. Posługując się media queries możemy zmieniać wygląd serwisu dostosowując do np. (chyba najczęściej) do rozdzielczości ekranowej. I tak użytkownikowi korzystającemu z jakiegoś fajnego monitorka zaserwujemy stronę dostosowaną do szerokości 1200px, a fanowi Apple korzystającemu ze swojego nowego iPhona do rozdzielczości 320px. Generalnie obu zaserwujemy tę samą stronę, ale w nieco innej, zoptymalizowanej formie.

I tutaj pojawia się pierwsze wyzwanie lub – jeśli ktoś woli – pierwsza przeszkoda. Obrazki. Jak radzić sobie z obrazkami w projektach, które mają być płynne i spełniać założenia RWD? W tym wypadku użycie media queries okaże się bezcelowe, ponieważ cała heca nie polega na zmianie wysokości i szerokości obrazka, ale również jego wagi. Co z tego, że użytkownikowi mobilnemu wyświetlimy mniejszy obraz, skoro w dalszym ciągu będzie on ważyć tyle samo i zużyje tyle samo zasobów? Oczywiście – możemy przygotować kilka wersji jednego obrazu w programie graficznym, ale to dość kłopotliwe, szczególnie przy często aktualizowanej treści na stronie.

Rozwiązanie oparte na JS z kolei wydaje się być niedźwiedzią przysługą dla użytkownika, bo oryginalny obraz i tak zostanie pobrany. W efekcie pobrane zostaną dwa obrazy, więc wykorzystamy jeszcze więcej zasobów, niż gdybyśmy w ogóle dali sobie spokój. Na szczęście istnieje bardzo fajne rozwiązanie tego problemu – to Adaptive Images.

Działanie

Jaką prace właściwie wykonuje ten skrypt? Przede wszystkim pozwala dostosować wymiary i wagę zdjęcia do tych samych rozdzielczości, które zostały określone dla CSS. Największa zaletą AI, że po instalacji nie trzeba się już o nic martwić, nic zmieniać – wszystko odbywa się automatycznie. Najfajniejsze jednak jest to, że instalacja skryptu nie wymaga od nas absolutnie żadnych zmian w kodzie.

Opis działania skryptu oraz proces instalacji krok po kroku znajdziecie an stronie domowej projektu (english required). Przyznam szczerze, że jeszcze nie miałem okazji skorzystać ze skryptu, ale planuje to zrobić i postaram się podzielić swoimi spostrzeżeniami. Wydaje mi się jednak, ze sam fakt, że skrypt pojawił się na 24ways.com jest dla niego świetną rekomendacją.

Podobne wpisy:

  • Brak podobnych wpisów.