WebP vs AVIF: which format should you use?
WebP and AVIF are both modern web image formats designed to replace JPG and PNG. AVIF has the edge on compression — typically 20% smaller than WebP at the same quality — but browser support is still catching up. WebP has near-universal support in modern browsers today; AVIF is close but not quite there.
Head-to-head comparison
| Aspect | WebP | AVIF |
|---|---|---|
| Compression | Lossy or lossless | Lossy or lossless |
| File size vs JPG | 25-35% smaller | 40-50% smaller |
| Encoding speed | Fast | 5-10× slower than WebP |
| Transparency (alpha) | Yes | Yes |
| Colour depth | 8-bit | 10-bit and 12-bit |
| HDR support | No | Yes |
| Animation | Yes | Yes |
| Browser support | ~97% (since 2020) | ~92% (since 2022) |
| Age | 2010 | 2019 |
When to use each
Use WebP when
- You want a safe modern format that just works
- Encoding speed matters (large batches, CI pipelines)
- You need the widest possible browser reach
- Your CDN doesn't yet serve AVIF automatically
Use AVIF when
- You need the absolute smallest file size for a critical hero image
- You want HDR delivery on supported browsers
- You control the environment and can require a modern browser
- You're using a CDN that transparently converts and serves the right format
The verdict
For most sites in 2026, WebP is still the pragmatic default — better encoding speed, universal modern support, still huge savings over JPG. AVIF is worth it for hero images and above-the-fold assets where every kilobyte matters. Modern CDNs (Cloudflare, Fastly) will negotiate the right format per-request, so serving both is often free.
Frequently asked questions
Is AVIF really smaller than WebP?
Yes, typically 20% smaller at the same visual quality. AVIF uses AV1 video codec technology (2018 vintage) while WebP uses VP8 (2010). The gap is largest on photographs and smallest on graphics with flat colours. For a 1080p hero image, AVIF might be 80 KB vs WebP's 100 KB.
Why is AVIF encoding so slow?
AV1 was designed for video streaming, where encoding runs once on a server and playback runs a billion times. That trade-off makes single-image encoding expensive — 5-10× slower than WebP. For static sites where images are encoded at build time, this is fine. For real-time upload processing, WebP is more practical.
Which browsers support AVIF?
Chrome (85+, Aug 2020), Firefox (93+, Oct 2021), Safari (16.4+, March 2023), Edge (121+, Jan 2024), Opera, and modern Android WebView. Total ~92% global support in 2026. iOS Safari before 16.4 (older iPhones) and enterprise Chrome installs may fall back to WebP or JPG.
Should I serve AVIF instead of WebP?
Serve both via the picture element. Browsers pick the first supported format, so AVIF gets used where available, WebP as fallback, JPG/PNG as final fallback. Modern CDNs (Cloudflare Polish, Cloudinary) can do this transparently — you upload one PNG and they serve AVIF/WebP/JPG per client.
Does AVIF support HDR?
Yes — AVIF supports 10-bit and 12-bit colour depth plus HDR10/HLG metadata, unlike WebP which is 8-bit only. This matters if you're delivering high-dynamic-range photography to modern displays. In 2026, HDR image display is still niche outside high-end iPhones and OLED laptops.
Can AVIF replace video?
For animated content, AVIF Sequence can technically hold animations, but for actual video delivery, AV1 in an .mp4 or .webm container is better supported and has all the streaming plumbing. Use animated AVIF for short loops and stickers, real video for anything longer than a few seconds.
Last reviewed: