Web developer's guide to AVIF images

AVIF (AV1 Image File Format) is a royalty-free image format that usually performs better than other popular alternatives (JPEG, PNG, WebP). With Chrome 85+ and Firefox 93+, the browser support is getting better, so it's now worth including AVIF images on web pages.

Example image

In the following, I've encoded the same image using JPEG, WebP and AVIF (if you can't see all three images, your browser might not support a certain format):

Although the image quality is subjectively similar, the file size difference is clear:

A smaller file size means a faster loading time, which improves the overall user experience.

Encoding AVIF images

Let's go through some cross-platform tools for converting images into the AVIF format.

Squoosh

Google's Squoosh web app is a great playground and good enough for handling individual images. You can play around with compression settings and compare the output to other formats. The file-size limit is 4 MB.

ImageMagick

ImageMagick is my usual choice as an all-around image processing CLI tool. Since version 7.0.25, it supports AVIF compression natively:

magick -quality 75 cow.jpg cow.avif

The 0-100 -quality value is internally mapped to the AVIF 0–63 quality value. You can specify additional AVIF settings using the "-define" command-line option. For example, you can replace the generic quality parameter with a heic:speed option to get better results:

magick -define heic:speed=2 cow.jpg cow.avif

FFmpeg

FFmpeg is mainly a video/audio processing tool, but it can handle still images, too. AVIF is supported starting with version 5.1:

ffmpeg -i cow.jpg -c:v libaom-av1 -still-picture 1 cow.avif

FFmpeg can also generate animated AVIF files, which is a great alternative to GIFs:

ffmpeg -i video.mp4 animation.avif

Progressive enhancement

As of May 2024, the WebP global usage is ~97% and AVIF is ~93%. Let's look into backwards-compatible ways to provide a fallback for unsupported browsers.

HTML

In HTML, we can use the <picture> tag:

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

In this example, the browser will match the formats from top to bottom and use the first one that it supports. AVIF is listed as the first format, as it provides the best compression.

If the browser doesn't support <picture> at all (I'm looking at you, IE11), all the <source> entries will be ignored and the JPEG <img> picture will be used as fallback. This is a perfect example of progressive enhancement.

CSS

The image-set function provides a similar solution for CSS images:

.box {
  background-image: url("cow.jpg"); /* fallback */
  background-image: image-set(
    url("cow.avif") type("image/avif"),
    url("cow.jpg") type("image/jpeg")
  );
}

Most browsers support the type attribute. Unsupported browsers will ignore the second background-image definition and fall back to the JPEG image instead.

Debugging the picture element

In Chrome, you can simulate missing WebP and AVIF support:

But how can you tell, which of the referenced picture images your browser chose to display?

A browser-independent way is to select the img element in the DOM inspector and type the following into the console:

$0.currentSrc;

In Chrome DevTools, this information is also displayed when you hover the src or srcset value of your img element:

Firefox might provide something similar in the future.