Images
AVIF vs WebP
AVIF produces files roughly 30 to 50 percent smaller than WebP at the same quality, and encodes considerably more slowly. Serve AVIF first with WebP as the fallback — a picture element gives you both, so it is not really a choice between them.
Side by side
| Compared on | AVIF | WebP |
|---|---|---|
| File size vs JPEG | 50–70% smaller | 25–35% smaller |
| Browser support | All current major browsers | Universal |
| Encoding speed | Slow | Fast |
| Transparency | Yes | Yes |
| Animation | Yes | Yes |
| Best used | First source in a picture element | Fallback beneath AVIF |
When AVIF is the right choice
- Photographic content where bytes dominate page weight
- Image-heavy pages — catalogues, portfolios, galleries
- When encoding happens at build time rather than per request
When WebP is the right choice
- When encoding time matters, such as user uploads processed on demand
- As the fallback layer, always
- Tooling that does not yet support AVIF in your pipeline
Sizing beats format, every time
Serving a 2000-pixel image to a 390-pixel phone wastes far more than any format choice recovers. Generate several widths, use srcset and sizes, and only then argue about codecs.
Where the encoding cost belongs
AVIF encoding is slow enough that it does not belong in a request path. Do it at build time and commit the output, or use an image CDN — otherwise you have moved cost from bandwidth to time to first byte.
The picture element that gives you both
A picture element with an AVIF source, a WebP source and a JPEG img fallback handles format negotiation automatically. Each source carries its own srcset, so format and size are both negotiated in one block and older browsers simply take the fallback.
The verdict
Use both. AVIF first, WebP second, original format last, inside a picture element — and spend the effort you were going to spend choosing on getting the responsive sizes right instead.
If you want the full treatment
Image SEO: findable images that do not wreck your page speed covers this in about 3 minutes — free, ungated, written from client work.
Who wrote this comparison
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. Where a comparison involves something I sell, the page says so — and every comparison here has to name at least two situations where each side wins, because a comparison one option always wins is an advert with a table in it.