What is an AVIF image format?
The AV1 image format (AVIF) is an exciting new open-sourced and royalty free optimised image format which supports any image codec. An AVIF image offers significant file size reduction compared with JPEG, PNG and WebP and is currently supported on Google Chrome, Firefox and Android.
AVIF is the still picture format created from an extraction of the keyframes of the video format AV1 which is developed by Alliance for Open Media (AOMedia) in collaboration with Google, Cisco and Xiph.org. This new technology is getting a lot of praise with Netflix already claiming the AVIF image format to be far superior to the JPEG, PNG and even the newer WebP image formats for it’s image quality to compressed file size ratio. With the JPEG having been around for decades it is certainly time for a new advanced alternative, making the AVIF a really exciting development with the potential to be widely adopted.
The AVIF image format supports the following features:
- High dynamic range
- 8, 10, 12 bit colour depth
- Lossless compression
- Lossy compression
- Monochrome (alpha/depth) or multi components
- Any colour space including: wide color gamut, ISO/IEC CICP and ICC profiles
- 4:2:0, 4:2:2, 4:4:4 chroma subsampling
- Film grain
AVIF vs JPEG and WebP
The AVIF image format offers significant file size reduction for lossy images compared with JPEG and even WebP – Google's image format. A lossy image is when unnecessary data from the original image file is removed to reduce the data size, this process however is irreversible. As we’ve said before, reducing file sizes can speed up your website load time, improving your SEO rankings, and reduce your bounce rate. On average there is a 50% saving by using an AVIF image compared to a JPEG and 20% savings compared to WebP images.
Which browsers currently support AVIF?
As of October 2021, the AVIF image file format support was introduced in Google Chrome 85 and Firefox 93 versions. If your browser is currently on a newer version than one of these it also will be supported. At the time of writing Microsoft Edge isn’t currently supported, but since the new Microsoft Edge uses the same Chromium Engine it won’t be long until support is rolled out. However, if you are a Microsoft user there is an AV1 Extension add-on available to download on the Microsoft Store. This provides support on Windows 10 devices and Edge if installed.
Safari – the browser often used on Apple devices like iPhones – currently doesn’t support AVIF and although they took 10 years to add WebP support, I predict they will be a lot quicker this time around as they are a member of the AOMedia group that created AV1.
How to implement AVIF in your website
As AVIF is still a relatively new technology and is not yet fully supported in all browsers, the best way to implement it is using content negotiation, which in this case is the HTML 5 <picture> and <source> tags. This is so that if the browser doesn’t support the AVIF file type it will display the fallback image instead, which would be the JPEG. The following code example below should be used within the <body> tags of your website page.
<picture> <source srcset="images/example.avif" type="image/avif"><source srcset="images/example.webp" type="image/webp"><img src="images/example.jpg" alt="description of example image"> </picture>
If you host your images on Cloudflare then you will be pleased to know that they have also added support for the new AVIF image format in their image resizing tool within their Content Delivery Network (CDN). There are also WordPress plugins and JavaScript build tool packages out there to automate the process, but as I have yet to try these I can’t comment on any specifically.
How to create AVIF files
To convert existing images into AVIF format images I would recommend Squoosh, which is an image compression Web App developed by the Google Chrome Labs team. Other options include GIMP and Microsoft Paint which both support AVIF in their most recent versions.
Photoshop is yet to support the image format but it’s currently being discussed within the community so i don’t think it will be long until this changes and AVIF is supported.
Is AVIF lossless?
Yes, AVIF is lossless which means that the file size is compressed, but the picture quality still remains the same. However, doing some test comparisons the AVIF lossless mode isn’t very good. WebP and even PNG outperformed the lossless AVIF image in byte sizes.
Is AVIF open source?
The AVIF image format is open source and has a royalty free licensing model that does not hinder adoption in open-source projects. The AV1 file format was developed by Alliance for Open Media (AOMedia) in collaboration with Google, Cisco and Xiph.org foundation.
The future’s bright for AVIF
Unless it’s automated, I can’t see many websites using AVIF yet as it’s very time consuming to serve multiple image formats. However, I’m excited to see this new technology continue to be adopted as the performance gains are tremendous.
With internet speeds constantly improving and resources becoming smaller, the web will be a faster and more streamlined experience for years to come.
If you want to chat about how to make improvements to the speed of your website, get in touch with the Betta Webs team.
