[Resolved] Images not presenting as webp

[troyw]

Hey team,
I am not sure if this is an issue with GP or Imagify, though Page Speed Insights appears to be suggesting there is an issue with the containers. Here is the message I am seeing in Page Speed Insights;

‘Serve images in next-gen formats’
It shows me all the images that are not showing as webp with this code next to them;

div.gb-inside-container > div.gb-grid-wrapper > div.gb-grid-column > div.gb-container
<div class="gb-container gb-container-8cc03f4d">

I am using Imagify Pro to optimise and display images as Webp, which works fine, other than all these images in containers.

Any idea why this is happening and how I might be able to fix it?

Apologise in advance if this is an Imagify issue, but I’m thinking it could be the way I have set up the images in the containers.

Thanks

[Fernando]

Hi Troyw,

I tried testing your site and found other images set through your slider plugin not converted to Webp as well. For instance, see the images below:

https://share.getcloudapp.com/jkumx6k5

https://share.getcloudapp.com/z8ukKd2y

https://share.getcloudapp.com/v1uLZn7A

As for gb-container-8cc03f4d, the image in this container is set through CSS and we’re not exactly sure if Imagify can fetch images applied through CSS (background-image property).

It’s functionalities are outside of our control as it’s a third-party plugin. We suggest contacting Imagify’s support if perhaps they have a solution for this.

See this for reference: https://wordpress.org/support/topic/serve-webp-for-background-images/#post-14001226

Hope you’re able to resolve this! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

[troyw]

Hey Fernando,
Yes, I did have a look through the Imagify support pages and vague ass they are, it looks like Imagify won’t deliver any images delivered via CSS (which I assume the container is) as webp.

Therefore to fix this I assume I would need to add the images as ‘images’ not backgrounds, is that correct?
If so, will I need to crop the images to the exact size for each container or is there a way I can force the images to crop to the container size?

Thanks

[Fernando]

Yes, you would need to crop all images to the correct aspect-ratio for it to look the same. Then, if they’re set to width: 100% and height: auto, they should fit the containers perfectly.

Alternatively, I believe there are other plugins that can turn all media images to Webp but I’m not entirely sure how they work.

For example: https://wpmudev.com/blog/local-webp-support-smush/

Also see: https://wordpress.org/plugins/webp-converter-for-media/

Hope this clarifies! 🙂

[troyw]

Thanks Fernando, I will look into other options.

[Fernando]

You’re welcome Troyw! Glad to be of assistance! Feel free to reach out if you’ll have any further inquiries! 🙂

[Author]

Posts