WEBPery

How CDNs serve WebP via Accept-header content negotiation, why Vary: Accept matters for caching, and which CDNs convert images automatically.

WebP and CDNs: Content Negotiation via the Accept Header

Content delivery networks serve WebP through content negotiation: the browser advertises image/webp in its Accept header, and the CDN returns a WebP variant from cache. The mechanism is simple, but the Vary: Accept header is essential to keep caches from serving the wrong format. This guide explains negotiation, caching, and the CDNs that convert images automatically.

For the format itself, see What is WebP?. For its MIME type, see WebP Media Type and MIME Type: image/webp Registration.

What is Accept-header content negotiation?

Accept-header content negotiation is the browser and server agreeing on an image format per request. The browser sends an Accept header listing the formats it supports; the server or CDN reads it and returns the best available format. A WebP-capable browser sends Accept: image/webp and receives WebP at the same URL a JPEG would use.

This keeps one URL per image while serving different formats to different browsers. No <picture> markup or filename change is required.

How do CDNs serve WebP automatically?

Image-optimising CDNs convert source images to WebP on first request, cache the result, and serve it to supporting browsers. The CDN reads the Accept header, generates a WebP variant if one is not cached, and stores it keyed by format. Subsequent requests are served from the edge cache.

The original JPEG or PNG stays on the origin unchanged. The CDN handles conversion, caching, and per-browser format selection.

Why is the Vary: Accept header essential?

The Vary: Accept header tells every cache that the response depends on the request's Accept header. Without it, a shared cache may store a WebP response and later serve it to a browser that cannot decode WebP, or cache a JPEG and deny WebP to browsers that support it.

Vary: Accept must accompany every negotiated image response. The same requirement applies to origin servers — see Serving WebP via Apache and Nginx. Omitting it produces broken images or lost savings depending on which variant the cache happened to store first.

Which CDNs convert images to WebP?

Several CDNs convert to WebP automatically through Accept-header negotiation. Each fetches the origin image, produces WebP and often AVIF, and serves the best format the browser supports.

The common options are:

  • Cloudflare — via Polish and Image Resizing.
  • Cloudinary — automatic format selection with f_auto.
  • Imgix — automatic format with auto=format.
  • Fastly — the Image Optimizer with auto=webp.
  • Akamai — Image and Video Manager.

For Cloudflare specifically, see How to Enable WebP on Cloudflare Using Polish.

Does CDN WebP conversion affect SEO?

CDN WebP conversion does not harm SEO and helps page speed. The image URL, alt text, and markup are unchanged, so image indexing is unaffected. Smaller WebP files improve load time, which benefits Core Web Vitals and, indirectly, ranking.

Confirm the CDN returns 200 with Content-Type: image/webp for supporting browsers and the original format for others. See Image SEO Best Practices and Core Web Vitals & Images.

When should you negotiate at the CDN versus in HTML?

Negotiate at the CDN when you want one URL and automatic conversion; use the <picture> element when you control the variants and want explicit format ordering. CDN negotiation is lower maintenance. The <picture> element gives precise control and works without an image CDN.

Many sites use both: a CDN for automatic conversion, and <picture> only where art direction or strict format control is needed. See How to Serve WebP Images in HTML Using the picture Element.

Where to go from here

CDN content negotiation is the lowest-maintenance way to serve WebP at scale: one URL, automatic conversion, and per-browser format selection — provided every response carries Vary: Accept.

What is WebP? A Complete Guide to the WebP Image Format

WebP is Google's image format with lossy and lossless compression. Learn how it works, browser support, file sizes, transparency, and animation.

WebP Transparency: Alpha Channel Support

WebP supports an 8-bit alpha channel in lossy and lossless modes. How transparency is stored, the ALPH chunk, file-size cost, and PNG comparison.

srcset and WebP: Responsive Images with Format Fallback

Use srcset and sizes to serve responsive WebP at the right resolution per device, with a JPEG fallback. Width and density descriptors explained.

WebP File Structure: RIFF Container and Chunk Format

How a WebP file is structured: the RIFF container, the WEBP FourCC, and VP8, VP8L, VP8X, ALPH, ANIM and ANMF chunks. The byte layout explained clearly.