The measured comparison
Every figure here comes from converting the same source image with this site’s own converters, over a fixed corpus you can regenerate. No vendor claims.
| Format | Size | Against JPG |
|---|---|---|
| JPG | 375 KB | baseline |
| WebP | 247 KB | 34% smaller |
| AVIF | 109 KB | 71% smaller |
AVIF against WebP: 56% smaller.
That is a large gap, and it is the single strongest argument for AVIF. On an image-heavy page it compounds across every asset.
Where WebP wins
Encoding speed. This is not a marginal difference. On this site AVIF is by a clear margin the slowest operation — seconds where WebP takes milliseconds. Converting a handful of hero images, that is irrelevant. Converting four thousand product photographs, it is the whole project.
Support breadth. WebP reached every major browser in 2020; AVIF reached Safari in 2022. Both are safe in 2026, but WebP is more forgiving if your audience runs older devices, and it is accepted by rather more non-browser software.
Predictability. WebP has been in production use for longer, and its encoder behaviour is well understood across a wide range of content.
Where AVIF wins
Size, decisively, as above.
Colour and dynamic range. AVIF supports HDR and wide colour gamut properly. WebP does not.
Graceful degradation. AVIF holds up better at aggressive settings. Quality levels that would look obviously damaged in WebP often remain acceptable in AVIF, which is where the largest savings actually live.
The answer is usually both
Framing this as a choice is the mistake. The <picture> element exists precisely so you do not have to make one:
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="A description" width="1200" height="800" />
</picture>The browser takes the first format it understands. Current browsers get AVIF and the smallest file. Older ones get WebP. Anything else falls back to JPG. Nothing breaks anywhere.
The cost is storing three files per image, which is cheap, and a build step, which is a one-off.
If you must pick one
- A blog, a portfolio, a marketing site — AVIF. Few images, encoded once, served often. Take the 56%.
- A large catalogue, user uploads, anything encoding at scale — WebP. Encoding time becomes a real budget line, and WebP is still 34% below JPG.
- Images that will be downloaded by users — neither. Serve JPG, because you cannot predict what will open the file on their machine.
Converting
Into AVIF from JPG, PNG or WebP. Into WebP from JPG, PNG, HEIC or AVIF.
One rule regardless of direction: convert from the best source you have. Going from an existing lossy file to another lossy format discards detail twice and spends bits reproducing the first format’s artefacts.