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.

NGINX

NGINX does not include by default the image/avif or image/avif-sequence MIME types in their configuration files. 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.

The solution to this is rather simple, as long as you have access to the NGINX configuration files. You basically need to look for the file 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:

How to set AVIF MIME Type in NGINX

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.