Content-Encoding Headers for AVIF Delivery

This article outlines how to configure the Content-Encoding HTTP header when serving AVIF files from a web server. It explains the relationship between AVIF's native media compression and HTTP transport compression, provides the correct header values for both standard delivery and pre-compressed static assets, and includes configuration examples for Nginx and Apache.

The Standard Rule: Do Not Set Content-Encoding

AVIF is an image format based on the AV1 video codec and is already heavily compressed. Applying HTTP transport compression—such as Gzip, Brotli (br), or Zstandard (zstd)—to an AVIF file generally yields negligible size reductions or can even increase file size due to compression overhead.

Under normal circumstances:

Ensure your server's dynamic compression modules (such as mod_deflate in Apache or gzip in Nginx) exclude image/avif to save server CPU cycles.

Serving AVIF Pre-Compressed with Brotli or Gzip

If you generate statically pre-compressed versions of your files during a build step (for example, photo.avif.br or photo.avif.gz) and your automated tests verify that transport compression achieved a measurable reduction in bytes, configure your server to declare the transport encoding properly.

When serving these files:

  1. Content-Type: Set to image/avif. The browser's image decoder needs to know the payload is an AVIF image once decompressed.
  2. Content-Encoding: Set to the algorithm used for the transport wrapper (e.g., br, gzip, or zstd).
  3. Vary: Include Accept-Encoding so intermediate proxies and CDNs do not serve compressed files to clients that cannot decompress them.

Nginx Configuration

To serve pre-compressed files using the ngx_http_gzip_static_module or ngx_brotli static module:

# Map MIME type
types {
    image/avif avif;
}

# Ensure dynamic compression excludes AVIF
gzip_types -image/avif;
brotli_types -image/avif;

# Enable static pre-compressed file serving if available
location ~* \.avif$ {
    gzip_static on;
    brotli_static on;
    add_header Vary Accept-Encoding;
}

When a request arrives with Accept-Encoding: br and image.avif.br exists, Nginx automatically serves the .br file, sets Content-Encoding: br, and sets Content-Type: image/avif.

Apache Configuration

In Apache, ensure AVIF files are excluded from dynamic DEFLATE filters while allowing mapped pre-compressed files:

# Define MIME type
AddType image/avif .avif

# Prevent dynamic compression on AVIF
SetEnvIfNoCase Request_URI \.avif$ no-gzip dont-vary

# Serve pre-compressed Brotli if the client supports it and file exists
<IfModule mod_headers.c>
    RewriteCond %{HTTP:Accept-Encoding} br
    RewriteCond %{REQUEST_FILENAME}\.br -f
    RewriteRule ^(.*)\.avif$ $1\.avif\.br [L]

    <FilesMatch "\.avif\.br$">
        ForceType image/avif
        Header set Content-Encoding br
        Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>

Summary of Correct Header Combinations