How to create and serve AVIF files using ShortPixel Image Optimizer

Using ShortPixel Image Optimizer (SPIO), you can create AVIF images alongside the existing images when optimizing them.

You could say that the most popular image file formats for the web are currently JPG and PNG. A few years ago, WebP, developed by Google, came on the market, delivering images that are  30% smaller than JPG but have the same image quality. AVIF promises images that are 50% smaller than JPG, with the same image quality.

Read more about why AVIF is good for your website here: What is AVIF and why is it good? - ShortPixel Blog

How to create AVIF images?

Just enable the " Create AVIF versions of the images" option in the "Advanced" section of the ShortPixel settings in your WordPress dashboard.

What to do if I want to create AVIF but I already optimized my images?

First of all, make sure you  update SPIO to the latest version. This is very important because version 5.0 allows you to create AVIF files for images that have already been optimized. With older versions, you'll have to restore your images and optimize them again, spending credits unnecessarily.

Once SPIO is updated to the latest version, follow these three steps:

1. Go to Media > Bulk ShortPixel and click on "Start optimizing".
2. On step 1, under "Optimize", make sure the toggle for "Media Library" is turned on. Then, under "Options", select the option to create AVIF files.
3. Follow the further instructions.

For more information, please read this article.

How to deliver the AVIF images on the front-end?

Creating AVIF images is only the first step! You also need to make them available to all your users. Fortunately, SPIO provides two different methods for doing this. First,  enable the "Deliver the next generation versions of the images in the front-end" option.

Then choose one of the following methods:

1. Using the <PICTURE> tag syntax: This method alters the page code.
2. Without altering the page code (via .htaccess): With this method, a new block of code is inserted into the .htaccess file. This is the recommended option (but usually not compatible with your CDN or if you use NGINX).

Troubleshooting the AVIF delivery

Server not configured properly

If you get this message on the WordPress admin dashboard...

Avif server test failed. Your server might not be configured to display AVIF files properly. Serving Avif might cause your images to not load. Check your images, disable the AVIF option or update your web server configuration.

...then please check this article: I get the message "Avif server test failed". How do I configure my web server to deliver AVIF images?

How to check if your AVIF images are served correctly

You can use the browser's  developer tools to test if your images are served as AVIF. First, go to your website and then press F12. A window similar to the one below should appear. Next, click the Network tab and then click the Img filter.

Press  F5 on Windows or CTRL + R on Mac to reload the page, then scroll down to load all images:

You should see all images with the Type   avif, regardless of the extension of the file. There is a possibility that in this case you will also see some other irrelevant things, like  svg+xml or text/html. You can ignore that.

If you can see the Type   avif, congratulations! You are now successfully serving AVIF images to compatible web browsers.

What to do if AVIF images are not served correctly

If you have problems with SPIO's delivery methods, take a look at these articles first:

• If you selected "Using the <PICTURE> tag syntax", check this: The "Using the <PICTURE> tag syntax" option doesn't work; next-gen images won't show up.
• If you selected "Without altering the page code (via .htaccess)", check this: Caveats of delivering WebP or AVIF images via .htaccess

If you still cannot solve the problem, or if our delivery methods do not meet your needs, you should try an alternative solution for serving AVIF images, such as...

• replacing ShortPixel Image Optimizer with ShortPixel Adaptive Images (SPAI). SPAI uses a different method to optimize your images and does not make AVIF delivery dependent on your server. If you want to learn more about SPAI, read this article.
• configuring your NGINX server (if relevant) to transparently serve AVIF files: Configure NGINX to transparently serve AVIF files when supported.
• using another plugin to deliver the AVIF files generated by ShortPixel. If you choose this option, remember to uncheck the "Deliver the AVIF versions of the images in the front-end" option in your ShortPixel settings.

How to check if the AVIF files are physically on your server

Using FTP, SSH, the cPanel File Manager or by simply installing the WP File Manager plugin, you can check in the /wp-content/uploads/ path to see if a .avif counterpart has been created for your images.