Cloudflare displays broken images on my website

That’s usually a sign of a plugin that converts images to WebP, and that’s incompatible with Safari.

What’s the domain?

Sir thanks for your reply and your concern but that’s truly correct this issue happens with safari so please it would be great if you help

Url: https://www.lablancaegypt.com/

Thanks in advance

1 Like

Hi Guys,

I using cloudflare but i had some issues with it as the images are not loading correctly but when i purge cloudflare cache the images displayed fine but after a couple of hours they would be broken again so i have to purge the cloudflare cache three or four times a day to keep my website images together so please if someone got a solution for this problem kindly help on that.

Just guessing here, but have you enabled a webp image optimisation tool on your origin server? If so, turn it off and do another cache purge…

Hey Sir thanks for your reply btw i’m using wordpress with wp-rocket it will be so helpful if you give me the instructions to solve this issue what is webp

Hi @user1703, combined your posts to make it more efficient for you to see the feedback.


Definitely a webp plugin:

% curl --dump-header - -o /dev/null https://www.lablancaegypt.com/wp-content/uploads/2020/03/La-Blanca0370-min-scaled.jpg --resolve www.lablancaegypt.com:443:35.x.y.240 2>&1 | grep content-type
content-type: image/jpeg 
% curl -H "Accept: image/webp" --dump-header - -o /dev/null https://www.lablancaegypt.com/wp-content/uploads/2020/03/La-Blanca0370-min-scaled.jpg --resolve www.lablancaegypt.com:443:35.x.y.240 
content-type: image/webp

Google is your friend to learn how to disable it. https://docs.wp-rocket.me/article/1282-webp

And as @cloonan said, Cloudflare offer a webp conversion on the fly as part of Polish.

2 Likes

But michael as i checked on wp-rocket webp is already disabled so should I enable that option w leave it as it is and modify another thing to solve this issue

The two commands I ran above were going directly to your origin server (with an IP address 35.x.y.240), Cloudflare was not involved.

They are both for the same image.

The second request passed an Accept header which indicates that I can support webp images, and that the server should give me a webp image if it can. As I received back a file with image/webp content type this is definitive that your server is doing on the fly conversion of images.

You either have a cache on your server, or some other plugin that is doing this conversion.

I can also see a x-proxy-cache-info header coming from your server. I don’t know enough about Nginx caching, but that cache might need to be cleared to resolve the issue.

But guys one huge update the source of the issue was wp-rocket cause I disabled the plugin and the images displaying correctly but does anyone have any idea which option causes this problem to close that

Hey guys sorry for that but i still got the same issue with safari even when wp-rocket is deactivated. So please any help on that. Btw my host is SiteGround

Hey everyone, I know this issue has been bothering lots of people and I tried multiple solutions that I found here and other websites but they didn’t work (Worker and Rules | html edit)

I use WP Rocket and Cloudflare but I closed the webp caching on Rocket. I’m still having the same problem. Moreover, Safari serves the images properly when I’m connected on my Wi-fi but the images break if I’m on 4G. Somebody also suggested this might an SSL issues but I added SSL insecure content plugin and still nothing happened.

I would really appreciate some help. Thanks

Cloudflare CDN cache does not support HTTP vary header so origin served webP won’t work behind Cloudflare for Safari web browsers (broken images) vote /feature request at Cloudflare CDN Cache To Support HTTP Vary Header. Turn off origin served webP if behind Cloudflare. CF Pro and higher plans have Polish with webP conversion which you can enable instead.

1 Like

I got the whole reason why it’s not working but I don’t understand the origin of webp image serving, and what exactly can I do to serve jpeg in case it’s Safari?

Thanks

I want to jump in here WordPress Rocket doesn’t convert images to webp. It has a webp caching feature under the media options if you don’t enable this browsers that don’t support webp will be served webp images.

Common plugins that serve webp images are

  • Optimus
    -imagify
  • ewww image optimizer

I disabled everything except Cloudflare and it’s still serving Webp images. I really don’t get it

You can check your htaccess file as some plugins add rewrite rules to the file to enable webp images.

List out your installed plugins as well

It’s a Cloudflare issue because when I clear cloudflare cache it serves jpeg, but then 5 minutes later it serves webp. Any ideas

Cloudflare doesn’t convert images as webp unless you’re paying for pro so it’s not a cloudflare issue.

/doesn’t convert images to WebP/