WANT TO BE HLEP about the webp is not working

Hi @kanzolquran

Thank you for contacting us!

Can you please let me know if you have the display WebP option enabled through Settings > Imagify and if so which is the way you use to display your WebP images by “Use the rewrite rules” way or “Use <picture> tags” way?

It looks like you are using Cloudflare so in this case the correct way to display your WebP images is by using the <picture> tags way as rewrite rules will not work.

On the following link, you can see how to check if WebP is displayed on your site https://imagify.io/documentation/how-to-check-if-webp-image-is-displayed-on-your-site/

Also, there are a few reasons why WebP will not be displayed using picture tags:

– background images added via CSS
– there is no WebP generated
– page element HTML is loaded after Imagify looks for the source code to apply WebP markup
– images are external

Looking forward to your reply so we can hopefully resolve this for you.

Best Regards,

Ioanna

hi sir see this i have enabled and setup as you said but still in loading not genrating to webp

see in the picture still in loading mode

Hi @kanzolquran

Thank you for the updates.

Regarding the “Generate missing WebP version” tool, unfortunately, this is a known glitch where sometimes it’s not related to generating WebP itself, but to that counter, which might be wrong. Our developers are aware it will be improved soon.

Further than the above if you have uploaded images in WebP format directly to your Media Library please note that since Imagify v2.1.1 where you can optimize WebP format, our “Generate missing WebP versions” tool calculates by mistake also that WebP images need to be converted as well. Regarding this issue we have an open GitHub issue already that will be fixed in a future update, you can track the progress from the following link https://github.com/wp-media/imagify-plugin/issues/713

However, the way to check that all your images are converted in WebP is to enable the display WebP option(Settings > Imagify) so you can check if there are images not displayed in WebP and if there is a WebP version created for them.

You can check if a WebP version of an image is created if you append .webp at the end of the image URL.

I see that you have enabled the picture tags and it looks like your images are displayed in WebP if you check on your source code except for the following image https://kanzolquran.org/wp-content/uploads/2023/08/online-tajweed-course.jpg which is a background image and according to the reasons mentioned in my previous reply cannot be displayed in WebP when using <picture> tags. The only solution to display the background images in WebP is to choose the rewrite rules way unless you are using Cloudflare/ CDN.

Let me know if you need further assistance. I’ll be happy to help.

Best Regards,

Ioanna

I’m using Cloudflare and I have tried to rewrite rool and second rool but the webp is still in loading mode don’t know how can i fix this issue