How to create and serve AVIF files using ShortPixel Image Optimizer

Starting with version 4.22 of the ShortPixel Image Optimization plugin, we added the possibility to also create an AVIF image alongside the existing images when optimizing them with our service.

We could say that, currently, the most popular image file formats for the web are JPG and PNG. A few years ago, WebP came on the scene, developed by Google, delivering images 30% smaller than JPG, keeping the same image quality. AVIF promises images 50% smaller than JPG, while still keeping 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?

Enable the option " Create AVIF versions of the images" in the plugin settings (Settings > ShortPixel > Advanced), and the AVIF version of the images will be created once you optimize your images, or separately with plugin version 5.0.

Prior to SPIO version 5.0, the AVIF versions of the images are only generated when the images are being optimized. So if you need to create the AVIF versions of the images after you optimized the images, the easiest way would be to upgrade to version 5.0, or:

  1. Restore the images to their originals
  2. Make sure you activate the option “Create AVIF versions of the images” located under Settings > ShortPixel > Advanced.
  3. Relaunch the bulk optimization.

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

You are also able to display AVIF versions of the images on the pages of your WordPress website using 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). This option will insert a new block of code into the .htaccess file. This is the recommended option (but incompatible with your CDN or if you use NGINX).

Please have a look at this article to know more about which one you should use: Which WebP/AVIF files delivery method is the best for me?

If neither of these options suits your needs, or you experience issues with them, you should try an alternative solution for serving AVIF images like:

  • if you have an NGINX server, configure NGINX to deliver AVIF files when supported
  • using another plugin to deliver the AVIF files created by ShortPixel. If you choose this way, remember to uncheck the option "Deliver the next generation versions of the images in the front-end".

How to make sure that the AVIF images are served correctly

You can test it using the Developer Tools of Google Chrome. First, go to your website and then press F12. A window on the bottom will appear, like this:

Then press CTRL + R on Mac or F5 on Windows into the window to reload the images on the website. It will look like this:

You should see all the images with type AVIF, regardless of the extension of the file. There’s a chance you will also see some other irrelevant stuff, like  svg+xml or text/html. You can ignore it.

If you can see the AVIF extension type, then you are now successfully serving AVIF images to compatible web browsers.

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

Using the WP File Manager plugin, you could check inside the path wp-content/uploads/ if your images have an .avif counterpart.

You could also make the same test using cPanel File Manager, FTP or SSH.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us