Modern Image Formats with AVIF and WEBP

TL;DR - AVIF and WEBP are two new image formats capable of maintaining similar perceptual quality to the original while providing an additional 25-45% decrease in file size over the standard JPEG format.

As is often the case with my pendulum-swinging development path between game dev and web dev, my resumptions require that I learn new things to stay in vogue. In the case of web dev, I spent time learning about the new AVIF and WEBP image formats.

Because I use the web everyday, I had an awareness they existed and I understood they were a more-optimized image format, but I didn’t yet understand how they came to be and how they differed from other image formats (to make them as desirable as they are).

When it comes to the web, we have plenty of format options to choose from if we want to render an image. The difference between those options are found in how each image codec handles the encoding (compression) and decoding (decompression) process, inclusive of quality retained during the compression process and encoding/decoding speed. The same goes for video.

I shouldn’t forget to mention we also have two types of algorithms for image file compression:

• Lossless Compression: reduces file size while preserving a perfect copy of the original uncompressed image (png, gif, tiff).
• Lossy Compression: reduces file size through preserving a representation of the original uncompressed image (jpeg, webp, avif).

note: although I’ve listed WEBP and AVIF formats as lossy above, they support both lossy and lossless options.

So just how much more optimized can images rendered on the web be? Below is an example of a (lossless) PNG image compressed using 3 lossy formats (jpeg, webp, avif):

Although we’re collectively seeing a (minimum) 91% decrease in file size while maintaining near-original perceptual quality, AVIF and WEBP are giving us an even greater decrease (+60-75%) in file size relative to JPEG for the same fidelity.

For a more extreme example, take a look at the difference in this codepen (courtesy of Addy Osmani) between an original image and the JPEG, WEBP, and AVIF outputs of equal file size (36kb).

Which then begs the question: what are the differences between AVIF and WEBP, and how do you decide which one to use?

Image file format feature support table courtsey of Smashing Magazine.

My experience with WEBP and AVIF has not been extensive, but in the short time I’ve been working with both formats, AVIF has notably edged out in performance and quality in every use case.

One other observation: AVIF was developed by the Alliance of Open Media, a non-profit consortium founded in 2015. This is 4 years after WEBP was created by Google in 2011. Google is listed as a governing member of AOM though, so perhaps WEBP will eventually be phased out in favor of AVIF as the industry standard image format for the web?