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.
If you are having trouble after creating AVIF files on your site and the supporting browsers are downloading the images instead of displaying them, or no image is displayed at all, there is a solution available, and it changes depending on the web server you are using.
- These instructions are for advanced users only. If you need assistance, we kindly ask you to contact your hosting provider.
- After making all the necessary changes, make sure to clear the cache of your website.
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>
It should look like this:
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 like in the image below, 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.