Szybkość Średni wpływ Łatwe 20–40 min

Nowoczesne formaty obrazów (WebP/AVIF)

WebP i AVIF są o 25–50% mniejsze niż JPEG/PNG.

Co to jest

WebP i AVIF to nowoczesne formaty obrazów o wyraźnie lepszej kompresji niż JPEG/PNG przy tej samej jakości. Obsługują je wszystkie współczesne przeglądarki.

Dlaczego warto to rozwiązać

Obrazy bywają największą częścią wagi strony. Przejście na WebP/AVIF oszczędza dziesiątki procent danych bez widocznej utraty jakości, bezpośrednie przyspieszenie.

Jak to zrobić

1Przekonwertuj obrazy na WebP (uniwersalny) lub AVIF (jeszcze mniejszy).
2Użyj <picture> z fallbackiem dla pewności.
3Zautomatyzuj konwersję w buildzie / przez CDN z transformacją obrazów.
4Jednocześnie pomniejsz do realnie potrzebnych wymiarów.

Przykład

Dobrze

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="..." width="800" height="600">
</picture>

Podsumowanie

Nowoczesne formaty to jedna z najskuteczniejszych dróg do zmniejszenia wagi strony. Najlepiej zautomatyzuj konwersję, aby nie była to ręczna praca przy każdym obrazie. Łącz z kompresją, właściwymi wymiarami i lazy loadingiem.

Powiązane tematy