Should you switch to WebP or AVIF yet?

The advice to "just use WebP" has been circulating for a decade, which is long enough that it is now often given without checking whether the constraints that made it debatable still apply. They mostly do not, for WebP. For AVIF, they partly do. The distinction is worth understanding before you convert an archive.

Support is not one number

Every discussion of format adoption collapses two different questions into one. Can a browser display the format? Can a tool produce it? These have different answers and different timelines.

Decoding support arrives first because it is the thing users need. Encoding support in libraries, design tools, CMSs and browser canvases lags behind, sometimes by years.

Format	Browser decoding	Canvas encoding	Design tool export
JPEG	Universal	Universal	Universal
PNG	Universal	Universal	Universal
WebP	All current browsers	All current browsers	Widespread
AVIF	All current browsers	Partial	Growing

For a website, decoding is what matters, and both formats clear that bar today. For a tool that generates images in the browser — including this one — encoding is the binding constraint, which is why AVIF output is probed at load and disabled where it is unavailable rather than failing halfway through a batch.

What you actually save

Published comparisons vary wildly because they test different images. The ranges below reflect what you can expect across a mixed set of photographs at visually comparable quality, not a single flattering example.

• WebP versus JPEG: typically 25–35% smaller. Occasionally less on very noisy images, occasionally much more on images with large flat regions.
• AVIF versus WebP: typically another 15–25% smaller, with the largest gains on smooth gradients where JPEG and WebP both band visibly.
• Lossless WebP versus PNG: usually 20–30% smaller, sometimes dramatically more on screenshots.

Those percentages apply per image. Across a product catalogue of two thousand photographs, a 30% reduction is the difference between a site that feels quick on a hotel wifi connection and one that does not.

Where AVIF earns its complexity

AVIF's advantage is concentrated in specific content. Smooth gradients — skies, studio backdrops, out-of-focus backgrounds — are where JPEG shows banding and blocking first, and where AVIF's superior entropy coding shows most clearly. Images with fine repeated texture benefit least.

Its cost is encoding time. AVIF encoding is substantially slower than WebP, by a factor that ranges from noticeable to painful depending on the encoder and effort setting. For one hero image this is irrelevant. For a batch of five hundred, it is the difference between a coffee break and an afternoon.

Fallbacks, if you need them

If your audience includes browsers you cannot verify — an enterprise fleet on a frozen version, an embedded webview in an old app — the <picture> element handles it without JavaScript:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description of the photo">
</picture>

Browsers take the first source they understand and ignore the rest. The <img> is both the fallback and the element that carries your alt text, dimensions and loading attributes.

The cost of this pattern is that you now maintain three files per image, which is fine when your build pipeline generates them and miserable when a human does. If you are hand-managing images, one modern format plus one universal fallback is a more sustainable choice than three.

When to stay on JPEG

There are legitimate reasons not to convert.

Marketplace and platform uploads. Amazon, Etsy and most print labs specify JPEG. They re-encode everything anyway, so uploading WebP buys you a slightly faster upload and a compatibility risk. Not a trade worth making.

Client deliverables. If a client is opening files in software you cannot predict, JPEG is the format nobody has to think about. Handing a photographer's client a folder of AVIF files is a support ticket waiting to happen.

Print workflows. Print software support for the newer formats is inconsistent, and printing is the one context where file size is nearly irrelevant. Export high-quality JPEG or TIFF.

Archives. Your masters should be in whatever format preserves the most information and will still open in twenty years. That argues for a widely-implemented, well-documented format, not the newest one.

A practical position

For images you publish on your own website: WebP as the default, at quality 80–85. Add AVIF for hero images and anything gradient-heavy if your pipeline can generate it without slowing your build to a crawl.

For everything you hand to someone else: JPEG, unless they have told you otherwise.

For anything with transparency: WebP or PNG, never JPEG, regardless of how the rest of the site is served.

And before any of this, check your dimensions. A 4000-pixel image converted to AVIF is still an enormous file that nobody needed. Format choice is a 30% optimisation applied on top of a resizing decision that is often worth 90%.