Optimized images sometimes appear to large on mobile

Hi @ddelicious

This is probably happening because of WebP display feature.

If you deactivate it temporary and clear the cache, does it still happen?

If not, you might consider using rewrite rules method to display WebP as it would work better. The only thing is that you can not use it if you have CDN or Cloudflare active on your site.

Let me know if this helps.

Best Regards
Marko

I use Cloudflare. If I deactivate webp and the problem goes away, what is the solution? I would still like to use webp for images if i can

@ddelicious,

The issue is that either the “Use picture tags” or “Use rewrite rules” option is needed to display WebP images in a way such that there is a fallback to the JPG/PNG version of your images for users of browsers that don’t support WebP yet (Internet Explorer and Safari without the Big Sur 11 update).

So what you can try, is to leave the “Use picture tags” option enabled, and then just delete the WebP versions of these images:

https://www.ridesharingdriver.com/wp-content/uploads/2014/10/twitter-icon.jpg.webp
https://www.ridesharingdriver.com/wp-content/uploads/2014/10/facebook-icon.jpg.webp
https://www.ridesharingdriver.com/wp-content/uploads/2018/10/quora-icon.jpg.webp

If the WebP version of an image doesn’t exist, the picture tag replacement won’t be done, and so the issue should be prevented from happening. This way, you’ll still be using the optimized jpg version of these images and you’ll still be serving WebP versions for your other images.

Best regards,
Joseph

I deleted webp versions for those three images and the problems still happens (cleared cache, private browser). Sometimes the images load large, sometimes they don’t, and sometimes they load large and then snap back to normal size. Maybe it’s another CSS issue?

@ddelicious,

Sorry that didn’t work!

I can see that the images now are not being replaced by picture tags in the source code now that the WebP images are deleted. Given this, it seems like it may not be caused by Imagify and may, as you mentioned, be a CSS issue. You could test this further by deactivating Imagify to see if the issue remains.

Do you think this issue could have been happening before optimization but you just hadn’t realized it? I ask because the only way that Imagify affects your pages’ source code is when it replaces the img tags with picture tags.

May I ask what you are testing this with when it happens? The only way I can reproduce the issue is on an older iPhone 6. Everything else I test in seems correct.

I can see that the images have a max-width value of 100% set to them. Maybe it could help to add something like:

#text-29 img {
max-width: 44px;
max-height: 44px;
}

I also see there is lazy loading applied to these images, so you could try disabling that as well to see if that is somehow causing the issue.

Best regards,
Joseph

I’m seeing the issue in Safari mobile (iPhone xs) & safari desktop browser. Also chrome mobile browser.

Setting max width and height didn’t work.

It is possible that this issue already existed. And the tests you’ve suggested seem to exclude Imagify as the problem. So I’ll test this further on my own. Thank you

@ddelicious,

Sorry to hear that didn’t work either and good luck finding a solution.

Let us know if there is anything further we can assist with, and we’ll be glad to help however we can!

Best regards,
Joseph