AVIF: The Next-Generation Image Format

AVIF (AV1 Image File Format) is the most advanced image format available in 2026. Derived from the AV1 video codec developed by the Alliance for Open Media, it achieves compression ratios that were unthinkable a few years ago: up to 50% smaller than JPEG for equivalent visual quality, and even better than WebP.

What is AVIF?

AVIF is a still image format based on AV1 video compression. It was designed to replace JPEG and WebP for photographic content on the web. Key properties include:

• Lossy and lossless compression: like WebP, AVIF supports both modes
• HDR and wide colour gamut: supports 10-bit and 12-bit colour depth vs JPEG's 8-bit
• Transparency: full alpha channel support
• No patent royalties: open, royalty-free standard
• Animated AVIF: can replace GIF and WebP animations

AVIF vs WebP vs JPEG: file size comparison

Browser support in 2026

AVIF support has matured considerably. As of early 2026, AVIF is supported by:

• Chrome 85+ (since August 2020)
• Firefox 93+ (since October 2021)
• Safari 16.1+ (since October 2022)
• Edge 121+
• Samsung Internet 14+

The main gap is older iOS Safari versions. For maximum compatibility, use AVIF with a JPEG or WebP fallback via the HTML <picture> element.

Using AVIF with the <picture> element

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

Browsers read the <source> elements in order and use the first format they support. Browsers without AVIF or WebP support fall back to JPEG seamlessly.

When to use AVIF

AVIF is the best choice when:

• You want the smallest possible file sizes for photographs
• You display HDR imagery or wide-gamut photography
• Your target audience uses modern browsers (2022+)
• You have a CDN or image pipeline that can automate conversion

When AVIF may not be ideal

• Encoding is slow: AVIF encoding is significantly slower than JPEG/WebP. Always pre-encode images, real-time on-the-fly generation is impractical without hardware acceleration
• Very small images: for tiny thumbnails or simple icons, the file size advantage shrinks and SVG or PNG may be more appropriate
• Legacy audience: if your analytics show significant Safari 15 or older browser traffic, always provide a fallback