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.

This topic was automatically closed after 30 days. New replies are no longer allowed.

Hello!

In this original Post I reported issues with WEBP images not being displayed, especially with Siteground (but not only).

Siteground is now officially posting a Solution about this.

They refer to a Medium article of Daniel Schneider, which is linked here.

I like the long solution involving Cloudflare Workers, but there is also a short hack, involving the WebP plugin of Wordpress!

Cheers!

Or if you’re on a paid plan simply enable WebP in Polish and have Cloudflare do the conversions.

Of course. But I find it strange, that Cloudflare is not solving this “out of the box”. I mean thinking the impact it has and how many users do not even know what is happening, makes this quite a nasty problem.
Quoting from the Article linked above " To make you understand the depth of the problem Cloudflare MAY BE caching .webp images and therefore at least 2 out of 10 customers* are seeing a broken website."

So accepting that up to 20% of users see a broken website is strange.

Is there any way @cscharff you can bring in numbers on how often Cloudflare is delivering broken webp images? Can you measure that?

Caching lets people shoot themselves in the foot in many ways. So if you’re changing a default configuration, you need to think it through. Such as Cache Everything. Sounds great…until you realize that you might end up caching something others shouldn’t see.

I think that Medium article unfairly targets Cloudflare. Any Pull CDN will do this. Most likely push CDNs as well.

What technical fix are you suggesting Cloudflare do in this case?

1 Like

Most non-techy ppl will just turn something on, without the understanding what will happen. So in this case, it should just work out of the box (especially if it is just caching, which is natively integrated in many hosting packages nowadays).

I don’t see how the article is targeting anyone? It helped me and others to fix the problem.

Technical fix: Maybe what the worker does, natively integrated. Like just checking if a .jpg is really a .jpg or a .webp OR just caching non-webp images until all major browsers support them.

And this is where professionals come in who should maintain your site and associated services. Unfortunately most people believe this is not necessary (unlike with plumbers for example) and then they find themselves with broken sites.

Cloudflare’s approach is relatively straightforward. They simply cache whatever you send them. If you send them the wrong format, then that wrong format will be cached. There is a native solution to that, which was already mentioned by @cscharff. If that is not an option, @sdayman’s suggestion is spot on.

2 Likes

For your first suggestion, and then what? Do a special delivery of the Non-WebP image? Then Safari wouldn’t be receiving cached images and someone would write a pissy headline how Cloudflare slows down 20% of your image traffic without you knowing it. On the flip side, if Cloudflare caches non-WebP images, someone will write a pissy headline about how Cloudflare sends non-optimized images to 80% of your visitors.

1 Like

I think the main point I am trying to make is: a newer approach would be a clear controlled behavior and the current approach is a non-clear uncontrolled behavior.

A good user experience means: the outcome is expected, which in this case is not true.

There would be easy technical fixes to this also involving delivering webp AND jpg depending on the browser. For Cloudflare’s infrastructure for sure not a difficulty at all.

Best case of course would be if all major browsers (Apple) would support webp

There are easy fixes. Either don’t cache or use the built-in function. I am sorry but we are slightly going in circles.

1 Like

Wish granted.