Image SEO and dynamically serving different-sized images

[seoholic]

I spent some days researching all the solutions to serve images in different sizes and would really appreciate your feedback. Overall my experience was quite unsatisfying and I haven't found a lot of sites writing about this topic from the SEO perspective, just the designers perspective most of the time.

We will have a lot of images on our website and want to

• serve only small images to mobile users to increase load speed
  
  
• make the images rank and deliver quality content, therefore serve large images to desktop users and the Google index
  

While the support of srcset in the latest Chrome version seems to be a step into the right direction, HTML innovations are still some time away from being a practical solution:
[responsiveimages.org...]

Some of the CSS/JS/serverside solutions I encountered solved the (responsive) design part quite well, but all solutions resulted in slowing down the mobile user experience by also downloading the large image or in not being SEO-friendly in terms of not making the large image available to Google.

My conclusion is to serve different HTML/images based on the user agent:
Dynamically serving different HTML on the same URL:
[developers.google.com...]

1. Should you try to get differently sized versions of the same image indexed ?
   
   
2. Should you serve differently sized versions of the same image using the same filename and Vary HTTP Header?
   
   
3. Should all of the smaller versions be noindex?
   
   
4. Should they have canonicals pointing to the larger version?
   [googlewebmastercentral.blogspot.com...]
   
   
5. Would canonicals even have an effect on Image SEO?
   

   Google currently supports these link header elements for Web Search only.

   
   [support.google.com...]
   
   
6. Slightly off-topic: If I just link to one of my images (not embed it), will Google send any traffic from image search to the page the file is linked from or is this just wasted bandwidth with exception of watermarks and the like?
   

My opinion:

1. No, too spammy
   
2. No, too confusing
   
3. Yes, for safety
   
4. Yes, why not?
   
5. I don't know
   
6. I don't know
   

Thank you for your feedback!

[Sagacity]

I have been working on similar ways to serve small thumbnails up mobile/desktop and a full size image on Java click to get both size images in google image search. Most important, I needed big images for Pinterest and social shares.

First I tried og meta. Then discovered Pinterest and Facebook both ignore og meta image, and take the visible tiny image on page.

Then I tried detecting user agents and serving up fullsized images to google, Pinterest and Facebook . This works but could be interpreted as bad and probably gets an anti trust value from google bot after crawling.

I went as far as adding both image urls so on mouse over tiny image browsers and google can find the big image url, and if no java enabled it would just open a new window and find the big image. But I was gutted to find no big images get indexed after 1 month.

It's a real headache. Google indexes the text I've masked in java (because it needs masking, it's not content it's code) yet the image urls to big images it knows about them but they're not indexed. Even though a mouse click will load the big image on the page in cinematic css/java pop up window.

So I think the only way is to serve fullsize images up based on useragents strings.

Also I checked out loads of sites and found that following google guidelines and pagespeed has no bearing on ranking because sites scale images in the browser and the natural size (a much larger pic) brings good image search traffic to the page. Which totally sucks.

Google only indexes the visible images as is. No need for canonical.

[edited by: Sagacity at 8:32 am (utc) on Apr 17, 2014]

[seoholic]

Update thanks to another thread here, see G+ below:

4. Yes

Google only indexes the visible images as is. No need for canonical.

Both (or more) images are visible (img src), but at the moment I think all except one should be noindexed to avoid spam signals. For example one is visible to mobile users and Googlebot mobile and one to desktop users and normal Googlebot.

If you say page A is equivalent to B (rel=canonical), and then set page A to be noindex, what does that say about page B?
[plus.google.com...]

When canonical can transfer noindex, it can maybe also transfer positive signals. Their canonical interpretation doesn't make sense to me, but I am willing to work with that.

following google guidelines and pagespeed has no bearing on ranking because sites scale images in the browser and the natural size (a much larger pic) brings good image search traffic to the page.

That is my impression too. Normally you just don't find small images if you do some random searches.
But there may be limitations to size:

Mentat:
1. Google does not like big sizes pictures (ex 1920x1080 px)
[webmasterworld.com...]

[Mentat]

On my site, I have many product pictures, on both 720p and 1080p sizes.

It seems to prefer 720p.
Still, a lot of the internet does not have HD+ displays.

[lucy24]

following google guidelines and pagespeed has no bearing on ranking because sites scale images in the browser and the natural size (a much larger pic) brings good image search traffic to the page.

I couldn't find the source for this bit. Who said it, where? It sounds wildly irresponsible to me.

[Sagacity]

I search images in google by pasting an image URL and google will guess what it is and show all matching. Useful to see what images are indexed and google list small medium and large sizes.

I use meta canonical on urls that can have query strings (sorting/filtering) and that prevents duplicate content pages.

If the image has the same filename and path but variable sizes - no problem. I've never heard of duplicate content issues on images.

I'm guessing your sets of images have different urls because of browser caching.

[Sagacity]

@lucy sorry I'm not going to name and shame sites by posting domain names. If there is a bearing, it's not significant enough in terms of ranking. I carried out dozens of searches and found images with wrong sizes had no bearing, but benefit by having larger images in google.

[seoholic]

Update: After one month of testing my prominently linked but not embedded unique image still doesn't show up in image search.

6. Nothing happens