AVIF Browser Support: Complete Compatibility Guide for 2024

AVIF now has full support in every major browser. Chrome, Firefox, Safari, and Edge all render AVIF images natively. Global browser coverage exceeds 95%. This guide details every browser's support status and shows how to deliver AVIF with a safe fallback for the remaining users.

AVIF is production-ready for all modern websites.

Use the HTML <picture> element to serve AVIF with a JPEG or WebP fallback for full compatibility.

Desktop Browser Support

Browser	First Support	Version	Status
Google Chrome	August 2020	85+	Full Support
Microsoft Edge	April 2021	90+	Full Support
Mozilla Firefox	October 2021	93+	Full Support
Apple Safari	September 2022	16+	Full Support
Opera	2020	71+	Full Support
Safari 15 and earlier	No support	15 and below	No Support
Internet Explorer	No support	All versions	No Support

Mobile Browser Support

Browser	Platform	Status
Chrome for Android	Android	Full Support
Safari on iOS 16+	iPhone / iPad	Full Support
Firefox for Android	Android	Full Support
Samsung Internet	Android	Full Support (v14+)
Safari on iOS 15 and earlier	iPhone / iPad	No Support
UC Browser	Android	Partial

What Percentage of Users Support AVIF?

As of late 2024, global AVIF support sits above 95% of all browser usage according to caniuse.com data. The remaining users are primarily on:

-iOS devices that have not updated past iOS 15 (a shrinking population as Apple pushes updates)
-Older Android devices on Samsung Internet 13 or below
-Internet Explorer users (less than 0.5% of traffic on most modern sites)

Serving AVIF to the 95%+ who support it with a JPEG fallback for the rest captures the performance benefits without breaking anything for anyone.

How to Implement AVIF with Fallback Support

HTML: The picture element

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

CSS: Background images with feature detection

/* Default (JPEG) */
.hero {
  background-image: url('hero.jpg');
}

/* AVIF for supporting browsers */
@supports (background-image: url('test.avif')) {
  .hero {
    background-image: url('hero.avif');
  }
}

JavaScript: Feature detection

function checkAvifSupport(callback) {
  const img = new Image();
  img.onload = () => callback(img.width === 1);
  img.onerror = () => callback(false);
  img.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZkFBQUFBbWlhZgAAAOptZXRhAAAAAAAAACFoZGxyAAAAAAAAAAAAdmlkZQAAAABudW1zAAAAAAAAAAAAAAAAbWVhbgAAAAAAAAAAAAAAAAAAABBwaXR4AAAAAAAAAAAAAAAAAB9pbG9jAAAAAEQAAAEAAQAAAAEAAAAaAAAAGwAAAAhpaW5mAAAAAAABAAAAGmluZmUCAAAAAAEAAGF2MDFDb2xvcgAAAABoaXBycAAAAElpcGNvAAAAFGlzcGUAAAAAAAAAAQAAAAEAAAAQcGl4aQAAAAADCAgIAAAADmF2MUOBAAAAAAAAFmlwbWEAAAAAAAAAAQABAgECggAAAA9tZGF0EgAKCBgABogQEA==';
}

checkAvifSupport((supported) => {
  if (supported) {
    document.documentElement.classList.add('avif');
  }
});

AVIF Support in Content Management Systems

WordPress

WordPress 6.5 and above supports AVIF uploads natively in the media library. Earlier versions need the EWWW Image Optimizer or ShortPixel plugin.

Shopify

Shopify's CDN automatically serves AVIF to supported browsers when you upload images. No configuration needed.

Cloudinary

Pass f_auto in the URL to serve AVIF automatically to browsers that support it.

Next.js

The Next.js Image component serves AVIF by default. Set formats: ['image/avif', 'image/webp'] in your next.config.js.

Start Serving AVIF Images Today

Convert your images to AVIF for free. Over 95% of your visitors already have full support.

Convert Images to AVIF