WebP – co to jest i jak wpływa na szybkość ładowania strony internetowej
Autor: Patryk Pawlik · Aktualizacja treści:
WebP to format obrazów obsługujący kompresję stratną i bezstratną, przezroczystość oraz animację. Może zmniejszyć transfer względem JPEG lub PNG, ale efekt zależy od konkretnego obrazu, wymiarów i ustawień jakości. Samo rozszerzenie pliku nie gwarantuje szybszej strony.
WebP, JPEG, PNG czy AVIF?
Dokumentacja Google WebP potwierdza obsługę w głównych przeglądarkach, w tym Safari, Chrome, Firefox i Edge. Przewodnik formatów MDN opisuje także AVIF. Dla zdjęcia porównaj WebP i AVIF z JPEG; dla grafiki wymagającej dokładnej reprodukcji i przezroczystości sprawdź wariant bezstratny. Zachowaj źródło do przyszłych eksportów.
Jak porównać rozmiar i jakość?
Weź jeden obraz i eksportuj go w tych samych wymiarach do wybranych formatów. Porównaj rozmiar pliku oraz wygląd detali, tekstu i krawędzi przy docelowej skali. Zapisz parametry eksportu i wybierz najmniejszy plik zachowujący potrzebną jakość. Nie porównuj małego WebP z większym wymiarowo JPEG.
Przykład samego obliczenia, nie wynik testu Hypercon: jeżeli plik źródłowy ma 300 kB, a wariant po eksporcie 180 kB, oszczędność wynosi 120 kB, czyli 40%. Nie oznacza to, że cała strona przyspieszy o 40% — jej czas ładowania zależy także od sieci, serwera, kodu i momentu pobrania obrazu.
Responsywne obrazy: srcset i sizes
Nie wysyłaj każdemu urządzeniu największego pliku. Przygotuj warianty rozmiaru i opisz szerokość wyświetlania przez sizes. Przeglądarka wybierze odpowiedni plik z srcset. Poniższy kod jest przykładem struktury, a wskazane pliki trzeba rzeczywiście wygenerować.
<picture>
<source type="image/avif" srcset="produkt-480.avif 480w, produkt-960.avif 960w" sizes="(max-width: 600px) 100vw, 600px">
<source type="image/webp" srcset="produkt-480.webp 480w, produkt-960.webp 960w" sizes="(max-width: 600px) 100vw, 600px">
<img src="produkt-960.jpg" srcset="produkt-480.jpg 480w, produkt-960.jpg 960w" sizes="(max-width: 600px) 100vw, 600px" width="960" height="640" alt="Czarny plecak miejski z oddzielną przegrodą na laptop">
</picture>Wdrożenie w WordPressie i kontrola po publikacji
Sprawdź najpierw funkcje hostingu i używanej wtyczki optymalizacji; unikaj równoległych mechanizmów, które podwójnie konwertują lub nadpisują adresy. Zrób kopię oryginałów. Po wdrożeniu sprawdź obrazy w aktualnych przeglądarkach, miniatury, warianty mobilne i rzeczywisty format odpowiedzi w narzędziach sieciowych. Zarezerwuj miejsce atrybutami width i height. Nie stosuj lazy loading do głównego obrazu widocznego od razu; opóźnianie tego zasobu może pogorszyć LCP.
Jeżeli po zmianie formatu nadal występują opóźnienia, sprawdź optymalizację szybkości strony. Pomiar powinien obejmować cały scenariusz użytkownika, a nie tylko rozmiar pojedynczego pliku.
