AVIF vs WEBP

There are two clear frontrunners in the battle for the smallest image format. WebP and AVIF. Where JPEG used to be the most important and dominant image format, in the future it is going to be WebP or AVIF. Both formats surpass JPEG in many important ways.

But why is AVIF better than WebP? This question is the focus of this blog. Which format has the better image compression and thus the smaller file size? Which format has the best browser support? With this article we want to answer these questions by comparing the performance and properties of these two advanced image formats.

We are going to compare the formats in three areas:

• Quality
• Compression
• Browser Support

Quality of AVIF vs WebP

AVIF is a format derived from frames of video with the AV1 codec, and there are some image size limitations that users should be aware of. AVIF has an image resolution limit of 65536 x 65536 pixels.

By default, AVIF has a limit of 8K (7,680 x 4,320 pixels), but it is possible to exceed this limit by rendering independently encoded tiles. However, with artifacts at the edges of each tile, AVIF is uns Transparent for large resolution images.

WebP also has a hard limit on the resolution of an image. WebP's maximum size is 16,383 x 16,383. While this is an improvement over the standard AVIF limit, there is no way to improve it like AVIF can. Neither format compares to the limitations of PNG and JPEG 2000 with 2500 meg Transparent and 5000 megapixels as limits, respectively.

WebP has many limitations compared to AVIF because of the wide color gamut and precision support that AVIF provides. WebP only supports a maximum bit depth of 8 bits and does support wide color range/HDR images. In contrast, WebP does not support images without chroma subsampling.

AVIF has a maximum bit depth of 10, supports 4:4:4, and interactive supports HDR images. Despite WebP's advantage with max dimension, we feel WebP's color limitations are too great to give the win in this category to WebP.

Compression AVIF vs WebP

The WebP format was designed to provide better quality images with a file size comparable to JPEG. While WebP certainly achieves this, the newer and more advanced AVIF format still has an edge in compression at the same quality. Both in lossless compression and lossy compression. High-quality images with AVIF do not contain annoying compression side effects such as color-banding or blockiness that can occur with WebP.

WebP performs only marginally better than JPEG in file size for low-fidelity compression, but with significant improvements in attractiveness. A low-fidelity JPEG image of 68.3kb is converted to a WebP file of 67.7kb.

The same image converted to the AVIF format gives a similar 67.6kb file. However, this AVIF image has much higher quality and attractiveness than the equivalent WebP file. It has much less blockiness and color-banding. So if you were to slightly decrease the quality of AVIF, equal to WebP then the file size of AVIF becomes significantly smaller. With the same look, AVIF is 30% smaller.

Browser support of AVIF compared to WebP

As a new file format, the AVIF image lags behind other older image formats in terms of browser support. WEBP is, across the board, currently more supported than AVIF. However, the surprising level of support for its age bodes well for the future support of AVIF in browsers.

On desktop, both Chrome and Opera are the first to offer full support for AVIF. Firefox users can enable AVIF support in the about: config page. However, this does not include support for animated images. Support is still missing for Safari and Microsoft Edge, however.

On mobile, Chrome for Android, Samsung Internet, and the Android Browser fully support AVIF. Support is unfortunately currently missing for Safari on iOS.

WEBP is supported across the board by Edge, Firefox, Chrome, Safari, and Opera. All major mobile browsers also support WEBP.

Conclusion

WEBP, when it came out in 2010, was a compelling replacement for the tired and outdated JPEG and PNG formats. But now, eleven years later, WEBP lacks important features that are strongly represented and necessary in the modern image format landscape. These include, for example, HDR images. Therefore, despite its extensive browser support, it is hard to imagine that WEBP will become a dominant image format.

With generally better compression and excellent performance in low-fidelity and high appeal images (the most popular type of images used on the web), AVIF is a more versatile image format. Its compression and optimization goes even further than WebP. AVIF is slightly behind WEBP in terms of browser support. But we expect Firefox and Safari to follow soon and provide full support for AVIF soon. Once this happens, AVIF will become the dominant image format for both still and animated images for the web.

Awesome! How do you get AVIF images on your website?

If you would like to get AVIF on your website you can create a free Quicq account. With Quicq your images will be served via the Quicq CDN in AVIF format (if the browser supports it) with a fallback to WebP format.

If you would like to know more about this subject you might like these articles as well:

• What is a WebP File? How to Open and Convert WebP
• Lossy vs Lossless compression