Format to tylko jedna z decyzji
Zdjęcia produktów, fotografie w artykułach i duże obrazy na stronie głównej mogą stanowić znaczną część danych pobieranych przez przeglądarkę. Wybór formatu ma więc znaczenie dla czasu ładowania, ale sam w sobie nie rozwiąże problemu zbyt dużych obrazów. Plik o szerokości 3000 pikseli pozostanie niepotrzebnie ciężki, jeśli jest wyświetlany w niewielkiej karcie produktu.
Przy każdym obrazie warto odpowiedzieć na trzy pytania: jakie wymiary będą rzeczywiście potrzebne, jaką jakość trzeba zachować i w jakich przeglądarkach obraz ma się wyświetlać. Dopiero potem wybierz format i ustawienia kompresji. Celem nie jest najmniejszy plik za wszelką cenę, lecz rozsądna równowaga między wagą, jakością i niezawodnym wyświetlaniem.
Kiedy wybrać JPEG, WebP lub AVIF
JPEG to sprawdzony wybór dla fotografii, szczególnie gdy zależy Ci na szerokiej zgodności z przeglądarkami i innymi narzędziami. Nie obsługuje przezroczystości. Przy mocniejszej kompresji na zdjęciach mogą pojawić się widoczne artefakty, zwłaszcza wokół drobnych detali lub tekstu. JPEG może też pełnić rolę wariantu zapasowego, gdy udostępniasz nowsze formaty.
WebP nadaje się zarówno do fotografii, jak i wielu grafik z przezroczystym tłem. Często pozwala uzyskać mniejszy plik niż porównywalny JPEG, choć wynik zależy od konkretnego obrazu i ustawień eksportu. To praktyczny format dla zdjęć produktowych, miniaturek i ilustracji, jeśli stosowane na stronie przeglądarki go obsługują.
AVIF również obsługuje przezroczystość i przy niektórych obrazach pozwala mocno ograniczyć rozmiar pliku bez wyraźnej utraty jakości. Nie zawsze jednak będzie najlepszym wyborem: kodowanie może być wolniejsze, a drobne szczegóły lub przejścia tonalne mogą wyglądać inaczej niż w pliku źródłowym. Przed masową konwersją sprawdź kilka typowych obrazów ze swojej witryny, na przykład zdjęcie produktu, portret i fotografię z dużą liczbą detali.
Nie każda grafika powinna być fotografią
Logo, proste ikony i schematy warto rozpatrywać oddzielnie od zdjęć. Jeśli da się je przygotować jako SVG, mogą pozostać ostre przy różnych rozmiarach ekranu. SVG nie jest jednak dobrym zamiennikiem fotografii. Przy publikowaniu plików SVG pochodzących z zewnątrz trzeba też zadbać o ich bezpieczne przygotowanie.
Grafika z tekstem, cienkimi liniami lub dużymi obszarami jednolitego koloru wymaga kontroli po eksporcie. Nawet jeśli plik WebP lub AVIF jest mały, rozmyte napisy i poszarpane krawędzie pogarszają odbiór strony. Gdy przezroczystość jest konieczna, a wybrany sposób udostępniania nowszych formatów nie pasuje do projektu, PNG nadal może być użyteczne. Nie ma potrzeby zastępować każdego istniejącego pliku jednym formatem.
Dostarczaj właściwy wariant właściwemu ekranowi
Przygotuj kilka szerokości najważniejszych obrazów i pozwól przeglądarce wybrać odpowiednią wersję za pomocą atrybutów srcset i sizes. Miniaturka wyświetlana na telefonie nie powinna wymagać pobrania pliku przeznaczonego na szeroki ekran. Sprawdź też, czy ustawienia sizes odpowiadają faktycznej szerokości obrazu w układzie strony; błędna wartość może skłonić przeglądarkę do pobrania zbyt dużego wariantu.
Jeśli chcesz udostępniać AVIF, WebP i wariant zapasowy, możesz użyć elementu picture z odpowiednimi źródłami oraz obrazem w elemencie img. Upewnij się, że wszystkie wersje przedstawiają tę samą treść, mają właściwe proporcje i poprawnie działają po opublikowaniu. Dla obrazów ustaw wymiary lub proporcje w kodzie i stylach, aby strona mogła zarezerwować dla nich miejsce przed pobraniem pliku.
Obrazy znajdujące się daleko poniżej widocznej części strony zwykle nadają się do leniwego ładowania. Nie stosuj go automatycznie do głównego zdjęcia widocznego od razu po otwarciu strony: opóźnienie jego pobrania może pogorszyć odczuwalną szybkość. Opis alternatywny obrazu dobieraj do jego funkcji i treści, niezależnie od użytego formatu.
Krótka kontrola przed wdrożeniem
Zacznij od kilku reprezentatywnych podstron: artykułu ze zdjęciami, listy produktów i karty produktu. Sprawdź w narzędziach przeglądarki rzeczywiste wymiary oraz rozmiary pobieranych plików. Wyeksportuj wybrane obrazy w porównywalnych wymiarach jako JPEG, WebP i AVIF, a następnie obejrzyj je w rozmiarze, w jakim będą używane. Zwróć uwagę na twarze, drobne napisy, faktury i krawędzie.
Po wdrożeniu skontroluj na telefonie i komputerze, czy przeglądarka pobiera właściwy wariant, czy działa obraz zapasowy oraz czy układ nie przesuwa się podczas ładowania. Sprawdź szczególnie główny obraz strony i serie miniaturek: tam pomyłka powielona na wielu plikach bywa bardziej odczuwalna niż wybór między dwoma podobnie skompresowanymi formatami. Zachowaj pliki źródłowe, aby w razie potrzeby móc ponownie przygotować obrazy bez pogarszania jakości przez kolejne konwersje.
