Cloudflare displays broken images on my website

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/

Correct i blame Swype keyboard

1 Like

I found in htaccess some line of code changing to webp but I have the same line on my other website but it strictly serves jpeg. I know it’s only for pro that’s why im confused

The code was likely added from a plugin like one of the ones I listed above. Cloudflare doesn’t add code to your htaccess file so it was likely an image optimization plugin.

Okay I’ll check it but the only plugin that comes to my mind is WP Rocket and I don’t have it on my other website. If I don’t find the plugin should I remove that line?

Use the commands I posted above, inserting your own values, and make requests to your Origin looking for a JPG, and then asking for the same JPG in WebP format. What results do you get?

Cloudflare will cache the first request. If that request asked for webp, then webp is going to be cached, and vice versa. The second request will get that cached response irrespective of the client capability.

It’s the exact same issue as if your origin was serving a variant catchable response based on the screen size of the first request.

Basically, if you are varying responses based on any parameter (device, location, language, browser etc.) then you need to be aware of how the content will be cached, and make appropriate configuration to deal with that.