[Closed] Imagify Issue: Product images not serving up webp images

[Author]

Posts

[sunilM-2]

Hi,

I have created webp versions of all website images with Imagify. Imagify also takes care of the display of webp images (using picture tags)

There's no problem with toolset image blocks, however the images from the Product image block are displayed as png/jpg.

Please assist

[Luo Yang]

Hello,

I assume we talking about the plugin "Imagify" download from:
https://wordpress.org/plugins/imagify/

I have tried it in my localhost, it is stuck in "Optimizing..." after upload an image, see my screenshot.

Please try duplicate the same problem in a test site with fresh WP installation + the latest version of Toolset plugins, and provide the test site credentials in below private message box. thanks

[Luo Yang]

I have tried the URL your provided above:
hidden link
But get the error message: 504 Gateway Time-out

Please check it. Or you can provide the test website copy in below private message box:
https://toolset.com/faq/provide-supporters-copy-site/

[sunilM-2]

Hi I created a larger instance. It should work now and has the same login details

[sunilM-2]

This is the reply I got from Imagify:

"the loading of the images that's being detected by PageSpeed is occurring right in the browser, using JavaScript, which means after Imagify has already gone through the source code to apply its WebP markup, and thus, it can't do anything about which version of the image gets served at that point.

Rather it would have to be addressed through the JS that's being used to apply attributes like onload="this.width = this.naturalWidth; this.height = this.naturalHeight" and role="presentation" to these images.

FYI, those attributes came from the PSI test, but are missing from the actual HTML source, which is how I knew the loading was happening in the browser instead:"

[Luo Yang]

I have tried these in your website:
1) Deactivate all Toolset plugins
2) Test single product post in frontend, for example:
hidden link
I see the same results: unable to get the product gallery to display webp.
See my screenshot: Imagify.jpg

So the problem was in Imagify plugin side, can you confirm it? thanks

[sunilM-2]

Hi Luo,

Thank you for your reply. I have forwarded the message to Imagify.

I have no idea where the problem is, which is why I am trying very hard with both Toolset and Imagify to resolve it. Imagify pointed the finger at Toolset (in the earlier email they sent me). They said it was a problem with the Javascript from the Toolset block.

Hopefully your message will be helpful to them. I will post their reply here

[Luo Yang]

OK, please update here if you still need assistance in Toolset side.

[sunilM-2]

Imagify's response:

"Hi Sunil.

The issue doesn't seem related to Imagify (nor WP Rocket, for that matter) as the HTML markup which has been written to the page itself is already correct for the serving of WEBP images.

And you do have other plugins running on your site besides the ones from Toolset that could be involved here; for example, the onload="this.width = this.naturalWidth; this.height = this.naturalHeight" attribute that I'm seeing applied to some of the images on the PSI test is apparently coming from this WooCommerce file:

/wp-content/plugins/woocommerce/assets/js/flexslider/jquery.flexslider.min.js

So you might want to see what happens when you disable that."

Please, I really need assistance. So fa everyone is blaming everyone else, but I am the one who is suffering

[Luo Yang]

I have checked it in your website, it seems the Imagify plugin is using some filter/action hooks to add webp images tags before normal image tags, is there document for that?
I need to check if it is possible to apply them into Toolset product image block