What are AVIF Images?

You won’t come across AVIF images all that often. At least, not yet. It’s not a typical image format used in photography in our day-to-day workflow, but there’s a very good chance that more and more of the photos you see on the web are actually being displayed as AVIF versions. And, ideally, the only thing you’ll notice is how quickly they’re loading.

AVIF is a relatively new image format, but it has ambitions to take over the web.¹

And that’s the main reason it exists: as a newer, better image file format for the web.² The key feature is that it uses a highly efficient compression algorithm that results in smaller filesizes while retaining equivalent image quality.³

And we’re not talking here better than JPG, although it is that. But even JPGs are old hat on the web now. For a few years, Google has been pushing a newer, better format for web pages known as WebP. I have more information on WebP images separately, but the main key takeaway is that WebP images are much smaller than JPGs for equivalent image quality, and they can be used in place of both JPG and PNG images.⁴ And a faster web benefits users and, of course, Google. WebP is a long way from universal, but it has the best traction so far of any of these next-generation web-oriented image formats.

AVIF is one of a few different formats that are angling to displace WebP. It’s based on an encoding algorithm known as AV1, which is impressively more efficient than even WebP. It’s also an open format, and it’s being backed by major players on the web such as Netflix, Facebook, Google, Amazon, Apple, and Microsoft.⁵ So not only is its technical performance leading the pack, it’s not encumbered by potentially complicated and expensive licensing restrictions, and it already has the backing of many of the web’s biggest players.

Just how much smaller AVIF files are than their JPG or WebP counterparts is hard to pin down. You’ll often see numbers like AVIF files are 50% smaller than JPGs or 20-40% smaller than WebP. And that can certainly be true. But if you compare them with carefully optimized JPGs, the difference can be far less dramatic. It also depends on the settings you use–it’s entirely possible to end up with AVIF files that are larger than the JPGs. In my own testing on this site, I have found them, on average, to offer worthwhile savings over heavily optimized JPG versions. But the value varies significantly from file to file–some might be only 2-3%, while others might be 60% or more. But the overall effect is that AVIF does offer smaller, faster files.

All of this means that AVIF has the potential to be the next big thing in sharing images on the web. But there’s still a sizeable gap to bridge between reality and potential.

Compatibility of AVIF Images

The biggest practical problems right now, at least from a user perspective, are compatibility and adoption.

Judged in terms of adoption and compatibility, AVIF is the leading challenger to WebP. There are still holes in WebP compatibility with web browsers, but it’s still significantly better than support for AVIF (around 95% percent vs around 70%).

For now, the compatibility of AVIF images isn’t great. It’s mainly limited to newer versions of Chrome, Firefox, and Opera browsers. That said, it’s improving rapidly, and, as new as it is, AVIF is already much more widely compatible than the other main web-format wannabes (JPEG 2000, JPEG XL, and JPEG XR).

Examples

This image is an AVIF file. If you can’t see an image here, it means that your browser isn’t compatible with AVIF. Currently, Chrome, Firefox, and Opera are the main web browsers with AVIF compatibility.

And if you’d like to download an AVIF file, here are some download links (right-click and download). I’ve included some competing formats also generated directly from the same original JPG (using Squoosh at default settings).

• Original JPG
• AVIF
• WebP
• Browser JPEG
• JPEG XL

How to Create & Implement AVIF Image Files

Although AVIF’s compatibility still hasn’t caught up to WebP (around 70% compatibility in web browsers, compared with around 95% for WebP), it has a lot going for it to help it gain in popularity and use.

If you want to be ahead of the curve and experiment with it or even implement it on your website now, there are some options.

At the time of writing, many of the usual batch image conversion options don’t yet support AVIF. One app that I’ve come across that can do it is BatchPhoto, and I’ve posted a guide on using BatchPhoto for bulk JPG to AVIF conversion here. There are also some command-line and shell scripts that you can use (more on that below).

For single-image experiments, I’m a big fan of Squoosh. I’ve put together a guide to using it to convert JPG to AVIF here. Another option is avif.io, which has the virtue of working with multiple images and is also free.

There are some options for implementing on your website. There are two essential steps involved: creating the AVIF versions and then serving them only to visitors whose browsers support AVIF.

If you’re using WordPress, the simplest overall option is probably to use ShortPixel Image Optimizer. Among ShortPixel’s features is generating WebP and/or AVIF versions of your files and then serving them. But that simplicity does come at a cost–literally, in that ShortPixel charges for the conversion service. And there are some limitations on how ShortPixel can currently create the AVIF versions; it has to be done at the time of optimization and can’t be done retroactively (at least, not easily, and not without some prerequisite conditions). So “simplest” is relative–for some setups, it can be as easy as a checkbox; on others, especially sites on NGINX servers, it can be more complicated.

If you’re using Cloudflare, another option that is platform-agnostic is to use Cloudflare Workers through the Cloudflare Images feature. You can find more information about that here. (Or if you happen to have a Cloudflare Business account, AVIF support is built-in.)

And if you’re the type who likes to get your hands dirty with terminal windows, you can find the encoding/decoding command-line script here or an alternative here. With those, along with the right skills, you can batch convert images or even set up server-side conversion. You can find more information about compiling and running those scripts here.

You can also use the venerable ImageMagick. Again, it’s a command-line tool, but here’s a useful guide.

And some more good ideas here.

Things Worth Knowing About AVIF

Here are some things worth knowing about AVIF images.

AVIF Features

AVIF supports:

• alpha transparency
• HDR (high dynamic range)
• WCG (wide color gamut)
• monochrome
• animated image sequences
• multi-layer images

It’s a royalty-free format, so it’s not constrained by licensing issues.

Its compression is significantly better than WebP and much better than JPEG. The precise gains will vary based on the settings used, but in all my experiments, AVIF files have been consistently and substantially smaller than WebP images for equivalent visual image quality.

AVIF stands for AV1 Image File Format. The AV1 part refers to the encoder, which was originally developed for video.

AVIF can replace JPG, PNG, GIF, and WebP.⁶

Compatibility

Usage and compatibility of AVIF is a rapidly moving target. It’s a very new format, but it’s catching on quickly.

Browsers. You can find the current browser support for AVIF here. Microsoft and Safari are currently notable holdouts, but the latest versions of Chrome, Firefox, and Opera support AVIF (that includes related browsers like Brave).

Image Editors. Most image editors don’t yet support saving AVIF files, but a notable exception is the free cross-platform GIMP, where you can add an AVIF plugin.

AVIF vs WebP

AVIF and WebP are both image formats designed for the web. Both are considered “next-generation” image formats.

Both are designed to be used in place of JPGs and PNGs (i.e., they’re suitable for photos and graphics).

The compression used by AVIF (AV1) is more efficient than that used by WebP. AVIF files are usually significantly smaller in filesize than WebP versions at equivalent image quality.

Both AVIF and WebP offer a lossless setting, although the practical use for it is limited given that the reason these formats exist is to create tiny files for a quicker web.

Both AVIF and WebP support transparency, which makes them suitable for graphics and logos.

WebP supports 8-bit images. AVIF supports 10-bit and 12-bit images.

You can download AVIF and WebP versions derived directly from the same master JPG here. Both formats allow for different quality-level settings. These particular images were created with the default compression settings in Squoosh.

• AVIF
• WebP
  

AVIF vs HEIF

Both AVIF and HEIF often come up in the same sentence. HEIF is currently best known in relation to the photo format used by default in recent iPhones (they save the files with a HEIC file extension).

In reality, AVIF and HEIF aren’t really competitors. In fact, they’re related. HEIF is an image file container that can actually be used with contents encoded with different codecs. So a HEIF can (and is) used for image files encoded with the AV1 (AVIF) encoder. That synchronicity means that AVIF images support features like animated image sequences, which is one of the star features of HEIF.

But, confusingly, AVIF and HEIC can be considered competing formats. HEIC files are saved in the HEIF format container, but they use a different encoder (HEVC rather than AV1).

AVIF Specification

You can find the official AVIF specification here.

AVIF Image Format FAQs

1. Early drafts of AVIF began appearing around 2018 or so, but the format was only standardized on June 8, 2021. [↩]
2. As a technical matter, AVIF is a specification for compressing still images and animated image sequences with the AV1 codec and storing in them in the HEIF file format. [↩]
3. In most usage, AVIF uses lossy compression. It does support lossless compression, but the practical utility of that feature is limited given the types of uses that AVIF is designed for. [↩]
4. JPGs are traditionally best for photos. PNGs are often better for graphics, illustrations, and logos. In both cases, there are newer, better options, but WebP attempts to replace both of them. [↩]
5. AVIF is one of the projects created by the Alliance for Open Media. Governing members of the Alliance are: Netflix, Google, Amazon, Apple, ARM, Cisco, Facebook, Huawei, IBM, Intel, Microsoft, Mozilla, Nvidia, Samsung Electronics and Tencent. [↩]
6. If implementing AVIF on your website, the more practical approach is to have both AVIF and JPG, so that AVIF is served to visitors whose browsers support it, while fallback JPGs are served to those that don’t. [↩]