Is it time to jump on the AVIF bandwagon?
Web technologies continuously evolve. This isn’t just a throwaway phrase – they really do not stop evolving. The code, the platforms, even the file formats of the images you see online, all these aspects of web technology keep changing. And as website designers and developers, it’s our job to keep an eye on this evolution and evaluate opportunities for improvement of our own products and services.
We’ve started using a WordPress plugin to convert our website images to the faster-loading WebP format. But the even faster AVIF format is coming.
First a little background: Twenty years ago, the typical website visitor was using a slow dialup connection (think 1,000 times slower than broadband today), so a conscientious web designer reduced file sizes by compressing JPG files as small as possible and removing individual colors from the palettes of GIF files.
Fast forward to 2020, and bandwidth is hardly an issue. Google, however, prefers a site that loads as fast as possible. In our internal process of improving the page speed of our own website, we decided to switch from JPG and PNG file formats to the WebP format. WebP does an excellent job of compressing images even smaller than JPG while maintaining reasonable quality. However, Apple has been slow to support it, and it’s only this fall, with the advent of iOS 14 and Big Sur, will the format get the broad support it should have had for years.
Delivering images in the WebP format
On our own site, we’re experimenting with WordPress plugins that convert all images to the WebP format. The plugin keeps the original file format as a fallback for any browsers that don’t support WebP, so it allows for the best of both worlds. Great! We’re done thinking about image formats, at least for a year or two.
But wait a minute – who’s that knocking at the door? The AVIF image format. AVIF (pronounced əˈvif) is an outgrowth of the AV1 video compression, and it’s suddenly become a format to watch. Jake Archibald wrote this excellent analysis of AVIF’s pros and cons that made us sit up and take notice.
The AVIF format has great potential. But it’s currently laborious to implement.
My takeaway is the AVIF format does amazingly better than even WebP in rendering acceptable quality images at even lower file sizes – and this is for all types of images, whether complex, detailed photos, smooth gradients, or flat illustrations. What’s not to love?
The downside is that AVIF files don’t load in passes like JPEGs or top-down like WebP, so the user sees nothing until the whole AVIF image is loaded. From a user experience perspective, this is bad, because users expect to see something right away; even a few seconds’ lack of a something can give the impression that a site is broken. The workaround is to have two AVIF versions of each image, one of such low quality and minuscule file size that it appears in an instant, to be replaced by the higher quality version after a couple of seconds. But this necessitates a laborious task of producing and uploading all these images manually, since as of this writing, there isn’t a plugin that will do this work in a website’s content management system.
Will the AVIF image format leapfrog WebP?
Nevertheless, Archibald’s article is the first shot of legitimacy for this format. Will the AVIF format leapfrog WebP? Netflix started experimenting with AVIF in 2018. Microsoft is building it into Windows 10. In August 2020, Google Chrome version 85 was released with full AVIF support. Mozilla is working on support for the image format in Firefox. No word yet from Apple, though Archibald claims that Apple is close to the AVIF conversation – unlike the WebP conversation – so we hope support would be forthcoming.
So apparently we’re not done thinking about image formats, and we probably won’t ever be. But that’s OK. Twenty years ago we could not have predicted such huge changes in website production as designing for mobile or for accessibility. Who knows what the online experience will be like in 2040. All we know is we must continue to evolve!