How to include high resolution version of thumbnail

Question

I'm running a tube site that has a thumbnail for each post/video (running via Wordpress, 500k posts). When I first created the thumbnails they were a fairly large size, around 640px in width each and because of that I was seeing a lot of traffic from Google Images.

After streamlining the site and resizing all of the thumbnails down to 170px rather than scaling them down I'm worried that Google isn't going to rank the images as high as they would be at a larger resolution, so is there a way to include the higher res versions and serve them to be indexed instead of the smaller ones?

Answer 1

Do a "on-mouseover" thing, where hovering shows a lightbox of a larger image.

You can customize how large the image is that pops up, and how the effects play out: moving the mouse away makes the image vanish immediately, or fades out?

Be sure it implement image caching if you aren't already. How to serve those ones to be indexed specifically? You'd probably want to include them in your sitemap. (Or sign up for the Webmaster Tools and submit them manually).

Answer 2

You can make the small image clickable so it links to the bigger image. If you use something like fancybox it looks pretty too.

Answer 3

Much of Google's choice of images that it ranks is based on "image quality". You are right to worry. Larger images are considered higher quality than smaller images.

Whatever you do, you need to have the large size image appear in a <img src= or an <a href= in the page source. John has the right idea about linking to the big size images using the thumbnail. However, as if you say, that plays the video instead, a link somewhere nearby could be used instead.

Answer 4

I found for you two solutions:

1. I think the best what you can do is serving big thumbnails, but detecting smaller screen (like for example smaller than 1900x1400) loaded images will be smaller (170px for ex.). Benefits? Thats white SEO you don't lie user you just provide smaller thumbs for user with "small" resolution screen. Make sure you give option to see larger thumbs for user even if he got "small" resolution and that the google and other boots will se it bigger version.

   Just simple resolution detection by javascript. First check if javascript is enabled, save that info to cookie, if it is than run function that download appropriate images.

2. Just send large images, if you detect normal user (check user agent) than send smaller images. Thats black SEO, and you should always let user see the bigger thumb (your site ranking may go down cause of that techniques).