Cloudflare displays broken images on my website

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.

I’m sorry for the trouble really. Where exactly should I add the commands you added earlier (beginner here). Thank you

I disabled WP Rocket, and still I receive webp
please check this link some images are jpeg and webp

I don’t think we can be any more clear on this. This is coming from your server. Not Cloudflare. I know you’re frustrated, but you’re going to have to get a web developer to figure out your site’s settings.

1 Like