AVIF in 2026: when to use it with WebP fallback

AVIF has reached full browser maturity in 2026. Safari 18 shipped AVIF support in late 2025, closing the last gap. Chrome has supported it since version 85 (2020), Firefox since 93 (2021), and Edge since 121 (2024). The question is no longer whether to use AVIF, but when to ship it with a WebP fallback versus sticking with WebP alone. Here are the concrete numbers and decision rules.

File-size deltas: AVIF vs WebP in 2026

AVIF consistently beats WebP on file size, but the margin depends heavily on image type. For photographic content (people, landscapes, food), AVIF delivers 30-50% smaller files than WebP at the same perceptual quality. For example, a 1200px JPEG of a city skyline at 80% quality (WebP) weighs 340 KB; the same image encoded as AVIF at SSIM-matched quality lands at 195 KB – a 43% saving. For illustrations with flat colours and sharp edges, the gap narrows to 10-20%. A vector-style hero banner that WebP compresses to 45 KB might drop to 38 KB in AVIF, a 16% saving. The reason: AVIF's AV1 codec excels at texture and noise, but WebP's block-based approach is already efficient on simple gradients.

Encoder speed: still a trade-off

AVIF encoding is slower than WebP. On a modern server (AMD EPYC 9654), encoding a 2 MB photo to AVIF with the libaom-av1 encoder at speed 5 takes roughly 2.1 seconds. The same image to WebP at quality 80 takes 0.3 seconds. That is a 7x difference. However, the rav1e encoder (used by Cloudflare and others) cuts this to 0.9 seconds at similar quality – still 3x slower than WebP. For high-volume pipelines (e.g. user-uploaded images on social platforms), WebP remains faster and cheaper. For static assets in a build step (e.g. a Hugo or Next.js site), the extra encoding time is negligible. Use AVIF for pre-generated assets; use WebP for real-time transcoding.

Browser support: the last gap closed

As of March 2026, AVIF is supported in Chrome (85+), Firefox (93+), Edge (121+), Safari (18+), Opera (71+), and Samsung Internet (25+). Safari 18 shipped in September 2025, and adoption among active users passed 85% by February 2026. Global AVIF support now sits at 96.3% of all web traffic, up from 88% in 2024. The remaining 3.7% are largely older Android browsers (pre-2021) and some legacy iOS devices (iPhone 7 and earlier stuck on older iOS). For those, a WebP fallback is essential – WebP covers 98.1% of traffic. The overlap is nearly total.

When to ship AVIF with WebP fallback

Use AVIF with a WebP fallback in three scenarios:

• Photography-heavy sites (travel, real estate, e-commerce product shots). The 30-50% size reduction directly improves LCP and Core Web Vitals.
• Static build outputs where encoding time is not a bottleneck. For example, a Gatsby site with 200 images can run AVIF encoding once during deployment.
• High-resolution displays (2x and 3x assets). AVIF's better compression at high resolutions means a 2x hero image can be 40% smaller than WebP 2x.

Implementation is straightforward with the <picture> element:

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

This pattern ensures AVIF is served to 96.3% of users, WebP to the remaining 3.7% (plus any AVIF-capable browsers that lack WebP – a tiny edge case), and JPEG as a universal fallback.

When WebP alone is still safer

Stick with WebP-only in these situations:

• Illustrations, icons, and logos. The 10-20% gain from AVIF rarely justifies the extra build complexity and slower encoding. WebP already delivers excellent compression for flat art.
• Real-time image processing (e.g. CDN transforms, user-generated content resizing). WebP's 3-7x faster encoding keeps latency low.
• Email or third-party embeds. Many email clients (Outlook, Gmail in older modes) do not support AVIF. WebP has wider email support, though JPEG remains safest.
• Legacy-heavy audiences. If your analytics show more than 5% of traffic from iOS 15 or older Android, WebP alone avoids the fallback overhead.

A practical rule: if your images are mostly photographic and you control the build pipeline, use AVIF with WebP fallback. If your images are mostly UI elements or you serve them dynamically, use WebP alone. The file-size delta for photos is too large to ignore; for illustrations it is marginal.

Ready to test your own images? Try Smartees' free AVIF and WebP converter to compare file sizes and quality side by side. No sign-up required.