All posts
Explainer2026/04/24

What Is AVIF? The Next-Generation Image Format Explained

AVIF is the newest image format to gain wide browser support — smaller than WebP and JPEG, with excellent quality. Here's what it is and when to use it.

AVIF is the newest image format to gain wide browser support, and it delivers genuinely impressive compression gains over older formats. If you've noticed .avif files appearing on websites and wondered what they are, here's everything you need to know.

What Is AVIF?

AVIF stands for AV1 Image File Format. It's based on the AV1 video codec developed by the Alliance for Open Media — a coalition that includes Google, Apple, Mozilla, Netflix, and Amazon.

AVIF became a formal standard in 2019 and reached broad browser support by 2022–2023.

How Does AVIF Compare to JPG and WebP?

The main advantage of AVIF is compression efficiency. At the same visual quality, AVIF files are typically:

  • ~50% smaller than JPEG
  • ~20% smaller than WebP

That means faster page loads and lower bandwidth costs without any visible drop in quality.

JPEGWebPAVIF
CompressionLossyLossy/LosslessLossy/Lossless
TransparencyNoYesYes
HDR supportNoNoYes
File size (same quality)LargestMediumSmallest
Browser supportUniversal~97%~95%

AVIF also supports full alpha transparency (like PNG and WebP) and HDR wide-color images — neither of which JPEG handles.

Browser Support

As of 2024, AVIF is supported in:

  • Chrome 85+
  • Firefox 93+
  • Safari 16+
  • Edge 121+

For older browsers, the common pattern is to serve AVIF with a JPEG or WebP fallback using the HTML <picture> element:

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

When Should You Use AVIF?

Use AVIF when:

  • You're building or optimizing a website and want the smallest possible image files
  • Your build pipeline can generate AVIF automatically (Next.js, Astro, Cloudflare Images, and most CDNs support this)
  • You're serving product photos, hero images, or any images that noticeably affect page load time

Stick with JPG or WebP when:

  • You need broad compatibility without writing fallback code
  • You're sharing images via email, messaging apps, or software that may not support AVIF
  • Encoding speed matters — AVIF encoding is significantly slower than JPEG

Converting To and From AVIF

All conversions run in your browser — no file upload needed:

  • JPG to AVIF — convert existing photos to the modern format
  • PNG to AVIF — convert graphics with lossless AVIF compression
  • AVIF to JPG — convert back for universal compatibility
  • AVIF to WebP — for sites not yet serving AVIF natively
All posts