AVIF delivers the best compression of any web image format available today. But compression alone does not matter if your users cannot see the images. Browser support has been the main barrier to AVIF adoption since its release, and the landscape has changed significantly over the past two years.
This guide provides the current state of AVIF support across all major browsers, practical fallback strategies, and a clear answer to whether you should use AVIF in production today.
Current AVIF Support by Browser
As of early 2026, AVIF is supported by approximately 93% of browsers globally.
| Browser | Version with AVIF support | Release date |
|---|---|---|
| Google Chrome | 85+ | August 2020 |
| Mozilla Firefox | 93+ | October 2021 |
| Apple Safari | 16.4+ | March 2023 |
| Microsoft Edge | 85+ | August 2020 |
| Opera | 71+ | August 2020 |
| Samsung Internet | 14+ | March 2021 |
| Brave | 1.12+ | August 2020 |
Chrome was the first major browser to ship AVIF support, followed closely by Edge and Opera (both Chromium-based). Firefox added support one year later. Safari was the last holdout, adding AVIF support in version 16.4 in March 2023.
The key milestone was Safari's adoption. Before that, AVIF was unusable without a fallback for any site with significant iOS or macOS traffic. Today, every major browser engine supports AVIF natively.
Mobile Browser Support
Mobile traffic accounts for over 60% of web visits globally. AVIF support on mobile is critical for any format adoption decision.
| Mobile browser | AVIF support | Notes |
|---|---|---|
| Chrome for Android | Yes (85+) | Dominant Android browser |
| Safari for iOS | Yes (16.4+) | All iOS browsers use WebKit |
| Samsung Internet | Yes (14+) | Second-largest Android browser |
| Firefox for Android | Yes (93+) | Small market share |
| Opera Mobile | Yes | Chromium-based |
| UC Browser | Partial | Older versions lack support |
| KaiOS Browser | No | Feature phone browser |
Since all iOS browsers are required to use the WebKit engine, Safari 16.4+ support means that every browser on iOS 16.4 and later supports AVIF, including Chrome for iOS, Firefox for iOS, and all in-app web views.
The only mobile gaps are very old Android devices running outdated Chrome versions, and feature phone browsers like KaiOS. For a typical website audience in 2026, mobile AVIF support is not a practical concern.
What Happens When a Browser Does Not Support AVIF?
If you serve an AVIF file directly in an <img> tag and the browser does not support it, the image simply fails to load. The user sees a broken image icon or an empty space. This is why you should never serve AVIF without a fallback.
The correct approach is the <picture> element, which lets the browser choose the first format it supports:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Product photo" width="800" height="600">
</picture>
How this works:
- The browser reads the
<source>elements from top to bottom. - If it supports AVIF, it downloads
photo.avifand ignores the rest. - If it does not support AVIF but supports WebP, it downloads
photo.webp. - If it supports neither, it falls back to the
<img>tag and downloadsphoto.jpg.
Only one image is downloaded. There is no bandwidth penalty for listing multiple sources.
How to Implement AVIF with Fallbacks
Beyond the basic <picture> element, here are the key implementation patterns:
Responsive AVIF with srcset:
<picture>
<source
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
sizes="(max-width: 600px) 100vw, 800px"
type="image/avif">
<source
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px"
type="image/webp">
<img src="hero-800.jpg" alt="Hero image" width="1200" height="600" fetchpriority="high">
</picture>
Server-side content negotiation:
Instead of using <picture>, you can detect AVIF support via the Accept header. Modern browsers that support AVIF send Accept: image/avif, image/webp, */*. Your server or CDN can read this header and serve the appropriate format from the same URL.
This approach is cleaner in the HTML (just a single <img> tag) but requires server or CDN configuration. Most modern CDNs (Cloudflare, Fastly, AWS CloudFront) support automatic format negotiation.
CSS background images:
For AVIF in CSS backgrounds, there is no <picture> equivalent. Use @supports:
.hero {
background-image: url('hero.jpg');
}
@supports (background-image: url('hero.avif')) {
.hero {
background-image: url('hero.avif');
}
}
Note that @supports for image format detection is not perfectly reliable across all browsers. Server-side content negotiation is a more robust solution for CSS backgrounds.
AVIF Adoption Statistics
AVIF adoption has accelerated since Safari added support in 2023:
| Year | Sites using AVIF (HTTP Archive) | Browser support |
|---|---|---|
| 2021 | Less than 0.1% | ~70% |
| 2022 | ~0.5% | ~75% |
| 2023 | ~2% | ~88% |
| 2024 | ~5% | ~91% |
| 2025 | ~9% | ~93% |
| 2026 | ~14% (estimated) | ~93% |
Adoption is growing steadily but remains far behind WebP, which is used by over 50% of top sites. The gap is partly due to AVIF's slower encoding speed, which makes it harder to integrate into dynamic image pipelines, and partly due to inertia from sites that already migrated to WebP and see diminishing returns from a second migration.
Should You Use AVIF in Production Today?
Yes. AVIF is production-ready in 2026. Here is a decision framework:
| Scenario | Recommendation |
|---|---|
| New website or redesign | Use AVIF with WebP fallback from day one |
| Existing site on JPG | Migrate to AVIF + WebP fallback for high-impact images |
| Existing site already on WebP | Add AVIF as a progressive enhancement via <picture> |
| Dynamic image pipeline (CMS) | Use WebP as the primary format, add AVIF for pre-generated assets |
| Static site with pre-built assets | Use AVIF, encoding time is not a constraint |
The combination of AVIF as the primary format and WebP as the fallback gives you the best compression for 93% of your audience and excellent compression for the remaining 7%. Adding the JPG fallback as a third layer covers the last fraction of legacy browsers.
The only reason to delay AVIF adoption is if your image pipeline cannot handle the slower encoding speed. For everything else, AVIF is the best format available.
Convert Your Images to AVIF
Morphix converts JPG and PNG images to AVIF directly in your browser. No registration required for the free plan.
Convert JPG to AVIF | Convert PNG to AVIF | Convert AVIF to JPG