By Dik Raci · Creator of online tools · About the author

WebP vs AVIF in 2026: Which Format Should You Use?

Four years ago this debate was easy to settle: WebP was the only modern format you could ship without a fallback plan, so WebP it was. In 2026 the situation has flipped into something more interesting - AVIF is supported by every evergreen browser, it compresses better, and the only real question left is whether its costs (encoding time and a long tail of old Safari) matter for your site. This guide walks through the decision the way we actually make it: support, quality per kilobyte, features, encoding speed, and the fallback setup that makes the whole argument mostly academic.

Browser support: the argument evaporated

WebP has been effectively universal since 2020, when Safari 14 finally shipped it - every browser in active use decodes WebP today. AVIF arrived later: Chrome and Edge from version 85, Firefox from 93, and Safari from 16.4 in 2023. That last number is the reason some guides still call AVIF "risky," but the arithmetic has changed. Safari 16.4 shipped in March 2023; devices stuck before that version are a small and shrinking slice of traffic, and they are exactly the devices the fallback covers. In practical terms: no user of a current browser fails to get AVIF, and users of ancient browsers get WebP or JPEG instead. Nobody gets a broken image.

The residual gap worth knowing about: some older in-app webviews and enterprise-managed browser pools still predate AVIF support. If your analytics show a meaningful population on Safari 15 or older, the fallback setup below is not optional for you - it is the whole strategy.

Quality per kilobyte: AVIF wins, especially at low bitrates

Published benchmarks generally land in the same neighborhood: WebP lossy runs roughly 25-35% smaller than JPEG at comparable visual quality, and AVIF typically takes another 20% off WebP - which compounds to roughly half the weight of JPEG for photographic content. AVIF's advantage is largest exactly where websites care most: low-to-medium bitrates, where its modern AV1 encoder spends bits on edges and textures far more intelligently than JPEG's thirty-year-old quantization tables. At very high quality levels the formats converge, and at lossless there is no contest at all - use WebP lossless or keep PNG.

Rules of thumb are fine, but measurements are better. We ran our own comparison - 27 photographs encoded as JPEG, WebP and AVIF with every file size published - and the pattern matched the literature: AVIF was consistently the smallest perceptual-quality-per-byte winner, WebP was never far behind, and JPEG was never close. Our WebP format guide covers the same ground for the single-format case.

Encoding time: AVIF's real cost

The honest downside of AVIF is not quality and not support - it is CPU time. AV1 encoding is dramatically slower than WebP's, commonly five to twenty times slower depending on the effort setting, because it explores far more compression candidates before committing. For a static site that pre-encodes images at build time, this is a non-issue: the cost lands once, in your build pipeline. For a platform generating images on the fly at CDN edge, it means more compute or coarser caching. Our advice: use a moderate AVIF effort level for anything above thumbnail size. The file-size difference between moderate and maximum effort is usually a percent or two; the time difference is enormous.

Ship both today: the picture element

The setup below is the whole trick. Browsers pick the first format they support, so modern browsers get AVIF, older ones get WebP, and anything left over gets JPEG. Copy it, swap the sources, done:

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="Product photo"
       width="1200" height="800"
       loading="lazy" decoding="async" />
</picture>

Two details matter. First, the type attribute is what lets the browser skip a source it cannot decode - without it, the fallback logic breaks. Second, keep width and height on the img itself, not just the sources, so the browser reserves the correct space before any format finishes loading.

The 2026 decision, in five lines

• •Photos on a normal website: AVIF source, WebP fallback, JPEG last resort. Best quality per byte, no maintenance burden.
• •One format only, forever: WebP. Universal support, lossless and alpha included, fast to encode.
• •Screenshots, logos, transparency: WebP lossless (or keep PNG). AVIF lossless exists but gains less here.
• •Animation: animated WebP or AVIF both beat GIF by enormous margins; check your tooling support first.
• •Massive catalogs encoded on the fly: WebP at the edge for speed, AVIF pre-generated for your top pages.

Whichever way you lean, the first step is the same: get the files converted and look at the result. Our AVIF converter and WebP converter both run entirely in your browser - nothing is uploaded anywhere - so you can test a real product image in both formats in the next two minutes and see the difference on your own file rather than in anyone's benchmark table. And if a conversion produces something unexpected, the format guide's checking-the-output section explains what to look for.