pictures are not displayed correctly

Hello, I have a problem. Since I use Cloudfare my pictures are not displayed correctly. These are the pictures of Woocommerce products.

Hard to say without knowing the domain. Would you Kind to post it?
That could be anything check your browser’s dev tools for any errors.

bug on mac osx safari & chrome and iphone 7 & 11 max pro on safari.

I deactivated the caching of cloudfare, unfortunately the error is still there.

I do not see any errors when I try to browse to it. Used chrome on windows.
Does the development console show any errors?

I have checked all logs Unfortunately, I find no errors. When I empty the browser cache the images are displayed correctly again. The error is also on other smartphones, but not always. Why is that so?

Thanks for your help!

If this is true this shows this problem is not related to CloudFlare, therefor this normaly is the wrong place to ask. But lets try to see what we can do.

Have you tested it on these devices on Chrome?
If so: did it work there, or also buggy?

Explanation: if its working on Chrome, but not on Safari, this is a Safari related problem and we are one step closer to the solution.

As you use .png Pictures this is unusual, as Safari does normaly not have problem with them, but with webp.

Pls try also this: LINK

1 Like

Your site is using WebP format some images, as can be verified by checking the header “content type” for the image files.

image

This won’t work with Cloudflare, as discussed in more detail here.

You’d need to turn off the image optimization you are using at the origin server. You can, optionally, use Polish (available on Pro plan and higher) to let Cloudflare generate WebP images.

2 Likes

Me lazy fu**er 
 sry just missed that and was relying on the fileextension


WebPs are not working for Safari.

Pls use that PageRule to solve it:

  1. Rule:
    Match: *swissclusive-hair.ch/*.png*
    Rule: Cache Level: Bypass

  2. Rule:
    Match: *swissclusive-hair.ch/*.jp*
    Rule: Cache Level: Bypass

Your good to go, but befor you test it pls clear your Browser Cache!
Polish costs you some bucks but would be the ‘slightly faster’ solution. But makes you rely on CF to optimize and process pictures but then again it optimizes ALL Images not just the one optimized by your origin Server

2 Likes

it works now! thank you all! I thought the webp images were removed. -.-’

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