Sustainable.devBETA Menu

Posted to Resource on October 4, 2020


Shed the weight of an image by using the new AVIF format

Image optimisation is a big topic in the sustainable website realm. Compression, reducing image data and removing colour are all good things to optimise an image. But what about the different image formats?

Of course you have the well-known formats of JPG, PNG and the now well supported format of WEBP – but now there is a new format. With claims that it can half the file size of a well optimised WEBP file, (which in itself could easily be half the size of a JPG) it is certainly an exciting time for producing well optimised, quality imagery for the web.

So, what is AVIF?

AVIF is a new image format that is derived from the keyframes of AV1 video.

What is the browser support for the AVIF image format?

AVIF is already supported in Chrome version 85 for desktop – with Android support on the way. Opera also has support. Firefox too is working on an implementation currently, which can be enabled with a flag in the browser config, so full support shouldn’t be too far away. Safari though has no current implementation, but, they were actively involved in creating the format, so we would expect support to be integrated fairly soon. Edge also doesn’t support the format.

How to use the AVIF image format

There are already some online tools that have incorporated the AVIF format, like Squoosh, so you can easily convert your optimised images ready for the web.

Seeing as Chrome already has support, it means you can start using AVIF right away. Here is how to use it, along with a fallback for browsers that don’t support it yet.

<picture>
  <source type="image/avif" srcset="tiny-image.avif">
  <source type="image/webp" srcset="pretty-tiny-image.webp">
  <img alt="A larger image" src="not-so-tiny-image.jpg">
</picture>

Want to take this up a level? Apply native lazy loading for an even better page load performance. Read our guide on how to add native lazy loading into your web builds here.

 

Is AVIF the future?

While in testing the AVIF format can give some impressive results, (50%+ reduction over WEBP file size with similar quality) it isn’t the perfect solution. If what we’re after is pure speed and lightness of resources, AVIF certainly looks like it would win in most situations. However, because it’s a format born out of video, it lacks some of the features that other image formats have. The great thing about the JPG format is that it can be rendered progressively. So, while it maybe be larger, it can give the impression of speed with multiple render passes and therefore appear quicker to users – albeit with a lower quality version first. In a UX perspective, there is an argument that the JPG would win in this situation over the AVIF format.

Conclusion – should you use AVIF?

The short answer, yes. The longer answer. Yes, but always include a fallback, well supported image – such as WEBP and JPG. Our best suggestion, use the picture element where you can control the source and offer up the optimised images to the browsers that support them, whilst ensuring you are still showing an image to all. Always optimise your images, and always include a useful alt tag to describe your image for the visually impaired.