Reference guide · images · Published 2026-08-16 · 3 min read
AVIF vs WebP formats
AVIF vs WebP image formats: compression, browser support, encoding cost and when to use each for smaller faster images.
- ·The two formats
- ·Quality vs weight
- ·Choose and ship
Both AVIF and WebP are modern formats that replace JPEG and PNG. WebP is the safe default because every modern browser decodes it; AVIF is usually smaller but less universal, so it ships best as the first-choice format with WebP as the fallback. The trade-off between them is compression versus support, and both beat JPEG for the same visual quality.
The two formats
| Format | Base | What it is good at | Weak spot |
|---|---|---|---|
| WebP | Lossy + lossless, via VP8/VP9 | Photos at high compression, simple pages | Larger than AVIF at the same quality |
| AVIF | HEVC-based, AV1 image | The best ratio for photos by a wide margin | Old browser support, slower to encode |
Quality and size
At "visually indistinguishable from the original", an AVIF file is typically 20 to 50 percent smaller than a WebP for a photo, and both beat a JPEG by a large margin. On line art, logos and flat-color UI, the gap narrows; a lossless PNG derived format often wins there, so the win is for photos and gradients.
| Content | Order that wins for weight |
|---|---|
| Photos, gradients | AVIF > WebP > JPEG |
| Flat logos, icons | PNG (or SVG where allowed) |
| Animated | WebP (or AVIF) for short loops |
Support and serving
- WebP: supported in every current browser (Chrome, Edge, Firefox, Safari) and a working fallback path in most toolchains.
- AVIF: supported in Chrome, Edge and Firefox, and in Safari since 16.x for static AVIF; animated AVIF is still patchy in some Safari versions.
- The practical serving rule:
srcsetfirst ships AVIF with a WebP fallback inside the same<picture>element, and a JPEG fallback last, so no visitor is left without an image.
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="..." width="1200" height="800">
</picture>Encoding costs
AVIF encoding is heavier than WebP. A one-off conversion of a small product image is similar, but a whole media library (10,000 originals) can be an order of magnitude slower with AVIF. Size your pipeline: run AVIF for the subset (hero, previews), keep WebP for scale, or use a service like a CDN image API that does the encoding on demand.
Deciding for your site
- Check your visitors' browsers over the last 90 days. If every main browser your logs show supports AVIF, ship AVIF first for photos.
- Keep WebP as the fallback and your originals as JPEG/PNG (you always keep the master).
- Test with real sizes, not marketing numbers: compare a page with JPEG vs WebP vs AVIF and weigh the median. See image compression for the size budget.
- Serve with
width/heightset (the aspect ratio article shows why) and let the browser pick.
When to involve a professional
If encoding your whole media library to AVIF turns out slower than your deploy cycle, the right move is an image pipeline (a build step or a CDN that resizes on the fly), which a performance engineer or your host can set up. Do not hand-curate 10,000 images twice a year; that is a leak that costs more than the format saves.