AVIF, a next-gen image format for the web, will have to wait in line behind WebP
WebP is on the verge of replacing JPEG and PNG as the best image to use on the web thanks to Safari 14 finally supporting it. However, an even better image format, AVIF, is already looking to replace it.
Ten years ago, Google unveiled an open-source image format called WebP. The new format can significantly reduce the file sizes of images without loss of visual clarity, and it fully supports transparency. WebP is the perfect successor to JPEG and PNG image formats.
Ten years later, very few web developers use it. That’s because while every other browser added support for WebP, Apple stubbornly refused to add WebP support to WebKit (Safari). That is, until now.
Apple revealed in its Safari 14 Beta Release Notes that it was finally adding WebP support. That means when iOS and iPadOS 14, and macOS 11 are released in Fall 2020, all major browsers on mobile and desktop will support WebP.
It may still take at least another year or two before webmasters can start using WebP images exclusively. It will mainly depend on the percentage of WebP compatible browsers that visit the site. Alternatively, sites can use a technique that works for all modern browsers today if they want to switch over to using WebP now.
The first option, which is the simplest, is to use Cloudflare’s Polish image optimization tool. Cloudflare will automatically convert JPEG and PNG to WebP, and serve them to browsers that support it. However, suppose you prefer to have complete control over the images the site serves. You can use the picture element and srcset attribute to deliver multiple image formats based on browser compatibility.
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="description">
</picture>
AVIF is superior to WebP
Innovation continues to outpace browser standards. As the decade-old WebP image format is poised to become a standard, finally, there’s a new image format, AVIF, that provides even better performance.
Daniel Aleksandersen, developer and editor of Ctrl Blog, tested AVIF against WebP and JPEG images. He concluded that “AVIF outperformed both JPEG and WebP for every image in the test.”
Like WebP, the AVIF format likely has several years before it will see adoption by all major browsers. It’s currently only supported by Chrome.
Unlike WebP, the AVIF format has the interest of major companies like Netflix and Facebook, which may put pressure on Apple to support it in Safari sooner than later. Apple may also give it serious consideration because AVIF has HDR color support.
In February 2020, Netflix expounded on why they want AVIF to become an image format standard on the web. They provided numerous visual examples that showed how AVIF was a preferred image format compared to JPEG.
Hopefully AVIF won’t take ten years to get adopted by all major browsers like it did for WebP. Regardless, webmasters can use the AVIF image format now by using the same srcset attribute used in the previous example for WebP.
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="description">
</picture>
Jon is the founder and Managing Editor of Coywolf. He has over 25 years of experience in web development, SaaS, internet strategy, digital marketing, and entrepreneurship. Follow @henshaw