AVIF vs WebP
Both store photographs, but they make different trade-offs. Here is where they actually differ, and how to pick.
Short answer
AVIF compresses better; WebP is supported in more places and encodes far faster. For a site serving both with a fallback, ship AVIF first and keep WebP as the second choice.
Why this comes up
This is the one comparison on this site where both formats are genuinely modern and the decision is close. Nobody is stuck here the way they are stuck with HEIC — you are choosing, usually for a website, usually because a performance audit told you to stop serving JPEG. The interesting part is that the answer is not simply "the newer one".
Side by side
| Property | AVIF | WebP |
|---|---|---|
| Compression | Lossy | Lossy |
| Transparency | Yes | Yes |
| Typical file size | 40-55% of an equivalent JPEG | 65-75% of an equivalent JPEG |
| Compatibility | All current browsers; some older desktop apps lag behind | Supported by all current browsers and most apps |
| Usually comes from | Websites optimising page weight | Websites optimising page weight |
What actually differs
AVIF is meaningfully smaller, but not on every image
AVIF typically lands 20–30% below WebP at matched visual quality, and the gap is widest on photographic content with smooth gradients — skies, skin, bokeh — where its transform handles large flat areas without banding. On small, sharp, flat-colour assets like icons and UI sprites the advantage narrows to almost nothing, and WebP sometimes wins outright.
Encoding cost differs by an order of magnitude
AVIF encoding is slow — often 10× or more the CPU time of WebP for the same image. In a browser-based tool you feel this directly as waiting. On a build pipeline processing thousands of assets it becomes a real cost line. WebP's encoder is mature and fast, which is a large part of why it is still everywhere.
The compatibility floor is Safari 15, not "old browsers"
WebP has been in every major browser since 2020. AVIF arrived later, and the practical floor is Safari — desktop Safari added it in 16, iOS in 16. If your analytics still show a meaningful slice of iOS 15, that is the group you would be serving a fallback to. For most audiences in 2026 that slice is small, but "small" is a number you should look up rather than assume.
Which to use
Use AVIF for
Photographic content where bytes matter most — hero images, galleries, anything large enough that a 25% saving is measured in hundreds of kilobytes.
Use WebP for
Broad-compatibility delivery, build pipelines where encode time is a budget, and small flat-colour UI assets where AVIF's advantage does not show up.
One thing that catches people out
Comparing file sizes at "the same quality number" is meaningless
Quality 80 in an AVIF encoder and quality 80 in a WebP encoder are unrelated scales. Benchmarks that set both to 80 and report file sizes are measuring encoder defaults, not compression efficiency. The only fair comparison is at matched visual quality, which takes either a perceptual metric or your own eyes on the actual image.