Today Google Search Central announced via its Linkedin channel that AVIF is now also supported as an image format. I think that's great, because we've been using AVIF as a file format for our images for over a year with our agency site and our portal TutKit.com. For me, it was the best news of the day, which is why I'm happy to write this post here to give you a little more information about the AVIF file format.
AVIF: what is it?
The AVIF file format (AV1 Image File Format) is a relatively new image format that was developed to offer higher compression efficiency while maintaining high image quality.
AVIF is based on the AV1 video codec (AOMedia Video 1), which was developed by the Alliance for Open Media. This codec was mainly developed for video compression, but the same technology can also be applied to still images. AVIF offers very good compression efficiency, i.e. it can store images with smaller file sizes compared to other formats such as JPEG, PNG or even WebP without significantly compromising image quality. AVIF also supports transparency (like PNG), animations (like GIF), and multi-frame images (like WebP). AVIF supports High Dynamic Range (HDR), depth of up to 12 bits per channel and color subsampling (up to 4:4:4). This makes the format ideal for images with high contrast and color depth. It combines the advantages of other file formats with impressive quality and a smaller file size.
The AVIF format was first introduced in 2019 and is increasingly gaining support and importance in the web environment.
Statistics: Use of AVIF by websites
When we converted our images from JPG to AVIF format last summer, the use of AVIF by websites was just 0.07 percent. At the beginning of November 2023, I was a speaker at SEO Day in Cologne and one of the topics in my presentation was the AVIF file format. I asked the room who was already using AVIF on their website? Nobody answered. Who knows the AVIF format? Five hands went up ... after all, I must have had over 150 viewers at my presentation. It turned out that even in the SEO scene, the AVIF format was still little known and used at the end of 2023. In my opinion, one of the reasons was that WordPress, the most widely used CMS in the world with a distribution of over 43 percent, was not yet compatible with AVIF out of the box at that time. That changed this March when WordPress became compatible with WordPress with the 6.5 release.
The daily updated data on AVIF usage is provided by w3techs.com - a website with many useful statistics. The three charts from this site are interesting.
The current use of AVIF is still less than 0.25 percent. Compared to AVIF, WebP - the format that SEOs have previously considered to be the modern image format - is used by 13.5 percent of websites. To be honest, this is still a sobering low figure when you consider the benefits that modern image formats have for PageSpeed and that the recommendation is also clearly given in Google's PageSpeed Insights if JPG or PNG is still found in the websites.
After all, the use of SVG is 57.6 percent, which suggests that more than half of the websites no longer contain icons, logos and other illustrative elements as PNG, but in the vector format SVG.
The chart on the right shows an interesting correlation: only a few but the websites with the highest traffic use AVIF. I do not assume that AVIF is a factor that catapults your ranking upwards on its own. It rather suggests that these websites have their technology and user experience under control and probably also pay attention to healthy site hygiene. Those who rely on AVIF are definitely sensitized to modern concepts and will probably also have dealt with further optimization potential, which means that this mindset will actually result in many advantages for the ranking.
The AVIF chart at the bottom left clearly shows how the curve has been rising more steeply since April. This is probably the WordPress effect. I predict that there will now be the next boost: the Google effect. With the announcement that AVIF will be included in Google Image Search and wherever Google displays images in search, many website operators will convert their images for performance reasons alone.
There is also no reason not to do so. In 2024, most modern web browsers such as Google Chrome, Mozilla Firefox, and Microsoft Edge support the AVIF format. Apple Safari has also added support over time, but there may still be issues on older versions.
Current browser compatibility is over 93 percent according to caniuse.com... caniuse.com is another great site with stats.
WebP vs AVIF: Which is better?
WebP has been on the market since 2010 and is widely supported. Most modern web browsers, operating systems and image editing programs support WebP. So which is better: WebP or AVIF? The question is answered directly by caniuse.com in the screenshot above: AVIF generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them.
Nevertheless, I would like to show you an example here. I rendered an image with Midjourney and saved it as a PNG.
With a resolution of 1465 x 816, the original image has 2.26 MB as a PNG. If I resize the PNG via TinyJPG.com, it still has 673 kb as a PNG. If I then convert it to JPG format and save it in Adobe Photoshop with a quality of 55% in Photoshop, it still has 335 kb.
Now I go to squoosh.app to convert the PNG file to AVIF and WebP. WebP reduces the image to 188 kb, AVIF to 130 kb. Squoosh is an experimental open source development project. You can use it to compress and scale images and compare the results with different codecs in your browser.
My conclusion: WebP will be replaced by AVIF in the medium term due to its better properties and will not compete with JPEG XL for the format of the future. According to caniuse.com, current browser support for JPEG XL is just 12.8 percent. Only Safari supports the JPEG XL format. As long as there is no compatibility in all common browsers, a comparison between JPEG XL and WebP is not necessary. And here in this image comparison, JPEG XL reduced the file to 159 kb, better than WebP, but still significantly larger than AVIF.
PageSpeed optimization: AVIF is the format for your image SEO
In the following screenshot you can see the recommendation for using modern image formats, in which WebP and AVIF were cited as examples. When we were looking into PageSpeed optimization at TutKit.com last year, we first came across this recommendation and followed it.
If you implement AVIF on your website, it is best to use the <picture> tag, which then contains a <source> and <img> tag to display your images in the correct dimension and in both AVIF and WebP formats. WebP is also included as a fallback for older browsers that cannot display AVIF. That's how we do it anyway. Don't forget to also specify the new image type (type="image/avif"). The image formats are then converted via your CMS or, in the case of a framework, on the server side via PHP. The new functions imagecreatefromavif and imageavif for the AVIF format are available from PHP 8.1+.
The only thing that is not yet completely clear to me is whether AVIF can now also be recognized by Google for 1. og:image, 2. meta thumbnail and 3. also for schema markup "image" and can therefore be used without any problems.
Conclusion: Especially if you have an image-heavy website, you will be able to improve the PageSpeed and thus the user experience by using AVIF - and this will have a positive impact on your image SEO.