WebP and AVIF: Image File Formats You Need to Know About
|
The web is increasingly about images. Faster broadband means richer websites, with a far greater proportion of image content than was considered possible just a few years ago. But more and more websites are accessed via mobile devices, few of which can yet use 5G for speedy delivery. Most are reliant on 4G at best, and 3G or worse in some situations.
The JPEG file format was revolutionary when it appeared way back in 1992. It stands for Joint Photographic Experts Group, and its introduction opened the doors for low-cost image delivery with minimal loss of quality. Now there are two other contenders on the block: AVIF and WebP, which promise even greater file size savings.
To put these file formats through their paces we used Squoosh, a free service from Google Chrome Labs that allows users to upload images in a variety of formats, and to convert them to other formats on the fly:
You can access Squoosh here, and try out the different compression formats on your own images.
AVIF
AVIF images are typically around 50% smaller than the equivalent acceptable quality JPEG web file, and can produce far greater savings at an almost imperceptible loss of detail. Using the Squoosh browser app, you can set both the maximum and minimum quality independently.
In the JPEG example shown here, an image of a car 1000 pixels wide with an original size of 475kb as a maximum quality JPG file was reduced to 150kb using Photoshop’s Save for Web dialog. As an AVIF file, this was reduced to under 90kb with no discernible loss of quality: the Cadillac logo on the side is still as visible as it was in the JPG file, and you can make out texture in the distant trees.
By reducing the quality we can achieve even smaller file sizes, but at some cost: there’s now a small but visible loss of texture in the trees when the maximum quality is taken down to 20. This produces a file size of just 46.3kb:
But it’s when we come to cutout images that we see the real space savings. Unlike JPG, PNG images support transparency, but the PNG 24 file format is lossless, and so tends to result in large file sizes. In the penknife example below, the PNG image is 347kb in size – which is large for web delivery. However, this is reduced to just 24.5kb as an AVIF file of the same quality:
With a lower quality level, including a small but barely visible amount of smoothing, this can be further reduced to an astonishing 10kb – an amazing size saving for a file with such large pixel dimensions.
Flat artwork produces variable results when saved as AVIF files. This PNG image of a laptop (courtesy of freepik.com) weighed in at just over 30kb as a PNG file with transparency, but when saved as an AVIF file with the Lossless option checked it produced a file over twice the size at 64kb (and PNG, remember, is itself a lossless format). Allowing some slight but barely perceptible loss of quality brought the file down to under 11kb as an AVIF file:
WebP
WebP is a format developed by Google, announced back in 2010. It uses both lossy and lossless compression to achieve file size savings, and is in the process of being implemented by major browsers (see below).
WebP compression in Squoosh uses two sliders, Effort and Quality, which combine to produce smaller file sizes. You can also choose to show advanced options, which include such parameters as Alpha Filter Quality, Filter Strength and Spatial Noise Shaping (including separate sliders for Segments and Partitions). If you understand any of that, we’re mightily impressed.
In the car example, which produced a 150kb file using Photoshop’s Save for Web showed a modest reduction to 141kb as a WebP file in Squoosh:
Again, though, major savings are apparent when using images with transparency. This cutout image of a penknife, a 347kb PNG file, was reduced to just 37.6kb by Squoosh with no visible loss of quality:
The flat laptop image, which was a 30kb PNG file with transparency, reduced to under 12kb when saved as a lossless WebP file, representing a serious saving:
All the examples shown above use typical settings for the file conversion. With a lot of experimentation, it’s possible to balance size and quality to get good results at even smaller file sizes.
Which browsers support these formats?
The AVIF format is a byproduct of the AV1 video format (not to be confused with AVI), which was designed for streaming video delivery. It’s supported in the latest version of Chrome on the desktop, but not yet in Chrome for Android, Firefox, or Internet Explorer. Although it was scheduled to be implemented in Safari 14 on the Mac, in our tests (as of early October 2020) it still isn’t working in that browser.
Saving files in AVIF format from your computer is not a straightforward process. You can use the AOMedia Library (see here) but it’s in the GitHub repository, and requires your use of the command line interface for installation on your PC.
The WebP format is supported by Google Chrome, Firefox, Opera, and a few other browsers. Apple added support for Safari with iOS 14, and the forthcoming macOS Big Sur.
Google has released a free plug-in for Photoshop that proceeds WebP support, which you can download here.
Should I use these formats yet?
Neither AVIF nor WebP are yet standard file formats, although WebP is much closer to being an industry standard. If you’re a web developer, you can use content negotiation to check for browser support on your server, making sure the correct file format is delivered – see here for details. But this approach requires uploading multiple files in different formats to ensure support for all browsers; in addition, your audience’s computers are going to have to work harder to decode the images.
We’ll know when either AVIF or WebP makes it into the mainstream when Photoshop offers native support for these formats. But just as JPG superseded GIF and TIFF formats before it, we can expect a shift to these new, cost-saving formats within a few years.
 |