Standard Content-Type Header for AVIF Images

Delivering AVIF (AV1 Image File Format) assets properly across the web requires the correct MIME type configuration so modern browsers can identify, decode, and display them. This guide explains the official standard Content-Type header for AVIF delivery, why proper header implementation is essential for web performance, and how to configure it across major web server platforms.

The Official AVIF Content-Type

The standard, IANA-registered Content-Type header for AVIF images is:

Content-Type: image/avif

For sequence or animated AVIF files (often using the .avifs extension), the standard MIME type remains:

Content-Type: image/avif

Why the Header Is Critical

Web browsers strictly rely on the Content-Type response header sent by the web server rather than the file extension to determine how to process a file.

If a server serves an AVIF image with an incorrect MIME type (such as application/octet-stream or a fallback like image/jpeg), several issues occur:

• Modern browsers may fail to decode the image and display a broken image icon.
• Browsers may attempt to download the file instead of rendering it inline on the webpage.
• HTML5 <picture> elements utilizing <source type="image/avif"> may skip the AVIF file entirely and load a larger fallback format, nullifying performance gains.

Configuring Common Web Servers

If your server does not recognize the .avif file extension out of the box, you must manually associate the extension with the standard MIME type.

Nginx

Ensure the mapping is defined in your mime.types file, typically located at /etc/nginx/mime.types:

types {
    image/avif avif;
}

Apache

Add the following directive to your .htaccess file or main configuration (httpd.conf):

AddType image/avif .avif
AddType image/avif .avifs

Node.js / Express

When serving static files or implementing custom endpoints, set the header explicitly:

res.setHeader('Content-Type', 'image/avif');

Cache and Content Negotiation Considerations

When implementing dynamic format selection—serving AVIF to supported browsers while serving WebP or JPEG to older clients from the same URL—always pair the Content-Type: image/avif header with a Vary header:

Vary: Accept

This instructs Content Delivery Networks (CDNs) and intermediary proxy caches to store separate versions of the resource based on the requesting browser's Accept header, preventing unsupported browsers from receiving cached AVIF responses.