Custom Cache Key Demo

Same URL, different images — powered by Cloudflare cache sharding

Browser-specific hero image
🦖

Chrome / WebP

Chrome sends Accept: image/webp in its requests. The middleware detects this and rewrites to a WebP image of the Chrome Dino. Response includes X-Browser: chrome.

�

Firefox / JPEG

Firefox sends Accept: image/png,image/svg+xml,image/* without WebP. The same URL serves a JPEG fox image instead. Response includes X-Browser: firefox.

How Cache Sharding Works

  1. Browser requests /images/hero with its native Accept header
  2. Middleware checks if Accept containsimage/webp and rewrites to the correct static file
  3. Cloudflare Cache Rule includes accept header values (image/webp, image/png) in the cache key — two separate cache entries
  4. The correct image format is served and cached per browser

Tip: Check the X-Browser and X-Image-Format response headers on /images/hero to verify which variant was served.