Images are not loaded on Google Chrome browser, SSL issue?

Hi

A client for whom I work reported today that all of a sudden the images of his WooCommerce shop are not showing up on the homepage.

After looking into this matter we discovered that images do show up on other browsers but not on Google Chrome. It seems that only Google Chrome all of a sudden has problems loading the images of his website.

Starting to research into this, I found that the image tags have a link to https://www.w3.org/... as src attribute and that the real link of the image file is located in the data-src attribute. The reason for this is because of lazy loading the images on the website.

On this forum I found posts about it here:
After update NO more images are displayed!

or here:
Lazy Loading in combination with the official amp plugin images not loading

But I do not think it’s a problem with your plugin, I think it’s rather a problem with the outdated <svg> link which you use for the placeholder image. Therefore I would like to propose a suggestion to you:

You use the following content for the src attribute of lazy-load <img> tags:
data:image/svg+xml,%3Csvg%20xmlns='https://www.w3.org/2000/svg'%20viewBox='0%200%20324%20324'%3E%3C/svg%3E

It’s meant to be a placeholder for images that are marked to be lazy loaded. However, this content links to the w3.org website via ordinary https:// protocol, not https:// protocol. The website which has the problems runs on https://.

When a website is set up for SSL communication all links in the source code have to be https:// protocol. If links are detected that load content via https:// protocol the website is downgraded as “not secure”. This seems to be the reason why the loading of images fails in Google Chrome browser as soon as it finds images which have a https:// link in their src attribute. Prior to that, the few images not marked for lazy-loading, are being loaded in Chrome.

Servers have different configurations via .htaccess how to handle SSL traffic. Furthermore you’ll have different behavior among the various browsers how to handle such conflicts. Maybe these circumstances culminate and cause the Google Chrome browser to abort loading images as soon as it finds the first lazy-load image which contains a https:// link in its src attribute because of the outdated w3.org <svg> tag.

And concerning other browsers loading the images, well, the other browsers may be smart enough to recognize and consider the <svg> link to w3.org as trustworthy and not downgrade the whole website as “not secure” just because of some outdated w3.org https:// placeholder links in <img> tags.

If my assumption is correct you could solve this problem very easily. Simply update the <svg> link in the lazy-load <img> tags. You could replace this:
xmlns='https://www.w3.org/2000/...

with this:
xmlns='//www.w3.org/2000/...

This notation should avoid any SSL conflict with .htaccess configurations on production servers, since you can not predict all the different server scenarios, and it lets the server of w3.org decide how to handle the HTTP protocol for the placeholder image.

—

If this problem is already known and has been addressed then ignore this post and close it.

Otherwise please let me know if my suggestion is helpful to you.

Thank you for a good plugin.

Sincerely,
Gevorg