How to configure your web server to deliver AVIF images

ShortPixel Image Optimizer is able to create and serve AVIF files since version 4.22. 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 as web server. If you are using NGINX, and if you are having trouble after creating AVIF files on your site and the supporting browsers are downloading the images instead of displaying them, you have come to the the right place.

Table of Contents hide

Apache

NGINX

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 and 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 site’s .htaccess file (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>

AVIF MIME-type Apache — Set AVIF MIME type in Apache

After saving the .htaccess file, the AVIF files should have the correct Content-type header and the browsers that support this image format should be able to open them with no more issues!

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: