AVIF Images: Smaller Files With a Sensible Fallback

AVIF can make image files considerably smaller without an obvious loss in quality. That matters because images often account for a large part of a page’s transferred data, but a new format is only useful if the browser can display it.

AV1 Image File Format, or AVIF, stores AV1 image data in a HEIF container. The Alliance for Open Media developed it as an open, royalty-free format. It competes with formats such as WebP and JPEG XL rather than being just another variation of JPEG.

What AVIF supports

AVIF is not limited to ordinary lossy photographs. The format also supports:

• lossless compression;
• animation and multiple images;
• alpha transparency;
• high dynamic range and wide colour gamuts;
• ICC profiles and other colour spaces;
• 4:2:0, 4:2:2, and 4:4:4 chroma subsampling;
• 8-bit, 10-bit, and 12-bit colour;
• film grain.

Compression results depend on the image and encoder settings. One comparison available when this post was written found median savings of roughly 50% for AVIF and 30% for WebP against the same JPEG set (AVIF and WebP comparison). I would treat that as a useful example, not a promise that every image will shrink by half.

Browser support was the catch

In 2021, AVIF support was available in Chrome, Firefox, and Opera, but not in every browser people used. That made a fallback essential.

The practical way to serve AVIF was—and still is—a <picture> element. Browsers work through the sources in order and use the first format they support:

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

Older browsers reach the JPEG while newer ones can choose AVIF or WebP. That graceful fallback is the part I would not skip. A smaller image is useful; an image that disappears entirely is rather less impressive.