image formats
Content negotiation
A server technology that automatically delivers the best image format each browser supports without changing HTML.
What is Content negotiation?
Content negotiation is a server-side mechanism that automatically serves the optimal image format to each browser by reading the HTTP Accept header and delivering the most efficient format that browser supports. When a browser requests an image, it sends an Accept header listing supported formats in preference order, and the server responds with the best available format without requiring any HTML changes. This allows a single image URL to deliver AVIF to modern browsers, WebP to older ones, and JPEG to legacy browsers automatically.
Importance of Content negotiation
Content negotiation eliminates the complex HTML picture element syntax while ensuring every visitor gets the smallest possible image file for their browser. Without automatic image format selection, you must either use outdated JPEG for all browsers (missing 50-80% file size savings) or maintain complex responsive image code that breaks easily. Content negotiation solves this by handling format optimization server-side, reducing bandwidth costs and improving page load speeds without developer maintenance.
Content negotiation in Practice
A Chrome browser in 2026 sends Accept: image/avif, image/webp, image/apng, image/svg+xml, image/* when requesting images. A content negotiation server reads this header and serves AVIF (typically 50% smaller than JPEG) to Chrome, WebP to Safari (which supports WebP but not AVIF), and JPEG to any legacy browser. Image CDNs like Cloudflare Images implement this automatically — you upload one source image and the CDN serves the optimal format per visitor based on their browser capabilities.
Content negotiation Best Practices
- → Ensure your server includes the Vary: Accept response header so CDNs cache separate versions for different browsers.
- → Use image CDNs (Cloudflare Images, Cloudinary) that implement content negotiation automatically rather than building custom server logic.
- → Test your implementation across different browsers to verify AVIF serves to Chrome, WebP to Safari, and JPEG to older browsers.
Example of Content negotiation
Related Terms
Frequently Asked Questions
What is content negotiation for images?
Content negotiation for images is a server technology that automatically delivers the best image format each browser supports by reading the HTTP Accept header. The server serves AVIF to modern browsers, WebP to older ones, and JPEG to legacy browsers using a single image URL. This eliminates the need for complex HTML picture elements while ensuring optimal file sizes for every visitor.
How does HTTP Accept header work for images?
The HTTP Accept header tells the server which image formats a browser can display, listed in preference order. Chrome sends Accept: image/avif, image/webp, image/apng, image/svg+xml, image/* indicating it prefers AVIF first, then WebP, then other formats. The server reads this header and responds with the most efficient format the browser supports, automatically optimizing file size without HTML changes.
What is the difference between content negotiation and the picture element?
Content negotiation handles image format selection server-side automatically, while the picture element requires manual HTML coding for each responsive image. Content negotiation uses a single image URL that serves different formats based on browser capabilities, whereas picture elements need multiple source tags with explicit format declarations. Content negotiation is simpler to implement and maintain, but requires server-side configuration or CDN support.