Bogata wizualnie witryna nie musi być powolna. Problemem często nie jest liczba pięknych fotografii, lecz sposób ich przygotowania i ładowania. Wysyłanie dużego oryginału na telefon do małej karty zużywa dane bez widocznej korzyści. Nadmierna kompresja może jednak zniszczyć faktury materiałów i sprawić, że obrazy wyglądają niedbale. Celem nie jest arbitralne minimum kilobajtów, lecz rozsądna równowaga dopasowana do zadania każdego obrazu.
Najpierw określ cel
Podziel obrazy według roli: główne, informacyjne i dekoracyjne. Główna fotografia może kształtować pierwsze wrażenie, dlatego jej jakość jest ważna. Diagram musi pozostać czytelny, a miniatura nie potrzebuje szczegółowości dużego plakatu. Dla każdego typu zapisz proporcje i największy przewidywany rozmiar wyświetlania. Pomaga to redaktorom przygotowywać materiały spójnie zamiast za każdym razem eksperymentować z kadrami bez jasnych zasad.
Przygotuj kilka rozmiarów
Obrazy responsywne pozwalają przeglądarce wybrać zasób odpowiedni do warunków wyświetlania. Dokumentacja web.dev wyjaśnia mechanizmy udostępniania tych wariantów. W praktyce sprawdź, czy odwiedzający na telefonach nie pobierają niepotrzebnie tego samego dużego pliku co użytkownicy komputerów. Zmniejszenie obrazu samymi stylami nie zmniejsza ilości przesyłanych danych. Warianty muszą istnieć jako osobno przygotowane zasoby albo być generowane przez odpowiedni system przetwarzania.
Porównuj formaty na rzeczywistym materiale
Fotografia, ilustracja zawierająca tekst i przezroczysty znak inaczej reagują na kompresję. Przetestuj odpowiednie nowoczesne formaty oraz wariant zapasowy, jeśli wymaga go implementacja. Nie wybieraj ustawień tylko według rozmiaru pliku: obejrzyj wynik na docelowym ekranie, zwracając uwagę na gradienty, krawędzie i drobne szczegóły. Ważne sformułowania lepiej zachować jako prawdziwy tekst strony niż osadzać w obrazie, gdzie trudniej je czytać, kopiować i dostosowywać.
Uwzględnij kolejność ładowania
Obrazy daleko poniżej pierwszego ekranu często mogą ładować się później. Głównego elementu wizualnego nie należy jednak automatycznie opóźniać razem z resztą. Ostateczną decyzję podejmij po przetestowaniu strony, zamiast stosować jedną uniwersalną regułę. Zarezerwuj też przewidywalną ilość miejsca na obrazy w układzie, by ich pojawienie się nie powodowało przeskakiwania tekstu i przycisków. Odwiedzający powinni zachować orientację podczas ładowania treści.
Dodaj znaczące opisy
Tekst alternatywny powinien przekazywać znaczenie obrazu w konkretnym kontekście, a nie mechanicznie powtarzać słowa kluczowe. Jeśli fotografia pokazuje ważną cechę pracy, krótko ją wyjaśnij. Element dekoracyjny nie powinien tworzyć zbędnego szumu dla technologii asystujących. Uporządkowanie nazw plików i opisów podczas przygotowania treści jest też łatwiejsze niż poprawianie setek przypadkowych nazw po uruchomieniu katalogu.
Po optymalizacji ponownie przetestuj stronę na wolniejszym połączeniu i prawdziwym telefonie. Porównaj szybkość pojawienia się głównej treści, stabilność kompozycji i wygląd fotografii. Celem nie jest atrakcyjna liczba w jednym raporcie. Chodzi o pomoc w szybkim zobaczeniu potrzebnych rzeczy bez utraty ważnych szczegółów.