Strange behavior: random images not displayed

Hello!

When Cloudflare caching is turned on, random images are not displayed on Safari & Firefox iOs.

detailed Information:
We are using Siteground + SG Optimizer (Wordpress) + Cloudflare.
Within SG Optimizer you can re-create your images to webp images.
I checked and it is true that all images are available under the original and the .webp format:
website.com/wp-content/image.jpg
website.com/wp-content/image.jpg.webp

Since not all browsers are supporting webp images, siteground is either serving .jpg OR .webp
This is working fine when Cloudflare is not turned on.
But when Cloudflare being used, some random images are not displayed on safari anymore.

The Siteground Support verified with me over the couple last weeks and finally we came to the conclusion:
„Our developers reported that the issue is related to CloudFlare as there is a check from our server that checks if the web browser supports WebP and if it does not like Safari the original images are served. Unfortunately, this doesn’t seem to be work with CloudFlare. To test this I resolved the domain with my local hosts file directly on our IP address and the site loads properly in Safari.“

I continued researching and I checked on the loaded website
curl -IX GET website/wp-content/image.jpg
HTTP/2 200
date : Sat, 14 Mar 2020 10:59:05 GMT
content-type : image/webp

curl -IX GET website/wp-content/image2.jpg
HTTP/2 200
date : Sat, 14 Mar 2020 10:59:48 GMT
content-type : image/jpeg

The images that are displayed correctly on safari are fetched as JPEG and the images that are not displayed on safari are fetched as webp.

I verified by directly opening the URL of the image and safari downloaded the file, but couldn’t display the image. Then I opened the downloaded image on google chrome (which supports webp) and the image displayed normally.

I think this specific use case is very bad for many website providers, since many of them are not verifying if images are displayed on safari browsers, after the content is cached. So there may be A LOT OF broken websites without owners noticing it!

Any help?

Your first example of image.jpg is in webp format, but earlier you said webp images had a .jpg.webp extension. So why is image.jpg actually a webp file? That’s what’s causing the problem.

1 Like

On the page all images are embed as .jpgs. As explained the .webp is preferably fetched if the browser allows it, based on Sitegrounds server settings. This doesn’t work within Cloudflare.

The strange part is, that images are RANDOMLY not beeing displayed on Safari, sometimes image1.jpg works, sometime it doesn’t. Yesterday image1.jpg wasn’t displayed, today it is. Nothing was changed / edited / no manual emptied cache…

Also as explained all images are fetched as .webp even though the image is linked as .jpgs in the html.

As an example:

  • (SAFARI) Open landingpage on Safari -> image1.jpg is displayed normally
  • (SAFARI) Copy URL of image1.jpg as it is linked on the landingpage -> image is not display in browser (as it would do) but downloading the file as a .jpg which opens in chrome normally.
  • (CHROME) Open landingpage on Chrome -> image1.jpg is displayed normally
  • (CHROME) Copy URL of image1.jpg as it is linked on the landingapge -> image is displayed in browser normally
  • (CHROME) Saving image to desktop -> downloads as .webp

Very strange and random!

From your curl example, that first .jpg file is actually a WebP. But Cloudflare will cache the filename, regardless of content-type.

So…if a WebP browser requests an image that’s not in cache, Cloudflare will populate the cache with a WebP file that has the .jpg extension. When a non-WebP browser asks for that same .jpg file, and it’s cached as a WebP file, Cloudflare will deliver the WebP .jpg file.

Having your host manage this causes problems due to Cloudflare caching. I suggest you disable that feature.

Is there a clever page rule I can use to manage a behavior so only jpgs are cached, but webp are not?

This should make sure all images are always displayed on all browsers, they are fast because of cache and I still can make use of webp on new browser (but uncached)

No, there aren’t any Page Rules that go by filetype. The closest I can find would be a Worker, but it needs the server to have a separate WebP filename, which you might actually have.

Thanks!

I am gonna try to make this work with the sample. I will let you know!

I think I would still need to exclude images from caching with this worker, since it just fetches the webp but as you described before, it is storing the jpg (sometimes as a webp file in a .jpg format) in the cache and that’s why images are not displayed. Not sure how this worker is actually fixing this issue. Maybe you can elaborate more on this.

As far as I understand this worker is just saying: if this browser excepts webp fetch it, otherwise fetch the normal cached version (which may be an jpg file in a webp version). Correct?

We have exactly the same issue as you are reporting. It’s very random. It’s surprising that this support isn’t natively built into the caching at Cloudflare.