A look at AVIF

Tommy Oldfield
Thursday 20 May 2021

AVIF is a modern, but relatively unknown, image format and its presence is attracting a lot of attention in the web development and design world. But what is AVIF? How does it compare to other image formats, and what impact will this format have on the web?

What is AVIF?

AVIF (.avif) is a new, modern image format that is based on a video format called AV1, which has been developed by the Alliance for Open Media (AOMedia). The Alliance for Open Media has many big names in their governing members including Google, Apple, Microsoft, and Netflix.

AVIF has been praised for its image compression and quality, meaning your images will look better and have a smaller file size than JPEG, PNG, and even WebP! The format is royalty-free, which hopefully means that the format will get fast, widespread web adoption as there is no license fees or royalties for companies or individuals to pay to use it.

AVIF is already being used and implemented by some of the governing members of the Alliance for Open Media – Netflix is currently using it for their title cards; Google Chrome currently supports it as well as parts of Android, and Microsoft have developed apps for viewing and editing AVIF files.

Browser support

At the time of writing, with AVIF being a relatively new format (2018), many browsers haven’t fully supported the format yet with Chrome and Opera leading the charge. Firefox is in the process of supporting AVIF for everyone and with Apple being a governing member of AOMedia, I would think that support within the Apple ecosystem would come quite soon.

Table of web browser versions that show which browsers do and don't support AVIF
Current browser support for AVIF

Because AVIF doesn’t yet have full browser support, developers can use the picture element to provide various fallbacks in case the format isn’t yet supported on your browser.

As an example, here is what the hero banner code could look like if we supported AVIF images on the University website with JPEGs as a fallback.


    
    
    
    Image details

Image comparisons

Having seen other online comparisons, I thought I would have a go with a few images on the University website and compare JPEG, WebP, and AVIF by converting them using Squoosh.

I have created a few AVIF image comparison tests for you to view, and as many browsers haven’t supported AVIF yet, you should use Chrome for the best experience.

Similar visible quality

I’ve chosen an old front page hero banner that has a file size of 911kb for this comparison and the converted images in this first set are based on what I perceived to be similar visible quality. For the image comparison test that I’ve created, the WebP and AVIF images that I compared are the higher quality ones.

Converting to JPEG

In this first comparison, I’ve converted the hero banner to a JPEG which takes its file size down to 102kb. While the images look very similar in terms of overall quality, there are more visible artefacts on the JPEG. Still, I think this is a good quality image at a fraction of the original file size.

Comparison between a hero banner image of the buildings from West Sands in St Andrews and its conversion to JPEG
Comparison between the original hero banner image (top) and its conversion to JPEG (bottom)

Converting to WebP

Converting to WebP has reduced the file size down to just 35.8kb while retaining almost all the original’s quality. If you look closely or zoom in, the buildings and the water closest to us are ever so slightly blurrier than the original. The artefacts from the JPEG are nowhere to be seen in the WebP either.

Comparison between a hero banner image of West Sands in St Andrews and its conversion to WebP
Comparison between the original hero banner image (top) and its conversion to WebP (bottom)

Converting to AVIF

Converting to AVIF has reduced the file size down even further to just 20.6kb! Much like the WebP version, this AVIF version retains almost all the original’s quality yet slightly blurs the buildings and the water. However, to me, I think the water in the AVIF version is marginally more detailed than in the WebP.

Comparison between a hero banner image of West Sands in St Andrews and its conversion to AVIF
Comparison between the original hero banner image (top) and its conversion to AVIF (bottom)

Similar file sizes

Now I’m going to compare the formats when they have a similar file size to each other (between 95kb-100kb). I’ve chosen the School of Computer Science hero banner (file size of 301kb) for this and again, cropped the examples to show the differences.

Converting to JPEG

A lot of visible artefacts show when converting this hero banner to a JPEG at 98.3kb. Many parts of the image lose their detail and in turn, creates a lot of blocky and blurry sections.

Comparison between the Computer Science hero banner and its conversion to JPEG
Comparison between the Computer Science hero banner image (left) and its conversion to JPEG (right)

Converting to WebP

After converting the original to WebP (97.3kb) there are noticeably a lot fewer artefacts than the JPEG. Higher detailed areas such as the carpet and the back of the jacket still aren’t detailed as the original, but the WebP removes a lot of the blockiness and blurriness that was in the JPEG version.

Comparison between the Computer Science hero banner and its conversion to WebP
Comparison between the Computer Science hero banner image (left) and its conversion to WebP (right)

Converting to AVIF

Finally, for the AVIF (94.6kb) there are fewer artefacts than the WebP and it seems to have kept more of the detail (the grooves on the back of the chair, the carpet). I think AVIF (94.6kb) has the best quality out of the 3 conversions when compared at a similar file size.

Comparison between the Computer Science hero banner and its conversion to AVIF
Comparison between the Computer Science hero banner image (left) and its conversion to AVIF (right)

Conclusion

While it is still early days for AVIF, the format and it’s future look very promising. Would we consider using AVIF images for the website in the future? I think the performance benefit alone for the bigger images on our website such as hero banners would be enormous. Although right now, the biggest hurdles I can see for using AVIF on our website are the lack of browser support and there is no easy way for users to generate, edit and convert AVIF files.

Now that AVIF is on our radar, we will be more aware of its future development and adoption and we may start using this format on our website in the future.

Resources

Related topics

Share this story


Leave a reply

By using this form you agree with the storage and handling of your data by this website.