Serve AVIF/WebP via Accept Headers: A Practical Guide

Why Content Negotiation Matters for Modern Image Formats

Modern image formats like AVIF and WebP offer significant file size reductions compared to traditional formats like JPEG and PNG. AVIF can be up to 50% smaller than WebP, which itself is typically 25-35% smaller than JPEG at equivalent quality. However, not all browsers support these newer formats, and even among supporting browsers, capabilities vary.

Content negotiation solves this compatibility problem by serving the optimal format for each client. When a browser requests an image, it sends an Accept header indicating which formats it can handle. Your server or CDN can inspect this header and serve the best available format that the browser supports, all while maintaining a single URL structure.

How Accept Headers Work for Image Format Selection

When a browser makes an HTTP request for an image, it includes an Accept header that lists the image formats it can display, along with quality values (q-factors) indicating preference. For example, a modern Chrome browser might send: Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

The server can parse this header and determine the best format to serve. The process typically involves checking for AVIF support first (the most efficient format), then WebP, and finally falling back to JPEG or PNG if neither modern format is supported.

// Example Accept header from a modern browser
Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

CDN-Based Content Negotiation Implementation

Many content delivery networks offer built-in content negotiation features that automatically handle format selection without requiring server-side code changes. This is often the simplest approach as it offloads the logic to the edge network.

Cloudflare Polish, for example, can automatically serve WebP or AVIF formats to supporting browsers when you enable the Polish feature with 'WebP' or 'AVIF' option. Similarly, Cloudinary and ImageKit provide automatic format delivery based on Accept headers through their transformation APIs.

1. 1Choose a CDN with content negotiation supportSelect a CDN like Cloudflare, Cloudinary, or ImageKit that offers automatic format selection based on Accept headers.
2. 2Upload multiple format versionsProvide AVIF, WebP, and fallback (JPEG/PNG) versions of your images, typically with the same filename but different extensions or in separate directories.
3. 3Configure CDN settingsEnable the appropriate features (e.g., Cloudflare Polish) and ensure your CDN is configured to respect Accept headers for format selection.
4. 4Test across browsersVerify that different browsers receive the appropriate formats by checking response headers and file sizes.

Server-Side Implementation with Nginx and Apache

If you're not using a CDN with built-in content negotiation, you can implement it directly on your web server. This approach gives you full control but requires more configuration.

Nginx can use the ngx_http_image_filter_module or custom map directives to handle format selection. Apache can use mod_rewrite rules or content negotiation features in .htaccess files. Both approaches involve checking the Accept header and serving the appropriate file while maintaining the same URL.

# Nginx configuration example
map $http_accept $webp_suffix {
    default   "";
    "~image/webp" ".webp";
    "~image/avif" ".avif";
}

server {
    location /images/ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

Caching and Vary Headers Considerations

Proper caching is crucial for content negotiation performance. Since the same URL can serve different content based on the Accept header, you must use the Vary: Accept header to indicate this to caches.

Without the Vary header, a CDN or browser might cache the first format received and serve it to all users, regardless of their format support. This could mean serving AVIF to browsers that don't support it or JPEG to browsers that could handle WebP.

// Example response headers for content negotiation
HTTP/1.1 200 OK
Content-Type: image/avif
Vary: Accept
Cache-Control: public, max-age=31536000

Testing and Validation Strategies

After implementing content negotiation, thorough testing is essential to ensure it works correctly across different browsers and devices. You need to verify that each browser receives the optimal format and that fallbacks work properly.

Use browser developer tools to inspect network requests and responses. Check the Accept header sent by the browser and the Content-Type of the response. You can also use command-line tools like curl to simulate requests with different Accept headers.

1. 1Test with different Accept headersUse curl to simulate various browser capabilities: curl -H 'Accept: image/avif' https://yoursite.com/image.jpg
2. 2Verify response Content-TypeCheck that the response MIME type matches the expected format for the given Accept header.
3. 3Test fallback behaviorEnsure browsers without modern format support receive JPEG/PNG fallbacks instead of broken images.
4. 4Check caching headersVerify that Vary: Accept is present and Cache-Control settings are appropriate for each format.

Automate image optimization with Optimagio

Doing this by hand for every image does not scale. Optimagio optimizes and converts your images (WebP and AVIF) automatically across your API, web app, and CMS — so every page ships the smallest possible files without manual work. See plans and pricing →