HD images on eCommerce and SEO

Question

I have an eCommerce website where product images are currently resized to 250x250 max and shown to the user. I shrink the original high-definition images to a size that makes it possible for the page to load quickly.

This is what is currently being done:

• Images are part of the Product microdata information.
• Every product image is listed on my website's sitemap.xml
• The product image is loaded via an IMG tag.

I want to take advantage of the HD version that I keep on my server, and show it to users in a friendly way, but also want to help images rank.

How can I get Google to associate my image in the most SEO friendly way? I could possibly replace the image on the sitemap with the HD version.

However, what bothers me is that I can't seem to do the same for the Product snippet, since Google hates hidden content, and I certainly don't want the HD image to be loaded when the product page is loaded. Are there any alternatives to actually loading the full-sized image?

Answer 1

Use this tags.

<a href="http://www.example.com/hd-image.jpg"><img src="http://www.example.com/thumbnail-img"/></a>

Most of all ecommerce websites, blogger websites, and wikipedia uses links in images for Image SEO.

Here, you display compressed image in img src, so it load images quickly, but when Google spider see that link, then they will index, HD images in Google image search.

And, when any user click on than image, then user will see HD image, because actually they are clicking on link, and that link point to HD image. By default, it will open in same window, but you can use JS and CSS to open in same windows. There are lot's of tutorial on lightbox and popup for more stylish way to display images.