AVIF (AV1 Image File Format) en WebP zijn twee moderne raster afbeeldingsformaten die fors beter comprimeren dan JPEG en PNG. WebP werd in september 2010 door Google gepubliceerd, op basis van de VP8 videocodec, en bereikte 100 procent moderne browser ondersteuning toen Safari het in iOS 14 (september 2020) toevoegde. AVIF werd in februari 2019 door de Alliance for Open Media gestandaardiseerd, op basis van de AV1 videocodec, en bereikte brede ondersteuning toen Safari 16 in september 2022 volgde. AVIF comprimeert fotos 20 tot 30 procent kleiner dan WebP bij dezelfde visuele kwaliteit en 50 procent kleiner dan JPEG. WebP is 25 tot 35 procent kleiner dan JPEG. Beide ondersteunen transparantie, animatie en verliesvrije compressie. AVIF ondersteunt ook HDR, 10 en 12 bit kleurdiepte en wide gamut. WebP coderen is 10 tot 20 keer sneller dan AVIF.
Grootteverschil in de praktijk
| Formaat | Foto Q 75 tot 80 | vs JPEG | vs WebP |
|---|---|---|---|
| JPEG | 180 KB | basis | +60 procent |
| WebP lossy | 110 KB | -39 procent | basis |
| AVIF | 75 KB | -58 procent | -32 procent |
| JPEG XL | 80 KB | -55 procent | -27 procent |
Browser ondersteuning
| Browser | WebP | AVIF |
|---|---|---|
| Chrome | v9 (feb 2011) | v85 (aug 2020) |
| Firefox | 65 (jan 2019) | 93 (okt 2021) |
| Safari | 14 (sep 2020) | 16 (sep 2022) |
| Edge | 18 (nov 2018) | 121 (jan 2024) |
| Dekking (caniuse 2025) | 97 procent | 94 procent |
AVIF met WebP fallback serveren
<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>Conversie
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 (jul 2021) WebP, WordPress 6.5 (apr 2024) AVIF. Plugins: ShortPixel, EWWW Image Optimizer, Imagify, Smush, Converter for Media, Optimole. Cloudflare Polish converteert aan de edge.
Wanneer AVIF, wanneer WebP
- AVIF voor hero afbeeldingen, build time gegenereerd.
- WebP voor de long tail.
- Beide via
picture. - Geen AVIF voor iconen onder 5 KB.
- Geen van beide voor SVG of geanimeerde GIF.
JPEG XL en HEIC
JPEG XL ISO/IEC 18181 (2022). Chrome verwijderde in 2023, Safari 17 (sep 2023). HEIC is Apple proprietary, geen web ondersteuning.
Nadelen AVIF
- Trage codering.
- Zwaardere decodering op oude mobiles.
- Beperkte email ondersteuning.
- Social previews (Facebook, LinkedIn) vragen vaak om JPEG.
Hoe helpt InspectWP?
InspectWP analyseert elke afbeelding en meldt formaat, grootte en of AVIF of WebP bandbreedte zou besparen.