Archived topic
Images not presenting as webp
5 replies · Started by troyw on February 24, 2022
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
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. :)
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
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! :)
Thanks Fernando, I will look into other options.
You’re welcome Troyw! Glad to be of assistance! Feel free to reach out if you’ll have any further inquiries! :)
