How to use it
- Drop in some WebP images, ideally a representative mix.
- Compare the percentage saving on each.
- Download the AVIF versions if the saving is worth it.
Is the switch worth it?
For photos, AVIF is often 20 percent or more smaller than WebP at the same visual quality. On a gallery or a shop with hundreds of product images, that adds up. For simple graphics, the difference can be small or even go the other way. The honest answer depends on your images, which is why each file here shows its before and after size.
Start from the best source you have
If your WebP files were made from original JPGs or camera files, convert from those originals instead: going WebP to AVIF stacks two rounds of lossy compression. This page is for when the WebP is all you have, which is common with images saved from a CMS or supplied by someone else.
Serving both
Most sites that adopt AVIF keep WebP as a fallback, using a <picture> element with the AVIF source listed first. Browsers pick the first format they support. Every current major browser now reads AVIF, so the fallback is mostly insurance.
WebP and AVIF compared
| WebP | AVIF | |
|---|---|---|
| First released | 2010 | 2019 |
| Compression | Lossy or lossless | Lossy (lossless possible) |
| Transparency | Yes | Yes |
| Animation or pages | Animation | Animation |
| Best for | Images on websites | The smallest images for websites |
| Support | All current browsers; some apps and forms still refuse it | Current browsers; patchy in desktop apps |
Questions people ask
How much smaller is AVIF than WebP?
Commonly around 20 percent for photos, less for flat graphics.
Why does conversion take a few seconds per image?
AVIF encoding is computationally heavy, and here it runs on your own device.
Does AVIF keep transparency?
Yes.