Zdjęcie produktu wygląda dobrze na komputerze, ale na telefonie sklep długo pokazuje puste pola. W raporcie PageSpeed pojawiają się uwagi o obrazach, choć wszystkie pliki mają już rozszerzenie WebP. To możliwe: format jest tylko jednym z elementów optymalizacji.
Liczy się również liczba pikseli, stopień kompresji, moment pobrania oraz to, czy przeglądarka dostaje wariant pasujący do ekranu. Ten poradnik pomoże sprawdzić te elementy przed masową konwersją biblioteki mediów. Jeśli potrzebujesz diagnozy konkretnego serwisu, zobacz audyt Core Web Vitals i optymalizację wydajności.
WebP, AVIF i JPEG XL - co wybrać na stronę
WebP jest praktycznym punktem wyjścia dla zdjęć, ilustracji i części grafik z przezroczystością. Nie oznacza to, że każdy WebP będzie mniejszy od dobrze przygotowanego JPEG-a. Porównuj rzeczywiste pliki przy akceptowalnej jakości, zamiast kierować się samym rozszerzeniem.
AVIF warto sprawdzić przy fotografiach i większych obrazach. Może pozwolić zmniejszyć plik przy podobnym odbiorze wizualnym, ale rezultat zależy od materiału i ustawień kodera. Oceń włosy, tkaniny, drobne napisy, gradienty oraz czas przetwarzania po stronie hostingu. Najmniejszy plik nie wygrywa, jeżeli produkt traci ważne szczegóły.
JPEG XL to dodatkowy kierunek do testów. W komunikacie z 6 października 2026 Google ogłosił obsługę dekodowania JPEG XL od Chrome 155. Wskazuje m.in. zastosowania wymagające wysokiej jakości, kompresji bezstratnej i progresywnego wyświetlania. Nie jest to powód, żeby natychmiast wymienić całą bibliotekę. Przed wdrożeniem trzeba sprawdzić przeglądarki odbiorców, narzędzia serwera i działający wariant zapasowy. Źródło: komunikat Chrome o JPEG XL.
Nie ma jednego zwycięzcy dla wszystkich obrazów. Rozsądny proces to porównanie kilku reprezentatywnych plików, kontrola jakości i dopiero wtedy wybór sposobu obsługi pozostałych.
Logo, zdjęcie produktu i hero wymagają innych ustawień
Do prostego logo lub ikony najlepiej zachować dobre źródło wektorowe, jeśli jest dostępne. SVG skaluje się bez powiększania bitmapy. Nie należy jednak automatycznie zamieniać na wektor rozbudowanej ilustracji ani bez kontroli przyjmować plików SVG z nieznanego źródła.
Fotografia produktu potrzebuje szczegółów materiału i wiarygodnych kolorów. Miniatura na liście i zdjęcie otwierane w powiększeniu nie muszą być tym samym plikiem. Z kolei dekoracyjny obraz hero powinien być dopasowany do dużego pola, ale nie większy niż wymaga rzeczywisty sposób wyświetlania.
PNG nadal ma zastosowania, szczególnie przy wymaganej bezstratności i przezroczystości. Problemem nie jest samo istnienie PNG, tylko wysyłanie ciężkiego materiału tam, gdzie lżejsza wersja wygląda równie dobrze. Porównanie cech formatów znajdziesz w przewodniku MDN po formatach obrazów.
Dlaczego zdjęcie WebP nadal może spowalniać stronę
Najpierw sprawdź, czy problem nie wynika z jednego z tych przypadków:
- plik ma kilka tysięcy pikseli szerokości, choć wyświetla się jako mała miniatura;
- ten sam duży obraz trafia na telefon, laptop i ekran o wysokiej gęstości pikseli;
- strona pobiera od razu całą galerię lub kilka slajdów banera;
- kompresja zachowuje szum i szczegóły, których nie widać w docelowym rozmiarze;
- serwer generuje nowy format, ale kod strony nadal wskazuje stary plik;
- wtyczka i CDN przekształcają obraz niezależnie, bez sprawdzenia efektu końcowego.
Przed tym artykułem sprawdziłem również obrazy 27web. W audycie z 24 października 2026 jeden z logotypów był podłączony jako PNG o wadze 146 585 bajtów, mimo że przygotowany wariant WebP tej samej szerokości ważył 8124 bajty. Różnica wynosi około 94%. To porównanie konkretnych plików logo, nie obietnica oszczędności dla każdej fotografii ani wyniku PageSpeed.
Inny, szczegółowy logotyp był już w WebP. Ponowne zapisanie go przy podobnych ustawieniach dawało niewielką oszczędność. Taki materiał wymaga osobnej oceny rozdzielczości, przezroczystości i czytelności. Samo hasło „wszystko do WebP” nie rozwiązuje problemu.
Rozmiary zdjęć i srcset - co powinien dostać telefon
Rozdzielczość pliku i jego szerokość na ekranie to różne rzeczy. Pole szerokości około 350 pikseli CSS może potrzebować większej bitmapy na ekranie o wysokiej gęstości. Dlatego nie należy ani zawsze wysyłać najmniejszej miniatury, ani wszędzie podłączać oryginału.
srcset udostępnia warianty, a sizes opisuje przewidywaną szerokość obrazu w układzie strony. Przeglądarka wybiera źródło z uwzględnieniem m.in. ekranu i gęstości pikseli. Błędne sizes może prowadzić do pobierania zbyt dużego wariantu, mimo poprawnie wygenerowanych miniatur. Szczegóły opisuje dokumentacja responsywnych obrazów web.dev.
Test odbiorowy powinien obejmować faktycznie wybrany adres obrazu, jego wagę i ostrość na docelowym urządzeniu. Sama obecność kilku plików w katalogu nie potwierdza ich używania.
Sklep pobiera duże zdjęcia na telefonie? Sprawdź zakres audytu wydajności lub podeślij adres strony do oceny.
Lazy loading i obraz hero - czego nie opóźniać
Obrazy daleko poniżej pierwszego ekranu mogą poczekać z pobraniem. Natywne loading="lazy" ogranicza niepotrzebną pracę bez dokładania osobnej biblioteki JavaScript. Nie jest jednak ustawieniem, które należy bezmyślnie nadać wszystkim zdjęciom.
Obraz widoczny od razu, zwłaszcza będący elementem LCP, nie powinien czekać na mechanizm lazy loading. Dodatkowy priorytet pobierania warto przydzielać świadomie, po ustaleniu, który zasób rzeczywiście odpowiada za główny widok. Na mobile najważniejszym elementem może być tekst, a nie ilustracja znajdująca się niżej.
Istotne są też zarezerwowane proporcje obrazu. Wymiary width i height oraz zgodny z nimi układ pomagają uniknąć przesuwania tekstu i przycisków po wczytaniu grafiki. Wyjaśnienie zachowania lazy loading znajdziesz w poradniku web.dev.
Optymalizacja zdjęć w WordPressie i WooCommerce
Zacznij od kopii i małej próbki: kilku produktów, jednej galerii oraz obrazu hero. Zachowaj oryginały, żeby nie kompresować kolejnych kopii stratnie bez możliwości powrotu. Sprawdź, czy serwer umie generować wybrany format i czy motyw rzeczywiście korzysta z odpowiednich rozmiarów.
W WooCommerce porównaj listę produktów, kartę produktu, warianty i powiększenie zdjęcia. Zmiana miniatur nie może zabrać klientowi możliwości obejrzenia detalu. Po regeneracji obrazów skontroluj również cache i CDN - inaczej możesz oceniać wcześniejszy plik.
Wtyczka jest narzędziem, a nie dowodem poprawnego wdrożenia. Gdy przyczyną jest sposób budowania galerii, motyw lub błędne rozmiary w HTML, potrzebna może być zmiana kodu. Takie prace można połączyć z rozwojem sklepu WooCommerce albo opieką techniczną WordPressa.
Jak sprawdzić efekt i nie obiecywać 100 punktów
Porównuj ten sam adres i scenariusz, osobno na telefonie i desktopie. Zapisz warunki pomiaru, wybrany plik, rozmiar transferu i jakość obrazu. Uwzględnij pierwszy odczyt bez cache oraz kolejną wizytę. Wynik laboratoryjny PageSpeed nie jest tym samym co dane rzeczywistych użytkowników z Core Web Vitals.
Przed zakończeniem prac sprawdź:
- Czy obrazy i warianty zapasowe działają bez błędów?
- Czy telefon nie pobiera niepotrzebnie dużych oryginałów?
- Czy detale produktów, tekst i przezroczyste krawędzie pozostają czytelne?
- Czy obraz pierwszego ekranu nie jest opóźniony?
- Czy wczytywanie nie przesuwa układu?
- Czy po zmianie adresów plików nie wraca stara wersja z cache?
Dobry rezultat to mniejszy transfer i sprawniejsze wyświetlanie bez pogorszenia użyteczności. Nie każdy problem wydajności wynika z obrazów, dlatego nie obiecuję 100 punktów po instalacji jednej wtyczki. Jeśli chcesz ustalić, co warto poprawić w Twoim serwisie, opisz stronę i prześlij link do raportu.