AVIF image format for websites boosts SEO, PageSpeed & User Experience

Less than 0.1 percent of all websites use the AVIF format and take advantage of the best opportunity for image formats to measurably improve website speed , user experience and online visibility on Google. All other website operators are not yet exploiting the potential that AVIF offers as an image format. This article is intended to provide a remedy and encourage you to take a serious look at the AVIF format and, ideally, to use it for your images on your website.

Have you ever tested the URL of your website with Google PageSpeed Insights to see how it performs? If not, do it directly with your own website.

Let me guess, you don't currently see this value on your website, do you?

The lower your score is, the more your website needs to be optimized to improve your PageSpeed. If you open the recommendations for improving your PageSpeed from Google further down on the test tool page, it may well be that one point includes modern image formats - if you are still using JPG or PNG file formats for your images.

This is one of several reasons why you are not yet achieving top scores with your website in PageSpeed Insights and probably not passing the Core Web Vitals either.

Both the images on our agency website 4eck-media.de and here on TutKit.com itself are loaded in the AVIF file format - ultra-fast, ultra-small in a convincing quality. And AVIF helps us to achieve the highest possible PageSpeed.

The relatively new file format for web images is hardly known to anyone, which is why it is time to introduce the modern AVIF image format for websites with all its advantages for SEO, PageSpeed and user experience.

The table of contents for the AVIF article:

What is the AVIF image format?

AVIF is a new image format published in 2020 by the Alliance for Open Media (AOMedia). The format is based on the lossless compression algorithm AV1 and offers a number of advantages over other common image formats such as JPEG and PNG as well as the web format WebP.

AVIF images are significantly smaller than JPEG images with the same image quality. This is due to the fact that AV1 offers significantly more efficient compression. An AVIF image with the same image quality as a JPEG image can often be up to 50% smaller.

AVIF images also offer a higher color depth than JPEG images. For example, AVIF images can store up to 12-bit color depth, while JPEG images only support 8-bit color depth. This results in a wider color gamut and more realistic colors in AVIF images.

In addition, AVIF images are able to store alpha channels. Alpha channels are used to define the transparency of images. This makes AVIF images ideal for use in graphics applications where transparency is required.

AVIF is an open source format and is supported by a variety of software and hardware vendors. Most common image editing programs and browsers already support AVIF images. That's why it's time for this modern image format to catch on!

The following are some of the advantages of AVIF over other popular image formats:

• Better compression rates: AVIF images are significantly smaller than JPEG and PNG images with the same image quality.
• Higher color depth: AVIF images support up to 12-bit color depth, while JPEG and PNG images only support 8-bit color depth.
• Support for alpha channels: AVIF images can store transparency, so they also replace the reason why PNG or even WebP images are still used in websites today.
• Open source format: AVIF is an open source format and is supported by a large number of software and hardware providers.
• AVIF is a convincing image format for websites that offers many advantages over other common formats (including WEBP).

It is foreseeable that AVIF will play an increasingly important role in the storage and display of images in websites in the future - especially because Google has placed its use directly in the recommendations in the PageSpeed Insights results and all common browsers now support AVIF in the newer versions.

It is therefore worth being early when it comes to embedding it in your own website in order to take advantage of the benefits for SEO, PageSpeed and user experience now.

Why does AVIF bring advantages for SEO, PageSpeed and User Experience?

The biggest advantage becomes most visible when we compare the images in the view. As an example, I have generated an image via Midjourney of a school of clownfish in 1024x1024 resolution in PNG format.

• Original PNG: 1.43 MB
• Optimized via TinyPNG: 393 KB - 73 % saved

I then had the original PNG file converted via squoosh.app with the result:

• Optimized as WebP via Squoosh: 84 kb - 94 percent saved
• Via Squoosh optimized as AVIF: 42 kb - 97 percent saved

As a result, the AVIF image is only half the size of the WebP image with the same optical quality. Many other tests have shown that compression artifacts, which occur with JPG files when compression is too high, only become slightly visible when the quality is adjusted below 30 towards 20 or lower. At quality 30, even text components in pixel graphics still remain beautifully sharp without compression artifacts.

Such savings on image-heavy websites cannot be overestimated.

AVIF for better SEO values, PageSpeed and user experience

Google has already elevated the vital core values (Core Web Vitals) of a website to a ranking factor in 2021. These include, for example, the loading speed, i.e. how quickly the main content is displayed for your user. Google specifies times of up to 2.5 seconds as a good value that website operators should aim for for their users.

Larger image data causes longer loading times. The Core Web Vitals are then considered to have failed.

There is also a second problem. If larger image data based on PNG or JPEG, for example, is placed on the website, it is possible that text content is already loaded while an image takes longer to load. This can lead to so-called cumulative layout changes, i.e. small shifts that push the lower website areas downwards when an image is displayed, which is where they belong. Google doesn't like such cumulative layout changes and reports them as CLS errors, which result in the Core Web Vitals not being passed.

In addition, it feels great for every website visitor when the pages run smoothly and the content is immediately available with a click. You can also place better quality images on the website without compressing them so much that compression artifacts are visible. The file size remains small compared to PNG or JPEG, even with lossless conversion or normal compression. The AVIF format therefore improves the user experience for every user in several ways. By passing the Core Web Vitals, Google is forcing us to do something for our visitors so that they are not frustrated when visiting our website.

This means you can do something to improve the user experience, page speed and technical quality of your website, all of which will have a positive impact on your online visibility.

Browser support for AVIF images

Especially when it comes to brand new technologies, every website operator is a little hesitant and likes to wait a few more months. On the one hand, you don't want to become a beta tester for any major releases of store systems or CMS, for example, and on the other hand, it can never be completely guaranteed that there will be no problems with certain browsers or devices.

In the case of the AVIF image format , the decisive factor is whether the current browsers now support the format. The website caniuse.com provides information on this: https://caniuse.com/avif

AVIF is already supported by almost 85 percent of browsers worldwide. In Germany, as of September 2, it is still 80.33% ... well, Germany, where gaps in the cell phone network are still part of everyday life and some regions continue to suffer from lame Internet (including my region: while I am traveling with gigabit in the office, I only get 9 MBit/sec in my home office).

So you can see that AVIF has been supported in the most important browsers for some time now.

How many websites already use the AVIF format?

Similar to caniuse.com, w3tech.com gives you statistical information about the use of certain technologies. This also applies to the image formats used in websites.

This is the percentage of all websites using (as of September 2023)

• PNG: 82.1%
• JPEG: 78%
• SVG: 55.2%
• GIF: 21.7%
• WebP: 9.2%
• ICO and BMP: 0.2 % each
• AVIF: 0.1 % (rounded up)
  

This means that less than 0.07% of all websites currently use the AVIF format. Whaaat? That's still ridiculously low. But Heyer, it's an opportunity for you to become a technological spearhead in the use of modern image formats. The graph on the right shows that usage is increasing month by month ... still in the per mille range. This will certainly accelerate soon.

It is interesting to note that not even 10 percent of all websites follow Google's recommendation for modern web formats. All the others are cutting back on PageSpeed and user experience and presumably also passing the Core Web Vitals, which has a negative impact on online visibility as a ranking factor.

AVIF vs WebP - which is better for your website?

Let's do another direct test to illustrate this. The image on the right from the TutKit.com head section was over 600 KB before it was converted to AVIF as a PNG file due to the transparencies.

It is now output by the system as a WebP file with 159 KB (our fallback solution!). Even if this is now optimized using a tool such as TINYPNG, which can also reduce WebP files, we are still at 128 KB. Still a 20 percent reduction.

As an AVIF file , which is displayed by default, the image only has 94 KB , i.e. just 59 percent of the size of the fallback WebP. In all tests, AVIF was able to beat the WebP format in terms of file size with the same optical quality.

What are the reasons for choosing AVIF over WebP?

• AVIF can handle transparencies and still retains better image quality with higher compression and lower file size.
• AVIF is already supported by almost 85% of all popular browsers. And the trend is still rising.
• Your website will load even faster thanks to AVIF compared to WebP. This is a particular advantage for image-heavy websites such as online stores with category pages, where a large number of product images are placed. Likewise, for websites where the images need to be displayed in high quality (portfolio websites, references, etc.), you can ensure high visual quality with a small file size.

Another hint is what caniuse.com writes directly on the WebP page: "AVIF and JPEG XL are designed to supersede WebP." AVIF and JPEG XL are designed to supersede WebP.

Before you ask yourself whether you might be backing the wrong horse with AVIF, because JPEG XL is probably also in the race, I can reassure you right away. At 0.08 percent, browser compatibility with JPEG XL is virtually non-existent.

You can already convert images to JPEG XL in Squoosh and it "only" has similar values to WebP (see image below).

AVIF is and remains the format winner. Use it promptly and take advantage of all the benefits for your websites too!

Squoosh.app - the best tool for converting JPG, PNG, WebP to AVIF

While we used to use TinyJPG or TinyPNG as an online tool in the team to optimize JPG, PNG or WebP files for use in websites, I am now a big fan of Squoosh from Google.

Squoosh is a free image converter developed by Google. The tool works as an online service, but also locally on your computer or server (node.js!). It can convert images into various formats, including JPEG, PNG, GIF and WebP. And best of all, it also converts your images to AVIF format.

The Squoosh image converter uses a variety of techniques to reduce image size without compromising quality. These include compressing color information, reducing resolution and removing redundant data.

Simply drag in the image and set the desired format. Just a few clicks and your image is converted and optimized.

This is what it looks like when you insert a WebP image and create it once as AVIF (left) and as JPEG XL (right) for conversion and compression. You can also use the slider to compare which quality level is the right one so that the visible quality is retained. In the default setting, one page is always the source file for comparison. So you have full control over the result.

You too can use Squoosh for your content maintenance and web development to reduce the size of your images thanks to modern web formats such as WebP or AVIF and to improve the loading times of your websites. You can also reduce the file size of your JPG files - similar to TinyJPG - if you want to upload them to social media, for example. The advantage over TinyJPG is that you have full control over the compression and can experiment with different optimization settings to achieve the best quality at the smallest possible size.

Here are some advantages of Squoosh:

• Supports a variety of image formats to convert to
• Uses a variety of techniques to reduce image size.
• Allows you to preview the compressed images
• Offers a range of optimization settings
• The tool is free and easy to use.

Despite all the positive features, there is one drawback: Currently, Squoosh can only process one image at a time and cannot batch process. I hope that this function will be added in the future.

Server-side batch conversion in php frameworks from images in JPG and PNG to AVIF and WebP

Here at TutKit.com, we ourselves have converted our images that were integrated into the portal as JPG and PNG files - more than 14,000 individual files - into AVIF format on the server side and also into WebP format as a fallback for older browsers. We have also solved this technically so that our editors can continue to upload images to the portal in JPG or PNG, as our designers are used to doing, and tag them there with metadata. The system then automatically embeds the images in AVIF and, as a fallback for all older (or non-supporting) browsers, displays them in WebP.

To ensure that it works on the server side, use the latest software versions. The new functions imagecreatefromavif and imageavif for the AVIF format are only available under php 8.1+, and if the GD extension was built with AVIF support. It requires libavif version 0.8.2 or higher.

Also pay attention to the compatibility of the operating systems. AVIF is provided with the libavif-dev/libavif-devel packages in the repositories:

• from Ubuntu 21.04
• from Debian 11
• from Alpine 3.13
• as of Fedora 34

Here is the PageSpeed evaluation for the mobile view of TutKit.com. While it is still relatively easy to get a value above 90 for desktop, it is really challenging for mobile views. We are still working on improving this score towards 100, because we know: PageSpeed is good for the user experience and therefore also contributes to our SEO success.

What sounds so fluffy here with the integration of AVIF here in our php framework Laravel, in the end added up to over 60 tickets in our JIRA tool, which were related to the conversion and integration (including research, development, bug fixing, testing). So while plugins significantly reduce the workload in a classic CMS such as WordPress, it can sometimes take three weeks for extensive individual development - as it did for us. The benefits of using AVIF are definitely worth it!

By the way: Maybe I'll write an article soon on why we prefer to use a php framework for portals like TutKit.com instead of WordPress or other CMSs.

Plugins for using AVIF in WordPress

As of September 2023, the WordPress CMS does not support the upload of AVIF images by default - unlike the Contao CMS, for example, which has supported AVIF since version 5.0.0. Therefore, you currently still need to take two steps when using WordPress to be able to output your images in AVIF.

1. Establish AVIF support for WordPress
2. Converting images from JPG/PNG/WEBP to AVIF

There are a number of WordPress plugins that allow you to use AVIF images on WordPress websites. Here are three plugins you can check out:

• AVIF Support: this plugin allows you to upload and display AVIF images in WordPress websites. It also supports the automatic conversion of JPEG and PNG images to AVIF images.
• Converter for Media: This plugin converts all images in your WordPress media library to AVIF images. It also offers a range of options to adjust the image quality and compression rate.
• ShortPixel Image Optimizer: This plugin optimizes images in your WordPress media library, including converting them to AVIF images. It also offers a range of other features to improve image quality and performance.

These plugins are a great way to take advantage of AVIF images on WordPress websites.

Click here for the AVIF support plugin - as of now, however, it only has 1,956 downloads and less than 800 installations - as you can see, AVIF is still completely unknown to WordPress users.

UPDATE 05.04.2024: With WordPress 6.5, WordPress finally supports AVIF! This means that support plugins are now only required for older versions of WordPress. All the more reason to update to WordPress 6.5 and higher.

The Local Image Sharp plugin for Strapi websites

We ourselves also use AVIF on our agency website 4eck-media.de, which uses the node.js-based Strapi CMS. The Local Image Sharp plugin for Strapi enables the use of AVIF images on Strapi websites. The plugin uses the sharp image processing toolkit to convert images into AVIF images.

The Local Image Sharp plugin offers you a range of functions, including

• Automatic conversion of images to AVIF images
• Adjustment of image quality and compression rate
• Support for various image formats

To install the plugin, download it from the Strapi Plugin Store and install it like any other Strapi plugin.

We have set it up so that we continue to upload the images to the Strapi system as JPG or PNG. The system converts the images to AVIF and WEBP in six different resolutions to display the correctly sized images in the browser as AVIF depending on the device (desktop, tablet, mobile). For older browsers, we also have a fallback solution here with WebP images, which are then displayed.

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 the two formats AVIF and WebP with the source of JPEG or PNG.

Alongside caching, the images in the modern web format were one of the most important boosters for the great performance of our agency website:

Note on meta thumbnails and structured data

As Google Images still does not support the AVIF format, we still specify the associated JPG file as the schema markup "image":. The meta thumbnail, which we specify for each product page in order to offer Google a preview image for the search snippet, also still contains the JPG format.

Better safe than sorry. Someone has already reported in the forums that the complete online visibility of the images disappeared after switching to AVIF. We cannot confirm this experience. Our online visibility has remained constant, but the Googlebot crawl requests for images have increased. Interestingly, we see that the Googlebot crawls through the WebP images that are available in the source code as a fallback for older browsers. Google then seems to crawl the WebP images for the index.

Therefore, my recommendation would be to also use the JPG source in the meta data for the thumbnails and also for the structured data.

Tools and software for editing AVIF images

Images are often and gladly edited, which is why compatibility with the AVIF format is of course desirable for common image editing programs. Sometimes you download an existing image from the website to make a change. It's good if your favorite image program can also open it, which is the most important function for AVIF compatibility. Even if it is then saved in a different format, it can be converted back to AVIF format using Squoosh or other tools.

Here is a list of image editing software for AV IF compatibility (as of September 2023)

• GIMP: Can import, edit and export AVIF since version 2.10.22.
• Photopea: can import and edit AVIF, but not export. Saving then possible in another file format.
• Affinity Photo: no support for AVIF
• Photoshop: no support, but a plugin helps to ensure compatibility.

AVIF plugin for Photoshop

Here you can find a plugin that enables Photoshop to open AVIF files.
https://github.com/0xC0000054/avif-format

The download is available in the Releases tab of the page.

Once you have downloaded the ZIP, add the Av1Image.8bi to the folder in which Photoshop searches for plug-ins. This is the folder for standard installations:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Or this folder: C:\Program Files\Adobe\Photoshop [version]\Plug-ins

Photoshop must be closed. Then start Photoshop so that the plug-in can load. You can then open AVIF files directly via drag & drop or the open dialog in Photoshop.

Displaying AVIF images in Windows

When I download images from the website because I want to edit them or need them for other purposes, I naturally want the file browser to be able to open and display them.

This is possible from Windows 10 onwards, but an extension is required. If you click on an AVIF file, you first get an error message.

The error message contains a link. If you click on it, you will be taken to the Microsoft Store for the AVIF extension. Download this. It is only 1.61 MB.

You can then open and display images in AVIF format in your Windows file browser.

Embed AVIF animations on websites instead of GIF animations

Here is an online converter to convert GIF animations into AVIF animations. https://mconverter.eu/convert/gif/avif/

While my test GIF is 787 KB in size, the AVIF animation is reduced to 411 KB.

My personal conclusion

In my opinion, AVIF is the best option for integrating modern image formats into websites. The advantages in compression and image quality are convincing. No other image format combines these properties and boosts loading times so much. Far too few website operators currently use the AVIF format, even though more than 85% of browsers support it and there is no technical obstacle to continuing to use WebP as a fallback. SEO is changing. Of course, AVIF alone is not enough to achieve top scores in PageSpeed Insights; other technical factors are also needed. When it comes to the integration of modern image formats, you will be able to achieve better results with AVIF compared to WebP.

Keyword-optimized content alone will no longer be enough, because AI is virtually flooding the internet with content, which means that many websites are vying for online visibility with their competitors with an upgraded content parity. Technical SEO and the existence of Core Web Vitals in particular are increasingly becoming a stronger ranking factor and therefore a tie-breaker because Google wants to offer users the best possible user experience. AVIF - along with other factors - is part of the solution to speed up your loading times, increase the user experience and improve online visibility in the long term.

Learn more about SEO, user experience, design and technical trends

If you are interested in these topics relating to SEO, user experience, AI tools and new web technologies, you can find out more in our training courses and in other articles here on the blog.

Now it's your turn

If you found this article worthwhile, please write us a review on Google. Every review supports us. If you need help with the use of AVIF in your web project, you can contact us via our agency page.