WebP i AVIF to nowoczesne formaty obrazów, które przy porównywalnej jakości dają mniejsze pliki niż JPEG i PNG. AVIF zwykle kompresuje lepiej, a WebP jest szybszy do kodowania i szerzej wspierany.
Jak wybrać format?
| Format | Zalety | Uwagi |
|---|---|---|
| JPEG | wszędzie obsługiwany | większe pliki |
| WebP | mały rozmiar, przezroczystość | dobry domyślny wybór |
| AVIF | najmniejsze pliki | wolniejsze kodowanie |
Jak serwować kilka formatów?
Elementem <picture> można podać AVIF i WebP z zapasowym JPEG, a przeglądarka wybierze pierwszy obsługiwany.
Jak wdrożyć WebP bezpiecznie?
WebP obsługują wszystkie współczesne przeglądarki, więc w większości przypadków można serwować go bez rozwiązań zastępczych. Jeśli musisz obsłużyć starsze, użyj znacznika picture z elementami source i formatem JPEG lub PNG jako wersją zapasową. Format obsługuje kompresję stratną i bezstratną oraz przezroczystość, więc zastępuje zarówno JPEG, jak i PNG. Zwykle daje pliki mniejsze o kilkanaście do kilkudziesięciu procent. Przy konwersji sprawdź jakość wzrokowo.
Czy format obrazu wpływa na SEO?
Pośrednio, przez szybkość ładowania (LCP). Google indeksuje obrazy w formatach WebP i AVIF tak samo jak JPEG.
Wpływa to bezpośrednio na wydajność strony mierzoną wskaźnikami Core Web Vitals.
Zobacz w praktyce
WebP czy AVIF? Jak odchudzić zdjęcia na stronie bez utraty jakości?
Core Web Vitals - poradnik jak poprawić wskaźniki
Optymalizacja LCP – jak skrócić czas renderowania poniżej 1.2s?
Konfiguracja CDN – cache, czyszczenie i reguły