I get the message "Avif server test failed". How do I configure my web server to deliver AVIF images?

Follow this guide below if you receive the following error message:

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.

ShortPixel Image Optimizer is able to create and serve AVIF files. The delivery can be done in two different ways: using the <PICTURE> tag syntax or without altering the page code (via .htaccess).

The recommended method is via .htaccess, but it’s only available if you are using Apache or LiteSpeed as web server. If you are using NGINX or if you are having trouble after creating AVIF files on your site and the supporting browsers are downloading the images instead of displaying them, there is a solution available.

Apache

Apache does not include by default the image/avif or image/avif-sequence MIME types in the standard configuration files. As a result, on a standard Apache configuration, the AVIF files might be delivered when an HTML page is requested. But when visited directly, most probably they won’t work. In some cases, the browser will try to download and save the file because they might inherit the default content-type header, which in most cases is set to application/octet-stream, and in order to have the AVIF images displayed by the browsers, they should have the content-type header set to image/avif.

The solution to this is very simple, and you need to add these 4 lines to the .htaccess file of your site (which is usually located in the root folder of the site):

<IfModule mod_mime.c>
    AddType image/avif                                  avif
    AddType image/avif-sequence                         avifs
</IfModule>

NGINX

NGINX does not include by default the image/avif or image/avif-sequence MIME types in their default configuration files, just like Apache. There was an attempt to add a patch for this, but it looks like it was rejected. The result is that on a standard NGINX configuration, the AVIF files will be delivered when an HTML page is requested, but when visited directly, they will inherit the default content-type header, which in most cases is set to application/octet-stream, and that causes the file to be downloaded. Here as well, the correct content-type header needs to be set to image/avif.

The solution to this is also quite simple, as long as you have access to the NGINX configuration files. You basically need to look for the file named mime.types, which is usually located in the root of the NGINX installation (/etc/nginx/), and add the two MIME types: image/avif and image/avif-sequence. You can add them just like in this image, preferably under the image/webp MIME Type:

image/avif              avif;
image/avif-sequence     avifs;
	

After saving the mime.types config file, all you have to do is reload NGINX, by typing:

service nginx reload

After NGINX has reloaded, the images should be properly delivered to the supporting browsers, according to the delivery method of your choice.