Adaptacyjne obrazy: Rozwiązywanie problemu z responsywnym obrazem

Responsywny design to nie tylko zmiana układu czy wykorzystanie zapytań o media tu i tam, to stan umysłu i działanie, które ma wyraźne znaczenie.

Responsywny design zasadniczo mówi, że zależy nam bardziej na treściach niż w przeszłości. W rzeczywistości zależy nam na tym, abyśmy nawet zoptymalizowali zawartość do czytania i oglądania na urządzeniach, które jeszcze nie zostały uruchomione.

Zasadniczo staramy się przedstawiać informacje tak jasno, jak to tylko możliwe i jednocześnie być tak wydajne, jak to tylko możliwe. Oto powszechne błędne przekonanie; mobile first oznacza projektowanie tak, jakby cała witryna kręci się wokół telefonu komórkowego. To nie jest całkiem dokładne. Najpierw mobilne oznacza po prostu zaprojektowanie dla najprostszych doświadczeń, co często prowadzi do zmniejszenia kosztów ogólnych, których doświadczamy lub których możemy doświadczyć w przyszłości.

W świecie projektowania; szybkie decyzje; reakcja na coś; i kreatywne treści, na które musimy przede wszystkim czuwać. A czujność sprowadza się do tego, aby wiedzieć, kiedy mamy problem z naszymi responsywnymi projektami i jak to naprawić. Dzisiaj właśnie to robimy.

Responsywne obrazy są trudnym tematem od lat, ponieważ zazwyczaj istnieje więcej niż jeden sposób "hack-around", aby Twoje zdjęcia były responsywne. Przeanalizujmy ten temat od podstaw, zaczynając od tego, jak to robiliśmy.

Przeszłość

Witryna Boston Globe to klasyczny przykład płynnego projektu.

Zanim przejdziemy dalej, musimy sprawdzić, jak zachowuje się strona internetowa, abyśmy mogli porozmawiać o jej działaniu. Szybkie wyszukiwanie: kod HTML jest ładowany sekwencyjnie, a zasoby są pobierane natychmiast po ich napotkaniu, skrypty są następnie wykonywane natychmiast, a następnie wszystkie pliki cookie są wysyłane z żądaniami HTTP.

Proces request / pulled / fetch / etc. ograniczył nieco kreatywność, jaką możemy uzyskać dzięki tym metodom. Chociaż to z pewnością nie powstrzymało ludzi w przeszłości. Oto kilka sposobów na obejście tego.

Zastępowanie atrybutu "src"

Możemy użyć javascript do przepisania atrybutu "src", tak aby przeciągał i zamieniał obraz na podstawie rozmiaru przeglądarki, który wydaje się działać dobrze. Z tego wiele osób skorzystało w przeszłości. Problem polega na tym, że używa on podwójnego żądania HTTP. Najpierw pobiera oryginalny obraz, a następnie zastępuje go obrazem javascript'd. Zasadniczo robisz więcej, niż byś zrobił, gdybyś nic nie zrobił, a wszystko to wyglądało jak działa.

Czy istnieją obejścia tego problemu? Rzeczywiście są!

Istnieje metoda, z której korzysta wiele osób, gdy umieszczamy na stronie obraz gif 1px zamiast rzeczywistego obrazu, aby zamiast pobierać dwa obrazy w cenie dwóch, otrzymujemy dwa za cenę jednego - ale to nie jest Ideał też. W tym przypadku nadal tworzysz dwa żądania HTTP.

Oznacza to również, że polegasz na javascript dla wszystkich obrazów. To trudne, ponieważ operatorzy komórkowi mogą manipulować przy użyciu javascript, dowolna liczba innych rzeczy może przerwać działanie javascriptu, a zaskakująca liczba użytkowników witryny wyłącza to celowo.

Noscript

Inną metodą, która zyskała popularność, jest użycie tagu "noscript" dla obrazów mobilnych, a następnie użycie javascript do zamiany na obraz o wyższej rozdzielczości. To zdawało się budzić społeczność przez jakiś czas z powodu możliwości zamiany z wersji mobilnej na wersję o wysokiej rozdzielczości, co naprawdę zbiegło się z szeroką błędną interpretacją "telefonu komórkowego", o którym wspomniałem powyżej. To nie działa w IE. Aby obejść program Internet Explorer, należy wpisać:

Problem polega jednak na tym, że teraz nie działa w popularnej przeglądarce Firefox. To, co musimy zrobić, to:

Jak widać, nie jest to bardzo proste i na pewno nie jest zbyt mocne. Naprawdę nie ma sposobu, aby to zrobić czysto lub po prostu w ogóle. W rzeczywistości wiele osób pracujących w responsywnych obrazach próbuje rozwiązać te problemy od lat i naprawdę nie za bardzo się z tym rozwodziło.

Zazwyczaj to, co zrobili, zostało użyte w pewnym javascript do rozwiązania problemu i zaakceptowało podwójne żądanie HTTP jako konieczne zło.

Rozwiązanie po stronie serwera?

Typowym rozwiązaniem po stronie serwera jest użycie javascript do zamiany "src" na "-data-highsrc" HTML5 i zapisania rozmiaru przeglądarki w pliku cookie. Mimo to wysyła te same wielokrotne żądania HTTP, jak wcześniej.

Powodem, dla którego ludziom spodobała się ta metoda, było to, że czuli, że jest bezpieczniejsza, ponieważ przechowują rozmiar przeglądarki w ciasteczku i czuli, że jest mniejszy margines błędu. W rzeczywistości jednak nie jest to dokładne. Oto kilka powodów, dla których ta metoda nie jest tak dobra, jak inne dotychczas wymienione metody. Pozwala tylko na pobieranie dużych i małych obrazów, nie zajmuje się zmianami orientacji urządzenia i bardzo się psuje, ponieważ teraz przeglądarki pobierają wcześniej obrazy. Duże ryzyko polega również na tym, że czasami pliki cookie nie są ustawione wystarczająco szybko, co powoduje, że na komputerach pojawiają się obrazy przeznaczone do telefonów komórkowych.

Z tego powodu, a mianowicie niepowodzenia odpowiednich opcji na serwerze i po stronie klienta, potrzebujemy nowego rozwiązania.

I to jest właśnie tam, gdzie adaptacyjne obrazy kroki metody w.

Metoda obrazów adaptacyjnych

Adaptacyjne obrazy to prawdziwe rozwiązanie tej całej zagadki. Jest to dosłownie tak proste, jak przeciągnięcie i upuszczenie na serwer i gotowe. Ta metoda adaptacyjna wykorzystuje jeden plik htaccess, jeden plik php i pojedynczą linię javascript, i to wszystko .

Wystarczy przeciągnąć plik htaccess i php do katalogu głównego i dodać javascript do nagłówka pliku indeksu i gotowe. Nic więcej się nie martwić. Teraz oferuje mnóstwo dostosowań, ale do tego dojdziemy pod koniec.

Na razie przejdźmy od razu do początku Metody Adaptacyjnej.

Cele

Najpierw określmy cele projektu. Twórca adaptacyjnych obrazów, Matthew Wilcox , określił to jako swoje cele dla tego rozwiązania:

• Musi być łatwy w konfiguracji i obsłudze.
• Musi być tak mało konserwacji, jak to możliwe.
• Musi pracować z istniejącą treścią, bez edycji znaczników lub niestandardowego CMS.
• Musi pozwalać na wiele wersji.
• Musi pracować z punktami przerwania projektu, a nie z punktami przerwania urządzeń.
• Musi być łatwo wymieniony, gdy pojawi się lepsze rozwiązanie.

A te cele dla tego projektu opierają się na założeniu, że

tagi w Twojej witrynie używają już obrazu o najwyższej rozdzielczości, co moim zdaniem jest rozsądnym założeniem. Zazwyczaj będziemy mieć najlepsze obrazy na naszej stronie, ponieważ znam bardzo niewielu projektantów stron internetowych, którzy umieszczają najlepsze zdjęcia w wersjach telefonicznych i najgorsze w Internecie. To też jest dość oczywiste.

Jak to działa

Już niedługo zanurkujemy w kod, ale zanim to zrobimy, porozmawiajmy o tym, jak działa na wyższym poziomie. Po prostu javascript wykrywa największe wymiary ekranu dostępne na tym urządzeniu i zapisuje je w pliku cookie. Plik .htaccess wskazuje następnie żądania do adaptive-images.php, a następnie na podstawie tych reguł plik PHP wykonuje pewne przetwarzanie. Wewnątrz tego przetwarzania odbywa się prawdziwa magia, a przy tym wszystkim polecam wszystkim, którzy czytają ten plik PHP. Jest to najpiękniej napisany PHP, jaki widziałem od lat . To zdecydowanie trzeba zobaczyć.

Teraz przejdźmy do rozdziału na temat działania tych plików i wzajemnej zależności. Omówimy tutaj wszystko, co otrzymasz po pobraniu pakietu ze strony z obrazami adaptacyjnymi.

Kod javascript

Kod javascript, który należy skopiować, jest następujący:

I musi przejść przed każdym innym javascriptem w twojej sekcji głowy . Warto również zauważyć, że jeśli chcesz skorzystać z ekranu Retina na nowszych produktach Apple, możesz skorzystać z następującej linii javascript:

Jak widać, ta ostatnia linia jest bardzo podobna i jedyną różnicą jest to, że przesyła obrazy o wyższej rozdzielczości do takich urządzeń, które pozwalają na to - należy pamiętać, że będzie to oznaczało wolniejsze pobieranie dla użytkowników Retina, ale lepsze zdjęcia oczywiście.

Zwróć uwagę, że to nadal musi być pierwszy javascript w twojej sekcji head.

Plik .htaccess

Plik .htaccess jest po prostu gloryfikowanym narzędziem do zarządzania katalogami, a jeśli masz już stronę internetową, którą rozważasz używając obrazów adaptacyjnych, prawdopodobnie masz już plik .htaccess, więc musimy dodać trochę treści . Po prostu otwórz (zawsze znajduje się w katalogu głównym twojej witryny) i dodaj to:

Options +FollowSymlinksRewriteEngine On# Adaptive-Images ----------------------------------------# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:# RewriteCond %{REQUEST_URI} !some-directory# RewriteCond %{REQUEST_URI} !another-directoryRewriteCond %{REQUEST_URI} !assets# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories# to adaptive-images.php so we can select appropriately sized versionsRewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php# END Adaptive-Images ----------------------------------------

Ciekawą częścią tego jest to, że naprawdę nie trzeba wprowadzać żadnych zmian.

Zazwyczaj strony wymagają, aby wszystkie ich obrazy były responsywne i odtwarzały się dobrze z wszystkimi formami, więc z tego powodu naprawdę nie musisz niczego wykluczać. Jeśli chcesz lub potrzebujesz, istnieje opcja, ale pamiętaj, że chcesz być responsywny i progresywny. Plik .htaccess jest idealny do tego projektu i służy jako klucz w całym procesie, więc bez niego naprawdę nie można użyć tej metody. W rezultacie musisz upewnić się, że tego nie zapomnisz lub dodać, jeśli go nie masz.

Plik PHP

Wszystko, co musisz zrobić z tym, to przeciągnij i upuść go do katalogu głównego, a zajmie się wszystkim innym. Istnieje mała konfigurowalna sekcja, jak widać tutaj:

/* CONFIG ------------------------------ */$resolutions = array(1382, 992, 768, 480); // the resolution break-points to use (screen widths, in pixels)$cache_path = "ai-cache"; // where to store the generated re-sized images. Specify from your document root!$jpg_quality = 80; // the quality of any generated JPGs on a scale of 0 to 100$sharpen  = TRUE; // Shrinking images can blur details, perform a sharpen on re-scaled images?$watch_cache = TRUE; // check that the adapted image isn't stale (ensures updated source images are re-cached)$browser_cache = 60*60*24*7; // How long the BROWSER cache should last (seconds, minutes, hours, days. 7days by default)/* END CONFIG ------ Don't edit anything after this line unless you know what you're doing -------------- */

Jak mówi o reszcie skryptu, jeśli nie wiesz, co robisz, dlaczego nie zostawić go w spokoju? Jeśli lubisz majsterkować, rzućmy tu trochę światła.

$ resolution to szerokości ekranu, z którymi będziemy pracować. Domyślnie będzie przechowywać obraz o większych rozmiarach dla dużych ekranów, normalnych ekranów, tabletów, telefonów i małych telefonów.

$ cache_path, jeśli nie lubisz obrazów zapisanych w pamięci podręcznej zapisanych w tym folderze, możesz umieścić go gdzieś indziej. Po prostu wpisz ścieżkę do tego folderu i upewnij się, że utworzyłeś go na serwerze.

$ sharpen wykona subtelne wyostrzenie na przeskalowanych obrazach. Zwykle jest to w porządku, ale możesz go wyłączyć, jeśli serwer jest bardzo zajęty.

$ watch_cache, jeśli twój serwer jest bardzo zajęty, może pomóc wydajności, aby zmienić ją na FALSE. Będzie to jednak oznaczało, że będziesz musiał ręcznie wyczyścić katalog pamięci podręcznej, jeśli zmienisz zasób.

Teraz, kiedy już wiesz o personalizacji, możesz być ciekawy, co dokładnie robi plik PHP? Cóż, przejrzyjmy to krok po kroku:

• Odczytuje plik cookie i dopasowuje wynik do punktów przerwania pasujących do punktów przerwania CSS
• Sprawdza własny katalog pamięci podręcznej, aby sprawdzić, czy istnieje wersja żądanego pliku o tym rozmiarze punktu przerwania.
• Jeśli tak, to porównuje daty i daty pochodzenia, aby upewnić się, że wersja pamięci podręcznej nie jest nieaktualna.
• Jeśli nie istnieje w pamięci podręcznej; następnie tworzy przeskalowany obraz tylko wtedy, gdy obraz źródłowy jest większy niż rozmiar punktu przerwania. Następnie buforuje to dla przyszłego użycia.

Plik ai-cookie.php

Dostajesz również ten plik "ai-cookie.php" w swoim folderze po pobraniu pakietu obrazów adaptacyjnych, ale można go w rzeczywistości usunąć, ponieważ ma do czynienia z alternatywną metodą wykrywania rozmiaru ekranu użytkownika. Twórca obrazów adaptacyjnych zaleca usunięcie tego i przejście z użyciem standardowej metody.

I tyle na temat zawartości tego pakietu. Teraz upewnij się, że przyjrzysz się wszystkim plikom, które pojawiają się w Twojej witrynie i sprawdzasz, czy korzystasz ze sprawdzonych metod dotyczących zapytań o media. Pamiętaj również, aby zadawać pytania, jeśli masz jakiekolwiek treści lub zapytania o media w ogóle, ponieważ uwielbiam mówić o takich rzeczach. Teraz podsumujmy, co mamy tutaj.

W podsumowaniu:

To z pewnością fascynujący system, który przewiduję na lata. Po pierwsze, co dokładnie mogę spersonalizować w tym systemie jako całości?

Dzięki temu systemowi możesz:

• Ustaw punkty przerwania, aby pasowały do ​​twojego CSS.
• Określ, gdzie chcesz umieścić folder pamięci podręcznej.
• Ustaw jakość generowanych plików JPG.
• Ustaw, jak długo przeglądarki powinny buforować obraz.
• Subtelnie wyostrzaj wygenerowane obrazy.
• Alternatywny javascript do wykrywania urządzeń o wysokiej rozdzielczości.

W przyszłości chciałbym również, aby wykrywał przepustowość w systemie, zamiast rozmiaru urządzenia lub szerokości przeglądarki. Ponieważ jest to kluczowy czynnik decydujący o tym, jaki obraz wysłać gdzie, ale jak na razie nie ma na to realnego sposobu.

Odwiedzić adaptive-images.com aby pobrać pliki, o których wspomniałem w tym artykule.