AVIF (AV1 Image File Format) i WebP to dwa nowoczesne rastrowe formaty obrazow, ktore kompresuja znacznie lepiej niz JPEG i PNG. WebP zostal wydany przez Google we wrzesniu 2010 na bazie kodeka VP8 i osiagnal pelne wsparcie nowoczesnych przegladarek, gdy Safari dodalo go w iOS 14 (wrzesien 2020). AVIF zostal ustandaryzowany przez Alliance for Open Media w lutym 2019 na bazie kodeka AV1 i osiagnal szerokie wsparcie, gdy Safari 16 dodalo go we wrzesniu 2022. AVIF kompresuje zdjecia 20 do 30 procent mniejsze niz WebP przy tej samej jakosci wizualnej i 50 procent mniejsze niz JPEG. WebP jest 25 do 35 procent mniejszy niz JPEG. Oba obsluguja przezroczystosc, animacje i kompresje bezstratna. AVIF obsluguje takze HDR, 10 i 12 bit i szeroka palete kolorow. Kodowanie WebP jest 10 do 20 razy szybsze niz AVIF.
Roznica rozmiaru w praktyce
| Format | Foto Q 75 do 80 | vs JPEG | vs WebP |
|---|---|---|---|
| JPEG | 180 KB | baza | +60 procent |
| WebP lossy | 110 KB | -39 procent | baza |
| AVIF | 75 KB | -58 procent | -32 procent |
| JPEG XL | 80 KB | -55 procent | -27 procent |
Wsparcie przegladarek
| Przegladarka | WebP | AVIF |
|---|---|---|
| Chrome | v9 (lut 2011) | v85 (sie 2020) |
| Firefox | 65 (sty 2019) | 93 (paz 2021) |
| Safari | 14 (wrz 2020) | 16 (wrz 2022) |
| Edge | 18 (lis 2018) | 121 (sty 2024) |
| Zasieg (caniuse 2025) | 97 procent | 94 procent |
AVIF z fallbackiem WebP
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Foto" width="1200" height="800" loading="lazy">
</picture>Konwersja
cwebp -q 80 hero.jpg -o hero.webpavifenc --min 25 --max 35 hero.jpg hero.avif- Sharp, ImageMagick 7.0.25+, libvips, Squoosh.
- CDN on the fly: Cloudflare Images, Cloudinary, imgix, Bunny Optimizer, Statically.
WordPress
WordPress 5.8 (lip 2021) WebP, WordPress 6.5 (kwi 2024) AVIF. Wtyczki: ShortPixel, EWWW Image Optimizer, Imagify, Smush, Converter for Media, Optimole. Cloudflare Polish konwertuje na edge.
Kiedy AVIF, kiedy WebP
- AVIF dla hero i duzych zdjec w build.
- WebP dla long tail.
- Oba przez
picture. - Bez AVIF dla ikon ponizej 5 KB.
- Zadne dla SVG i animowanych GIF.
JPEG XL i HEIC
JPEG XL ISO/IEC 18181 (2022). Chrome usunal w 2023, Safari 17 (wrz 2023). HEIC zastrzezony Apple, brak w sieci.
Wady AVIF
- Wolne kodowanie.
- Ciezsze dekodowanie na starych telefonach.
- Slabe wsparcie w emailu.
- Podglady spolecznosciowe (Facebook, LinkedIn) czesto wymagaja JPEG.
Jak InspectWP pomaga?
InspectWP analizuje kazde zdjecie i raportuje format, rozmiar oraz czy AVIF lub WebP oszczedzilby pasmo.