AVIF: Browser Support, Features, Known Issues

What is AVIF?

AVIF stands for AV1 Image File Format. The Alliance for Open Media published version 1.0.0 in February 2019, and the format stores still images and short image sequences using the same AV1 compression that powers AV1 video. Files use the .avif extension and the image/avif MIME type. AVIF supports lossless and lossy modes, 8, 10, and 12-bit color depth, alpha transparency, HDR, BT.2020 wide color, and short animation sequences inside one file.

Which browsers does AVIF support?

AVIF works on every modern desktop browser and most mobile browsers. Chrome and Opera shipped AVIF in 2020, Firefox in 2021, Safari in 2022, and Microsoft Edge added default support in 2024.

What are the key features of AVIF?

AVIF combines the AV1 codec with the HEIF container, which gives it a small file size, modern color features, and animation in one open format. The features below decide whether AVIF fits a project.

• Small file size: AVIF stores images at about 50% smaller file size than JPEG and around 20% smaller than WebP at the same visual quality, based on tests by Netflix, Cloudinary, and the Chrome codecs team.
• HDR and wide color: AVIF supports 10-bit and 12-bit color depth, BT.2020 wide color, and HDR10 metadata, so it can hold the same high-dynamic-range data as AV1 video.
• Alpha transparency: AVIF supports a full 8-bit alpha channel, the same as PNG and WebP, which makes it a drop-in replacement for transparent PNG icons and overlays.
• Lossless and lossy modes: AVIF supports both lossless and lossy compression in the same format, so you can pick file size or pixel-perfect copies for the same source image.
• Animation sequences: AVIF stores short animation sequences inside one .avif file, an open alternative to animated GIF or WebP.
• Royalty-free license: The Alliance for Open Media releases AVIF and the AV1 codec under royalty-free terms, with no patent fees on encoding or distribution.
• HEIF container: AVIF reuses the HEIF (High Efficiency Image File) container that Apple uses for HEIC, with AV1 frames in place of HEVC frames.

What are the known issues with AVIF?

AVIF has the smallest file size of any common web image format, but a few real edge cases still break in production. The biggest hits are older Safari and iOS, the Edge 118 to 120 regression, slow encoding, and uneven CDN support.

• Older Safari and iOS lack support: Safari did not support AVIF on macOS until Safari 16.1 in October 2022, and on iPhone until iOS 16 in September 2022. Visitors on macOS Big Sur 11, iOS 14, or earlier still need a JPEG, PNG, or WebP fallback.
• Edge 118 to 120 regressed: Edge had AVIF behind a flag from Edge 114 through 117. The flag was removed in Edge 118 before default support shipped, so Edge 118 to 120 cannot show AVIF. Edge 121 fixed this in January 2024.
• Encoding is slow: AVIF encoding takes 5 to 10 times longer than JPEG or WebP at the same quality, because AV1 encoding is computationally heavy. Build pipelines and image CDNs need to budget extra CPU time.
• Limited tooling: Adobe Photoshop needs a plugin to read or write AVIF, and many CDNs treat AVIF as a transcoding target rather than a primary upload format.
• No progressive rendering: AVIF does not have a progressive decode mode, so a browser shows the image only after the full file downloads. Slow connections see a placeholder for longer than they would with a progressive JPEG.
• Software decoder on low-end Android: Some low-end Android phones use a software AV1 decoder, which makes AVIF slower to render than JPEG or WebP. Hardware AV1 support arrived on Snapdragon 8 Gen 1 and Tensor G2 chips and later.
• Animation support is uneven: AVIF supports animation, but Safari did not add animated AVIF until Safari 16.4 in March 2023, and several CDNs strip animation when they transcode to AVIF.
• Internet Explorer never supported it: IE never added AVIF support and reached end of life on June 15, 2022. Anyone on IE needs a JPEG, PNG, or WebP fallback in the picture element.

In my experience, the most surprising failure happens between Edge 118 and 120. The flag that controlled AVIF in Edge 117 was removed in Edge 118 before the format went live in Edge 121, so anyone still on a managed corporate Edge 118 to 120 build sees a broken image instead of a JPEG fallback. Always pair an AVIF source inside a <picture> element with a JPEG or WebP fallback to cover this gap.

You can confirm AVIF support inside any browser at runtime by loading a small one-pixel AVIF file and checking whether the Image onload event fires. Paste this snippet into the browser DevTools console:

// Run in the DevTools console of any browser to test AVIF support.
const img = new Image();
img.onload = () => console.log("AVIF supported:", img.width === 1 && img.height === 1);
img.onerror = () => console.log("AVIF supported: false");
img.src =
  "data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUI" +
  "AAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYA" +
  "AAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWlu" +
  "ZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAA" +
  "ABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQAMAAAAABNj" +
  "b2xybmNseAACAAIABoAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgi" +
  "bgIQGgMgMgkQAAAAB8dSLfI=";

If the result is false, the browser cannot show AVIF and your page should fall back to JPEG or WebP through the picture element.

Citations

All AVIF version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - Image file type and format guide: developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types
• Wikipedia - AVIF: en.wikipedia.org/wiki/AVIF
• Alliance for Open Media - AV1 Image File Format specification: aomediacodec.github.io/av1-avif
• WebKit - WebKit Features in Safari 16.0: webkit.org/blog/13152/webkit-features-in-safari-16-0
• WebKit - WebKit Features in Safari 16.4: webkit.org/blog/13966/webkit-features-in-safari-16-4
• Chrome for Developers - New in Chrome 85: developer.chrome.com/blog/new-in-chrome-85
• Mozilla - Firefox 93 release notes: mozilla.org/en-US/firefox/93.0/releasenotes
• Microsoft Learn - Microsoft Edge stable channel release notes: learn.microsoft.com/en-us/deployedge/microsoft-edge-relnote-stable-channel
• web.dev - Image formats: AVIF: web.dev/learn/images/avif
• Apple Developer - iOS and iPadOS 16 release notes: developer.apple.com/documentation/ios-ipados-release-notes/ios-ipados-16-release-notes
• Alliance for Open Media: aomedia.org