Introduction
The image format wars are heating up, and two front-runners have emerged: WEBP and AVIF. Both vying to dethrone JPEG as the dominant image file format for sharing images over the internet, both AVIF and WEBP outperform the aging JPEG format in many fundamental ways.
First developed by Google in 2010 as an open format for compressed true-color graphics, WebP's lossy compression algorithm is based on the VP8 video format and the RIFF file container.
Similarly, AVIF is derived from the AV1 video codec. AVIF is a relatively new kid on the block, having been first released in 2019. AVIF's youth as an image format has its benefits and drawbacks.
However, the million-dollar question is which is better: AVIF or WEBP? Which format has the better image compression and thus the smaller file size? This article aims to answer this question by comparing the performance and features of these two advanced image formats and ultimately decide which is more deserving of the crown as the dominant image file format for web delivery.
Quality and limits
AVIF is a format derived from frames of video with the AV1 codec. There are some image dimension limitations adopters will need to look out for. AVIF has an image resolution limit of 65536 x 65536 pixels.
By default, AVIF has an 8K limit, but it can exceed this limit by rendering independently encoded tiles. But, with artifacts at the edges of each tile, AVIF is unsuitable for large-resolution images.
WebP also has a hard limit to an image's frame size, with its maximum dimension being 16,383 x 16,383. While this is an improvement over the default AVIF size limit, there is no way to push past this like AVIF. Neither formats compare to the limitations of PNG and JPEG 2000 with 2500 megapixels and 5000-megapixel max dimensions, respectively.
WebP falls short with its limitations compared to AVIF because of its wide color gamut and precision support. WebP supports a max bit depth of 8-bit and does support wide gamut/HDR images. WebP also does not support images without chroma subsampling.
AVIF flexes a max bit depth of 10, supports 4:4:4, and supports HDR photos. Despite WebP's advantage with max dimension, we find the other limitations too great of a sacrifice to hand the win to WebP for this category.
Compression
The WebP format was designed to provide more outstanding quality while encoding images with similar file sizes to JPEG. While WebP achieves this, the newer and more advanced AVIF image format performs better in compression to appeal ratioon lossy and lossless compression.
High-appeal photos do not include nasty compression artifacts like color banding or blockiness. They are a desirable metric for images to look good on the web.
WebP performs marginally better than JPEG in file size for low-fidelity compression, but with noticeable improvements in appeal. A low fidelity 68.3kb JPEG photo translates to a 67.7kb WebP file.
The same image converted to the AVIF format renders a similar 67.6kb file. However, this AVIF image has a much higher appeal than the equivalent WebP file – with noticeably less blockiness and color banding.
WebP's compression performance improves with medium-fidelity photos but does not surpass AVIF in its file size to appeal ratio.
For lossless compression, AVIF and WebP perform similarly with both non-photographic images like graphic design and photographs.
Speed
For web delivery, decode speeds are essential for the performance of websites and downloads. AVIF struggles with single-core speeds with poor single-core encoding speed and marginally better decode speeds.
WebP's single-core encode speeds and decode speeds are much shorter, with overall single-core speed trumping AVIF. Clear winner, right?
Single-core speeds are much less critical in our modern computing landscape than they were in the past. That's because CPUs have been, for many years, tending towards higher core counts and more threads. This is where parallelization makes a considerable difference for AVIF. AVIF decodes can take advantage of multiple cores to turn the poor single-core performance into good multi-core decoding speeds.
With many mobiles and desktops using 8-core processors, multi-core performance is critical. As an older format, WebP's parallelization is less effective, making AVIF more future-proof despite its poor single-core speeds.
Other Features
Both AVIF and WEBP support animation – however, with AVIF's heritage as a video codec, encoding animation with AVIF is more efficient with AVIF than WEBP. Sequenced AVIF files have much smaller file sizes than animated WEBP. However, even WEBP beats out legacy formats like GIF and aPNG.
One can convert an animated image with a file size of 1.5MB and 67 frames to a sequenced AVIF file of 87kb. The benefits of this dramatically more efficient animation compression become even more significant the longer and more detailed animated images become.
For text and graphics work, both AVIF and WEBP support alpha transparency. Although, AVIF supports overlays allowing for distinct layers of an image to be encoded separately. AVIF also supports depth maps, allowing for effects to be easily applied to images.
Both AVIF and WEBP also lack progressive rendering, which accelerates page loads by providing a low-resolution preview image before the entire image has been decoded successfully. This feature is reserved for JPEG and its descendants JPEG 2000 and JPEG XL.
Support
As a young file format, the AVIF image is behind other older image formats for browser support. WEBP is, across the board, currently more supported than AVIF. However, the surprising level of support for its age provides a good outlook on AVIF's future support across web browsers.
On the desktop, Chrome and Opera are the first to provide full support for AVIF. Firefox users can enable AVIF support on the about:config page. However, this doesn't include support for animated images. Support is still, however, missing for Safari and Microsoft Edge.
On mobile, Chrome for Android, Samsung Internet, and the Android Browser all support AVIF fully. 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 for Nerds
WEBP, when released in 2010, was a compelling replacement to the tired and aging JPEG and PNG formats. However, eleven years later, WEBP lacks standard features that have been ubiquitous in the modern image format landscape. These include 4:4:4, HDR images, and high bit depth. Therefore, despite its universal browser support, it is challenging to foresee WEBP becoming a dominant image format.
With generally better compression, both lossy and lossless, and excellent performance with low-fidelity, high-appeal photos (the most popular type of images shared on the web), AVIF is a more versatile image format, especially when it comes to the compression codec and the underlying image optimization. While it lags behind WEBP with browser support, we expect Firefox and Safari to follow suit and provide full support for AVIF soon. Once this happens, we expect AVIF to become the dominant image format for both still and animated images on the web.
Conclusion for Marketeers
We expect most people haven't come across WEBP images all often due to its relatively low market adoption. We don't expect this to improve any time soon. With more significant parallelizing potential with AVIF for encoding and decode speeds than WEBP, you should find AVIF images decode as fast as WEBP.
HDR images will be impressive on great displays, and animated AVIF files should be much less taxing on your broadband's bandwidth and data caps. While AVIF browser support is still limited, the great mix of features and compression performance makes AVIF an excellent contender to become the dominant image format for everyone: mobile and desktop.