Skip to content
All posts
ExplainerPublished on Updated on

What Is AVIF? The Next-Generation Image Format Explained

Learn what AVIF supports, how its compression varies and how to check compatibility before sharing or publishing.

AVIF is an image format based on AV1. If you have found .avif files on websites, the following explains their features and the checks to make before using them.

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.

The AOM specification describes the format; a format feature does not mean every encoder or viewer implements it.

How Does AVIF Compare to JPG and WebP?

AVIF can reduce file size, but savings depend on image content, encoder and settings. Compare downloaded files at the same dimensions and inspect detail; no fixed saving or invisible quality loss is guaranteed.

JPEGWebPAVIF
CompressionLossyLossy/LosslessLossy/Lossless
TransparencyNoYesYes
HDR supportNoNoYes
File sizeDepends on image and settingsDepends on image and settingsDepends on image and settings
Browser supportCheck target viewerCheck target viewerCheck target viewer

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

Browser Support

Check AVIF support in the actual browser, operating system and app you target. Still-image support does not imply every HDR or animated variant works. Test a representative file and provide a fallback for unsupported clients.

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 — create a lossy static AVIF; decoded pixels may change. Keep PNG when pixel accuracy matters.
  • AVIF to JPG — convert back for universal compatibility
  • AVIF to WebP — for sites not yet serving AVIF natively

Sources and maintenance

References checked on 2026-10-30. Format capabilities and app support are separate from this site’s output; check the tool’s current options and limitations.

All posts