WebP vs AVIF: which should you use?

Both WebP and AVIF were designed to replace JPEG, and both do it well. The choice between them comes down to three things: how much smaller the file needs to be, how old the devices you have to support are, and how much time you are willing to spend encoding.

The short answer

• Use WebP if you want one format that just works. It is supported by every current browser, encodes quickly, handles transparency and animation, and typically cuts a JPEG down by roughly a quarter to a third at the same visual quality.
• Use AVIF if bytes are the priority and you can serve a fallback. It usually produces a smaller file than WebP for the same visible quality — often noticeably so on photos with fine texture — but encoding is slower and older devices may not decode it.
• Use JPEG when something outside a browser has to read the file. Email clients, print labs and plenty of desktop tools still expect it.

Browser support

WebP has been available in Chrome since 2010 and in Safari since version 14, so more than a decade of browsers can display it. AVIF arrived later: Chrome and Edge from version 85, Firefox from 93, and Safari from 16.4. That is a much shorter tail, which matters if a meaningful share of your audience is on older phones or an unpatched desktop.

The standard fix is the <picture> element: offer AVIF first, then WebP, then JPEG, and let the browser pick the first one it understands. Nobody gets a broken image; modern browsers get the smallest file.

File size, honestly

The "AVIF is 50% smaller" figure you see quoted is real but conditional. It comes from comparing both formats at the same measured quality on large photographs. On small thumbnails, on flat graphics, or on images that have already been resized aggressively, the gap narrows a lot and the extra encoding cost is harder to justify.

What matters more than the format is the pixel size. A 3000-pixel-wide AVIF is still a heavy file; a 1280-pixel-wide WebP is a light one. Format choice is the last 20% of the win, not the first.

Decoding cost and older hardware

Smaller files are not automatically faster pages. AVIF uses a more complex codec, so the browser works harder to decode each image. On a recent phone or laptop that is invisible. On an older low-end Android device it can be the difference between a smooth scroll and a stuttering one — which is exactly the audience a page speed score is supposed to protect.

Transparency, lossless and animation

• Transparency — both support it. WebP is the safer choice for logos and interface graphics because tooling support is universal.
• Lossless — WebP lossless is a well-tested replacement for PNG in most workflows. Lossless AVIF exists but is rarely used and unevenly supported by editors.
• Animation — animated WebP is widely supported; animated AVIF is not, so keep GIF-style animation in WebP or video.

What to do in practice

1. Resize the image to the largest size it will be displayed at.
2. Export a WebP for everything. This is your default and usually your only file.
3. If you are chasing the last few kilobytes on a content-heavy site, generate AVIF as well and add the <picture> fallback chain.
4. Keep the JPEG or PNG original archived somewhere. You will want it when a new format arrives.

This site's tools export WebP, JPG and PNG. Browsers can decode AVIF but cannot yet encode it through the canvas API, so AVIF generation still needs a dedicated encoder such as avifenc or a build plugin.

Frequently asked questions