AVIF: The (best) Image Format for any website

The next step in image optimization is finally here. While it may not be ready to replace legacy formats, it certainly holds promise for the future of high-quality content delivery.

It is more challenging than ever to deliver content that catches and maintains the attention of a web audience - I recommend to read this blog post as well. Screens are getting smaller and larger at the same time with highly-detailed small smartphone screens and giant high-resolution computer monitors.

Consumers expect beautiful imagery that loads instantly. They aren't especially interested in the technology that makes it work. That leaves web developers and designers scrambling to find the right balance of file size and quality. For that, they look to image compression. Image compression has come a long way in a few years, but with the introduction of AVIF, it is about to take a big step forward.

What is AVIF?

AVIF stands for AV1 Image File Format and is the image format of the open-source AV1 video file format. AVIF takes a big step in quality and size, offering files that are up to 10 times smaller than JPEGs. It supports up to 10 bits of color depth and HDR compatibility.

Read about WebP, another recommended image format created by Google.

Where Did it Come From?

AVIF was developed by the Alliance for Open Media. AOMedia works to create open-source, royalty-free formats to ensure interoperability in the digital future. They collaborated with Google, Cisco, and Xiph.org to create this new image format. Because AOMedia led the way, the format is free for everyone to use.

How Does AVIF Compare?

The main competitors for AVIF are JPEG and WebP. We can look at those to compare file size and quality. However, it is also helpful to point out some unique features of AVIF. First of all, images compressed with AVIF can be rendered as lossy or lossless, depending on the image and the context. Second, AVIF offers the ability to use an alpha channel, allowing for the creation of transparent images. Finally, AVIF can store a series of animated frames, giving the option of creating something similar to a high quality animated GIF.

What About Size?

Image size is where AVIF really shines. In an extremely basic comparison, at the same quality level, WebP files are about half the size of JPEG files, and AVIFs are about half the size of WebP files. For instance, using some very round numbers, a file compressed with JPEG to a specific quality level might be 100 kB, with the WebP at the same quality level coming in at 50 kB, and the AVIF looking about the same at 25 kB. Now those are round numbers, and the idea of "the same quality" is somewhat arbitrary. While there are some algorithms with which to compare image quality, for content creation, it becomes a truly subjective evaluation.

JPEG:

<picture>

<source srcset="img/photo.avif" type="image/avif">

<source srcset="img/photo.webp" type="image/webp">

<img src="img/photo.jpg" alt="Description of Photo" />

</picture>

If you are interested to enhance your images by optimizing your mobile website, this article will help you a lot.

What About Downsides?

The only apparent downside to AVIF is the current lack of support. It currently works in the latest version of Chrome and can be enabled in the latest version of Firefox (switch the image.avif.enabled parameter to true in the advanced configuration settings.) Even though it is not currently available in other browsers such as Microsoft Edge or Apple Safari, it seems likely that they will add support soon. Also, there are fallback workarounds. For instance, this HTML code should work to deliver the AVIF version when possible and, if not, fall back to WebP and the

You Really Need to See for Yourself

If you really want a taste of what is possible with AVIF in terms of file size and quality, grab some images and head over to Squoosh from Google Chrome Labs. Not only can you convert most file types to AVIF, WebP, and JPEG, you can also view the images in two formats at once and compare them by moving a slider across the page to see each part of the image in each format.

What to Do Now

If the images on your website are already well optimized, there is no reason to rush out and convert everything to AVIF. In fact, since the format is not yet fully supported, you may be jumping the gun. However, if you are still using non-optimized images on your site, you are missing out on traffic. Getting higher drop-off rates, and losing customers.

The time to make a change is now. At Piio we are always searching for ways to help you deliver high-quality content optimized to reduce load times and keep visitors engaged. While we currently support the WebP standard, AVIF is already in beta-testing. Do you want to try it on your website? Write to us!

Compression Is Just One Aspect of Optimization

Don't forget that making things small is only one part of optimizing your images. Be sure to pay attention to those file names to be sure they properly represent your images. Also, don't forget about the importance of alt text and descriptions in helping search engines understand your content.