CloudFlare sending wrong Content-Type for images

Our website is broken in Safari browser (OK in Firefox and Chrome). We believe this is happening because CloudFlare is returning from cache a webp content-type for non-webp images.

When I investigate in Safari the headers for images, I notice that some images display fine and some have a little x mark. The ones with the little x mark look like this. They all have Content-Type: image/webp.

Summary
URL: https://www.reachinschools.org/wp-content/uploads/2019/09/fundraiserDinner27May19.jpg
Status: 200
Source: Disk Cache
Initiator:
news:1115

Request
No request, served from the disk cache.

Response
Content-Type: image/webp
Age: 255693
Expires: Wed, 25 Nov 2020 14:14:19 GMT
Cache-Control: max-age=10368000
Date: Fri, 31 Jul 2020 13:15:52 GMT
Content-Length: 250448
Accept-Ranges: bytes
Vary: Accept,Accept-Encoding
Last-Modified: Wed, 22 Jul 2020 12:24:18 GMT
cf-request-id: 04469cd436000016b539b55200000001
Server: cloudflare
cf-cache-status: HIT
expect-ct: max-age=604800, report-uri=“https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct
host-header: c2hhcmVkLmJsdWVob3N0LmNvbQ==
cf-ray: 5bb797338af316b5-SYD

Here is another example:

Summary
URL: https://www.reachinschools.org/wp-content/uploads/2020/07/SandraPhoto.png
Status: 200
Source: Disk Cache
Initiator:
news:797

Request
No request, served from the disk cache.

Response
Content-Type: image/webp
Age: 264120
Expires: Wed, 25 Nov 2020 11:22:08 GMT
Cache-Control: max-age=10368000
Date: Fri, 31 Jul 2020 12:44:08 GMT
Content-Length: 57768
Accept-Ranges: bytes
Vary: Accept,Accept-Encoding
Last-Modified: Wed, 22 Jul 2020 12:21:17 GMT
cf-request-id: 04467fc8b80000fd3283084200000001
Server: cloudflare
cf-cache-status: HIT
expect-ct: max-age=604800, report-uri=“https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct
host-header: c2hhcmVkLmJsdWVob3N0LmNvbQ==
cf-ray: 5bb768bace5ffd32-SYD

Looking at the ones which do display, they all have the correct image Content-Type. We are using Imagify to create some webp images and using <picture> tags for those images to display, but this issue will occur regardless the tags have <picture> or not.

I have selected to purge the CloudFlare cache, and turned on Development mode and everything I can to purge the CloudFlare cache, but this problem remains. Are there settings we need to change in our CloudFlare to resolve this problem? How can we stop this happening?

Our site is www.reachinschools.org.

We aren’t using Polish.

Both of your examples are delivered from the Cloudflare cache (cf-cache-status: HIT).

I was just looking at Imagify about this today. The bottom line is that Cloudflare caches by filename. If your server delivers a WebP image with a .jpg extension, that’s what Cloudflare will cache, and Safari doesn’t (yet) support WebP. You’d have to disable that feature to stop the Safari image problem. At least until Big Sur comes out with support for WebP.

Even when we turn off the feature in Imagify and purge the origin server and CloudFlare cache we are seeing the same issue in Safari. Is there a way to check that this is not caused by the CloudFlare cache not clearing?