Webp images served to a browser that doesn't support webp

We recently migrated from Cloudinary to CloudFlare for all the images on our public platform and built a worker based on the documentation in https://developers.cloudflare.com/image-resizing/resizing-with-workers .
Our origin is a secured AWS S3 Bucket and contains jpeg images.

Our worker first presigns the requests to S3, then constructs a new fetch call using the presigned request and passes some resize options to the fetch method. We set the cache key manually to the url of the file at the origin. This all works well. TTL is one day.

To reduce the bandwidth consumption we also started setting the ‘format’ parameter, based on the Accept Header in the request. But as soon as we introduced this, we started receiving complaints from people on older versions of Safari, both on desktop and on iOS. Apparently the browser received webp images that it couldn’t render. I very much doubt that Safari would send an Accept header that mentions webp, if it can’t even render the format. A partner company also notified us that their Go based client that downloads images from our backend could suddenly not parse them anymore, for the same reason.

We have since run a few small experiments, where we activated webp support only for 4 url’s (out of 100k possible url’s). A Safari browser that had previously reported the problem received jpegs and could render them just fine. So we gained confidence that it would work again and activated it for all url’s. The problem reappeared and we immediately reverted the change.

We are clueless about the causes of this behaviour.

1 Like

There was a post from @michael
Cloudflare displays broken images on my website - #27 by michael where he mentioned to incorporate the transformations into the cache key.