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, example.com/image.png has a WebP at example.com/image.png.webp).

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.
2 Likes

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

2 Likes

That could actually work, good idea.

2 Likes

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