Hi @astralex!
This is Joseph from Imagify, and I’ll gladly assist you here!
I’m really sorry you’re having issues with this!
I believe this is an issue where you’re using the “Use picture tags” option for WebP display, and it is causing an issue with the lazyloading that is also being applied by a script to your images.
I can see that the URL for the images that are not displaying are stuck in the data-src attribute of the image elements rather than being moved to the src attribute (as should happen when the images are lazyloaded).
We often suggest changing to Imagify’s “Use rewrite rules” option as a solution for these kinds of issues, but given that you’re using Cloudflare, this is ruled out, as any first visit on your site will trigger the cache creation in Cloudflare, and if that visit is from a browser that supports WebP, the WebP versions will be cached. Future visitors could be served these WebP images from cache whether they use a browser that supports WebP or not, causing blank space where the image should be.
So I think it might be necessary to either try a different lazyloading solution to see if it might work better, or if that’s not possible, it might be necessary to disable the WebP display option in your settings. Given the specifics of your site setup, WebP display may not work for you.
At the very least, you’ll still be serving the optimized JPG/PNG versions of the images.
Please let me know if you have any further questions on this and I’ll be very happy to assist however I can!
Best regards,
Joseph
Thank you for your reply. I desabled WebP images and the functionality now is restored.
Will be this compatibility included in future updates? I guess lots of sites are using CloudFlare and lazy loading.
Hey @astralex,
I can’t say for sure whether there will be a solution for some of these issues with the “Use picture tags” option and lazy loading scripts. The issue is that the scripts are targeting the img elements, but those img elements need to be replaced with picture elements in order to provide the fallback support so JPG/PNG images are served to those with browsers that don’t support WebP. I can mention the following, however:
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.
So one way or another, support for using both WebP and lazyloading scripts together will improve sometime soon.
Best regards,
Joseph
