WebP vs AVIF vs JPEG

Use WebP for almost everything on the web. It is meaningfully smaller than JPEG, universally supported, and fast to encode.

Use AVIF when file size genuinely matters more than anything else and you can test the result. It is smaller again, but slower on both ends.

Use JPEG for anything leaving your website — email, client deliverables, print, uploads to platforms you cannot verify.

If you stop reading here you will make the right call most of the time.

On a typical photograph at matched visual quality, expect roughly:

• JPEG — the baseline. Everything else is measured against it.
• WebP — 25–35% smaller.
• AVIF — 20% smaller again than WebP, so roughly half of JPEG.

These are averages and your images will vary. Flat graphics favour WebP more heavily; noisy, detailed photographs narrow the gap. The only number that matters is the one you get on your own images, which is why it is worth converting a handful and comparing before committing a whole library.

WebP is a solved problem. Chrome, Firefox, Edge, Safari and Opera all support it, desktop and mobile. Safari was the last significant gap and closed it in 2020. Unless you are supporting browsers older than that, you can serve WebP directly with no fallback.

AVIF is broadly supported but not universally. Support is good in current Chrome, Firefox and Safari, but the tail is longer, and some older devices and embedded browsers still miss it. If you use AVIF, use a <picture> element with a WebP or JPEG fallback rather than serving it bare.

AVIF's compression is genuinely better. The cost is time, at both ends.

Encoding is significantly slower than WebP — noticeable if you are processing a batch. More importantly, decoding is slower too, and that happens on your visitor's device. On a low-end phone, a large AVIF can take long enough to decode that you lose some of the benefit you gained on transfer.

This is why AVIF is not simply the correct answer. For a small image, the saving is small in absolute terms and the decode cost is real. For a large hero image on a fast device, AVIF wins clearly.

Default to WebP at quality 75. Convert your heaviest handful of images to AVIF as well and compare — if the saving on those specific files is large, serve them with a <picture> element. Keep JPEG originals for anything that leaves the site.

That gets you most of the available benefit without turning your asset pipeline into a research project.