How to Configure AVIF MIME Types in Apache and Nginx

Serving AVIF (AV1 Image File Format) images requires your web server to deliver the correct image/avif MIME type in the HTTP response headers, or browsers may fail to render them. This guide outlines the essential server modules and configuration directives needed to correctly identify and serve AVIF files on both Apache and Nginx web servers, ensuring optimal image delivery and browser compatibility.

The Correct AVIF MIME Types

Web browsers recognize AVIF media using two standard MIME types:

• Standard AVIF images (.avif): image/avif
• Animated AVIF sequences (.avifs): image/avif-sequence

Without explicit server mapping, servers typically deliver these files as application/octet-stream or text/plain, which breaks rendering in modern browsers.

Configuring Apache for AVIF

Apache does not require third-party compiled extensions to handle AVIF files. Instead, it relies on its standard, built-in MIME handling module.

Required Module

• mod_mime: This module is enabled by default in virtually all standard Apache installations. It maps file extensions to corresponding MIME type headers.

Configuration Steps

To map AVIF extensions, add the AddType directives to your server configuration. You can place these lines in your server-wide httpd.conf/apache2.conf, your virtual host configuration, or an .htaccess file in your website's root directory:

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

Alternatively, you can append the mappings directly to your server's central mime.types file (often located at /etc/mime.types or /etc/apache2/mime.types):

image/avif              avif
image/avif-sequence     avifs

After modifying global Apache configuration files, reload Apache to apply the changes:

sudo systemctl reload apache2    # Debian/Ubuntu
sudo systemctl reload httpd      # RHEL/CentOS

Configuring Nginx for AVIF

Nginx handles MIME types natively through its core HTTP module (ngx_http_core_module), meaning no external modules or plugins are required.

Required Module

• ngx_http_core_module: This is a core part of Nginx that includes the types directive.

Configuration Steps

Nginx relies on an external mapping file, typically loaded inside the http {} block of nginx.conf via include /etc/nginx/mime.types;.

Method 1: Update the Global mime.types File (Recommended)

Open /etc/nginx/mime.types in a text editor and check if AVIF is already defined. If not, add it inside the types { ... } block:

types {
    image/avif              avif;
    image/avif-sequence     avifs;
    # other types remain unchanged
}

Method 2: Define Locally in nginx.conf or Server Block

If you do not have permission to modify /etc/nginx/mime.types, you can add the definition inside your http {} or server {} block:

http {
    include /etc/nginx/mime.types;

    # Fallback definition for AVIF
    types {
        image/avif avif;
        image/avif-sequence avifs;
    }
}

Test the Nginx configuration and reload the service:

sudo nginx -t
sudo systemctl reload nginx

Verifying AVIF MIME Type Delivery

To confirm that your server sends the correct header, test a live AVIF asset using curl:

curl -I https://example.com/image.avif

Look for the following header in the response:

Content-Type: image/avif

If image/avif appears, the server is correctly configured to identify and serve AVIF media.