Pictures error

Hi @freddyee

This is Ioanna from Imagify, I’ll gladly assist you here!

Sometimes <picture> tags option can be risky. The solution would be to use rewrite rules but it won’t work since you are using Cloudflare.

Checking your website it looks that is not happening the same issue now and all your images are displayed in WebP except for this one https://www.runayaq.com/wp-content/uploads/2020/10/cropped-logo.png which has no WebP version.

I see there are no <picture> tags on your source code. Did you make any other changes?

Best regards,
Ioanna

Yeah, I changed it to rewrite rules because if that issue with <picture> tags, since you say rewrite rules won’t work with cloudflare, how are the webp displayed in my website ?

Hello @freddyee,

This is Joseph from Imagify. Ioanna will be away for the rest of the weekend, so I’ll be glad to pick up where you both left off.

When using the “Use rewrite rules” option and Cloudflare together, it’s not that the rules won’t work, but instead, the issue is that Cloudflare will cache your WebP images and ends up serving them to users of browsers that don’t support them (like older versions of Safari and Internet Explorer).

If you check the headers of your images, you’ll likely see that they’re being served from Cloudflare’s servers, and so at that point, rewrite rules on your server have no effect.

If you test your pages in older versions of Safari and notice some of your images not displaying, then this is likely the reason. To fix it, you’ll need to disable the “Use rewrite rules” option in Imagify plugin settings page and then clear all caches, including Cloudflare cache.

Given that the “Use <picture> tags” option won’t work for you either, I don’t think there is an immediate solution for you to display WebP images, but I can offer the following regarding the hopefully near future:

In Apple’s recent Big Sur 11 update, they introduced support for WebP images in their newest version of Safari. Once this update is widely adopted by users and the older versions of Safari are no longer widely used, you’ll be able to safely link directly to your WebP images without the need for Imagify’s “Use <picture> tags” or “Use rewrite rules” options to provide fallback support. You can track browser support for WebP at https://caniuse.com/webp.

Please let me know if you have any further questions on this and I’ll be more than happy to assist!

Best regards,
Joseph`

so, the only problem to display webp images would be with older browser versions ? but it’s most likely that people don’t use those browsers…

@freddyee,

Yes, that’s correct. If you’re okay with some percentage of your safari-using visitors not seeing your images, then there should be no other issue for you with using the rewrite rules. We just prefer to stay on the safe side for now as far as our recommendations go because some of our users would not be okay with that.

Best regards,
Joseph

if I don’t use rewrite rules nor picture <tags> , my pictures won’t display in webp format on my website ?

Hi @freddyee

Yes, in order to display your WebP images on your website you have to choose a display WebP method.

Best regards,
Ioanna

How to know if my images are been served from Cloudflare servers or my own domain ??

• This reply was modified 4 years ago by freddyee.

Hey @freddyee,

To see that, you can check the image headers. This can be done by loading your page in the browser, opening your browser dev tools (press F12 or right-click and select “Inspect”).

From there, reload the page, then click the “Network” tab in the dev tools panel, and then click the “Img” or “Images” tab.

This will show you a list of all the images on your page. And from there, if you click on one of the images listed, you should have an option somewhere to view the “Headers” information. For Chrome, this is a tab on the right-hand side.

Once you are viewing the “Headers” look for the “Server” header, and this will tell you where the image is being served from. If it’s Cloudflare, it will say Cloudflare.

Best regards,
Joseph