How to use the new AVIF format for images today
It only seems like five minutes since we were excited for the release of the WebP image format which helps web developers create smaller, richer images that make the web faster. However there is a new image format ready to use now that's roughly 20% smaller than WebP called AVIF.
What is AVIF?
The .avif format is a new file type containing a super compressed image. When compared with JPEG you get ~50% savings, and compared with WebP it can be ~20% smaller.
Companies such as netflix are considering an alternative file type to JPEG which is widely supported, has a higher compression efficiency as well as a wider feature set. The new AVIF file type fills that need.
Using AVIF format on the web Today
AVIF is now supported in Chrome 85 and enabled via a flag in Firefox 80 (Soon to be fully supported), which means you can start using it in production today.
The AVIF format isn't available in every browser just yet, however we can use the HTML5
<picture> element to support it, with fallbacks for those browsers that are still catching up.
<picture> <source srcset="images/photo.avif" type="image/avif"> <source srcset="images/photo.webp" type="image/webp"> <img src="images/photo.jpg" alt="Image Alt Text"> </picture>
By adding it as the first
<source> element in the list, the browser will use it first if supported, if not it will move on to show the other file types you have included.
How do I create AVIF images?
The tool over at Squoosh, used for compressing and comparing images, will allow you to export the image in the AVIF format.
Drag and drop the image you want to convert and export to the AVIF format using the tools provided.
It's really interesting to see how we're pushing the limits, as WebP has only come out in full force fairly recently and we're already releasing the next best thing. Given that logic, somebody is already working on the next idea that's better than AVIF, but for now we can create an even faster web than ever before, and that's great!