Serving WebP images to eligible browsers

How do I correctly serve WebP to browsers that support WebP on Cloudflare Free plan?
All images have a copy in WebP format at different URLs (for instance, has a WebP at

I see two options:

  1. a correctly defined <picture></picture> with all the correct sources.
    <picture>: The Picture element - HTML: HyperText Markup Language | MDN
  2. a Worker that intercept the Accept header and returns the correct file at the same URL.

I’ve not tested this, but maybe a URL Rewrite transform rule.

If HTTP Request Header contains webp AND URI Path contains png OR jpg, and NOT webp, then concat .webp


That could actually work, good idea.


This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.