WebP vs AVIF vs JPEG, compared

For website images in 2026, serve AVIF first, WebP as a fallback, and JPEG as the final fallback, using a picture element so each browser takes the best format it understands. At matching visual quality AVIF is roughly half the size of JPEG, and WebP roughly 25 to 35 percent smaller than JPEG. All three are supported by every current browser, so the question is not whether you can use the newer formats but how much complexity you want. If you only pick one, WebP is the pragmatic choice: nearly all of the size benefit, far broader support in non-browser software than AVIF.

The three formats, briefly

JPEG arrived in 1992 and is the baseline everything else is measured against. It is universally supported, limited to 8 bits per channel and standard dynamic range, and it cannot store transparency or animation. Its compression is dated but its ubiquity is unmatched.

WebP came from Google in 2010. It offers both lossy and lossless modes, supports transparency and animation, and produces files roughly 25 to 35 percent smaller than JPEG at equivalent quality. It spent years as a format you could not safely rely on; that period ended when Safari added support in version 14 in 2020.

AVIF arrived in 2019 from the Alliance for Open Media, wrapping still images in the AV1 video codec. It compresses substantially better than WebP, and supports high dynamic range, wide colour gamut, transparency and animation. Crucially it is royalty-free, which is why browsers adopted it quickly while refusing HEIC.

Compression, honestly

The commonly quoted figures — AVIF around 50 percent smaller than JPEG, WebP around 30 percent — are reasonable averages but genuinely vary with content. AVIF's advantage is largest on images with smooth gradients, flat colour areas and soft detail. It narrows considerably on dense, noisy photographic texture, and on small images the fixed overhead of the container can wipe out the gain entirely.

The only way to know for your images is to encode them and compare. Blanket percentages are a starting point, not a measurement.

Support is no longer the deciding factor

Every current browser handles all three formats. WebP has been safe since 2020, AVIF since Safari 16 in 2022. If your analytics show a meaningful share of browsers older than that, a fallback covers them, and the picture element makes fallbacks automatic.

The real support gap is outside browsers. Desktop editors, CMS plugins, feed readers, email clients, social media scrapers and print pipelines lag badly. WebP has had fifteen years to work its way into that ecosystem; AVIF has had six. That difference, not browser support, is the practical reason to keep WebP in the mix.

Two costs nobody mentions

AVIF is slower to decode than WebP or JPEG. On a fast phone this is irrelevant; on a cheap one, a page full of large AVIF images can visibly delay rendering even though fewer bytes arrived. It is possible to make a page feel slower while making it technically lighter.

AVIF is also much slower to encode, which matters if you are generating images on demand rather than ahead of time. And a browser-based tool cannot produce AVIF at all: browsers can decode it but the canvas API cannot write it, so AVIF output requires a server or a desktop encoder.

What to actually do

Use a picture element with an AVIF source, a WebP source, and a JPEG in the img tag as the fallback. Browsers evaluate sources in order and take the first they understand, so modern browsers get AVIF, slightly older ones get WebP, and anything else gets JPEG. No JavaScript, no user-agent sniffing.

If maintaining three versions of every image is more than you want, just do WebP with a JPEG fallback. That captures most of the benefit for a fraction of the effort, and it is a completely defensible place to stop.

Whatever you choose, keep your original JPEGs or PNGs as masters and generate the modern formats from them. Converting between lossy formats repeatedly compounds the quality loss.

What about JPEG XL?

JPEG XL is technically excellent and worth knowing about, but it is not a practical choice for the web yet. Chrome removed its experimental support in 2023, and while Safari added it in version 17, a format that does not work in Chrome cannot be your primary web format.

It may yet become important. It is not today.

Frequently asked questions

Is AVIF better than WebP?

It compresses better, typically producing files 20 to 50 percent smaller at matching quality, and it supports HDR and wide colour gamut. WebP is faster to decode and far better supported outside browsers, so it is often the more practical choice.

Should I still use JPEG?

As a fallback, yes. As your primary web format, no — you are shipping roughly twice the bytes for no benefit when every current browser understands something better.

How much smaller is WebP than JPEG?

Typically 25 to 35 percent at matching visual quality. The advantage is largest on smooth gradients and flat colour, smallest on dense photographic detail.

Do all browsers support AVIF?

Every current one does — Chrome since 2020, Firefox since 2021, Safari since version 16 in 2022. Older browsers need a fallback, which a picture element provides automatically.

Can I convert to AVIF in my browser?

No. Browsers can decode AVIF but cannot encode it through the canvas API, so any client-side tool is limited to JPG, PNG and WebP output. Producing AVIF needs a server or a desktop encoder.

Which format should I use for images with transparency?

WebP or AVIF — both support a full alpha channel and are far smaller than PNG. Keep PNG as the fallback, since JPEG cannot store transparency at all.