AVIF Browser Support in 2026

Complete compatibility guide with fallback strategies for every browser

Current Browser Support

AVIF has achieved over 95% global browser support as of 2026. All major browsers now render AVIF images natively, making it a practical format for production web use.

Unsupported Browsers

The remaining ~5% of users on unsupported browsers are primarily on older iOS versions (pre-16.4), legacy Android WebView, and Internet Explorer. These users need a fallback format.

Fallback Strategy: The Picture Element

The recommended approach for serving AVIF with fallbacks uses the HTML <picture> element. The browser automatically selects the first supported format:

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

This gives AVIF to modern browsers (smallest files), WebP to slightly older browsers, and JPEG to everything else.

CSS Background Images

For CSS background images, use feature detection with the image-set() function or JavaScript-based detection:

.hero {
  /* Fallback */
  background-image: url("hero.jpg");
}

/* Modern browsers */
.hero {
  background-image: image-set(
    url("hero.avif") type("image/avif"),
    url("hero.webp") type("image/webp"),
    url("hero.jpg") type("image/jpeg")
  );
}

CDN-Based Delivery

Major CDNs can handle format negotiation automatically by reading the browser's Accept header. When a browser sends Accept: image/avif, the CDN serves the AVIF version without any HTML changes needed. Cloudflare, Fastly, AWS CloudFront, and Vercel all support this approach.

Testing AVIF Support

To check if your target audience supports AVIF, review your analytics for browser versions. You can also test programmatically in JavaScript:

async function supportsAvif() {
  const img = new Image();
  return new Promise((resolve) => {
    img.onload = () => resolve(img.width > 0);
    img.onerror = () => resolve(false);
    img.src = "data:image/avif;base64,AAAAIGZ0eXBh"
      + "dmlmAAAAAGF2aWZtaWYxbWlhZk1BMU...";
  });
}