How to handle different images size and URL with SEO

Question

I'm creating my own CMS, and I have to handle images with differentes sizes.

I store all my image's information in a database. For every image, I have:

• a filename (with extension)
• a title
• an alt attribute
• dimensions

Images can be used in different ways:

• cropped
• tiled
• exact dimensions
• only one dimension (for example: 200px height and auto width)

Right now, my URL to this images looks like this:

http://example.com/uploads/{id}/{mode}/{size_x}-{size_y}/{filename}.{ext}

A real example:

http://example.com/uploads/tile/24/200-200/my-picture.png
http://example.com/uploads/crop/24/200-200/my-picture.png

The URL is quite long. But I need all the informations provided in it.

Is it a problem for SEO? What are the solutions to optimize SEO for multiple-sized images?

Edit: removed canonical link informations

Answer 1

Serving multiple sized images is not a big SEO problem, but I try to stick to two sizes:

• thumbnail
• large

That way, I can have smaller images in the pages, but get the large images ranked in image search. To optimize for image search you should:

• Use large images (at least 600px in the smaller direction, but not so large that they can't fit on the screen, or are multiple MB in size). Google says that "image quality" is a ranking factor. The major component in that is just size as far as I can tell.
• Image pagerank is important - images rank better when used in pages with high pagerank. Using images in multiple pages also helps.
• You can use <img src= or <a href= to pass pagerank to images and get them to rank. This means that you can do something like <a href="large.jpg"><img src="thumb.jpg"></a> so that only the thumbnail is in the page, but the large image shows up when clicked and is the one that ranks in image search

If you have multiple large sized images, Google will just pick one to rank in image search. It will likely be the largest one with decent PageRank. If you use different sized images in different pages, then you are diluting your PageRank some. You can use the linking trick above to mitigate this problem.

As far as I can tell, there are not duplicate content penalties for different images sizes. Images are widely copied and resized around the web. Google tries to detect duplicate content and show only one copy of each image (in any size) in the search results, but it doesn't appear to deal out penalties for duplicate images.

Answer 2

To my understanding, rel="canonical" is a page level attribute designed for HTML pages (and PDFs). The goal is help search engines identify the preferred URL for your content.

You can find two good discussions:

Google's Use canonical URLs

Moz's Rel=Confused? Answers to Your Rel=Canonical Questions

Answer 3

This is handled via HTML 5 SrcSet attribute which allows for one single image to have different sources. The problem is that browser support is still lagging, therefore you need to use polyfills or shims to get it to work correctly.

As for your CMS, I would suggest having an Original, and then sizing the other images dynamically. If you are on ASP.net check out imageresizer.net, if you are on a php platform then timthumb.php might be something that can get the job done. Have the images resized server side and then cache them to disk (so it doesnt resize each time).

When you create your markup, then use either srcset, or css3 backgroud images with media queries to serve different size images to different users.