{"id":5794,"date":"2021-04-28T14:14:18","date_gmt":"2021-04-28T14:14:18","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=5794"},"modified":"2021-08-06T10:25:46","modified_gmt":"2021-08-06T10:25:46","slug":"avif-mime-type-delivery-apache-nginx","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/avif-mime-type-delivery-apache-nginx\/","title":{"rendered":"How to configure your web server to deliver AVIF images"},"content":{"rendered":"\n

ShortPixel Image Optimizer is able to create and serve AVIF files<\/a> 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).<\/p>\n\n\n\n

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<\/a> are downloading the images instead of displaying them, you have come to the the right place. <\/p>\n\n\n\n\n\n\n\n

Apache<\/h2>\n\n\n\n

Apache does not<\/strong> include by default the image\/avif<\/code> or image\/avif-sequence<\/code> MIME types in the standard configuration files. As a result, on a standard Apache configuration, the AVIF files might<\/strong> 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<\/code> header, which in most cases is set to application\/octet-stream<\/code>. And in order to have the AVIF images displayed by the browsers, they should have the content-type<\/code> header set to image\/avif<\/code>. <\/p>\n\n\n\n

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):<\/p>\n\n\n\n

<IfModule mod_mime.c>\n    AddType image\/avif                                  avif\n    AddType image\/avif-sequence                         avifs\n<\/IfModule><\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\"AVIF<\/a>
Set AVIF MIME type in Apache<\/figcaption><\/figure>\n\n\n\n
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!<\/p>\n\n\n\n
NGINX<\/h2>\n\n\n\n
NGINX does not<\/strong> include by default the image\/avif<\/code> or image\/avif-sequence<\/code> MIME types in their default configuration files, just like Apache. There was an attempt<\/a> 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<\/code> header, which in most cases is set to application\/octet-stream<\/code>, and that causes the file to be downloaded. Here as well, the correct content-type<\/code> header needs to be set to image\/avif<\/code>.<\/p>\n\n\n\n
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<\/strong>, which is usually located in the root of the NGINX installation (\/etc\/nginx\/), and add the two MIME types: image\/avif<\/code> and image\/avif-sequence<\/code>. You can add them just like in this image, preferably under the image\/webp<\/code> MIME Type:<\/p>\n\n\n\n
\"\"
How to set AVIF MIME Type in NGINX<\/figcaption><\/figure><\/div>\n\n\n\n
After saving the mime.types config file, all you have to do is reload NGINX<\/strong>, by typing:<\/p>\n\n\n\n
service nginx reload<\/code><\/p>\n\n\n\n
After NGINX has reloaded, the images should be properly delivered to the supporting browsers, according to the delivery method of your choice.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":5798,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5794","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-image-optimization"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=5794"}],"version-history":[{"count":7,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5794\/revisions"}],"predecessor-version":[{"id":5892,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5794\/revisions\/5892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/5798"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=5794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=5794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=5794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}