6

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

  • I'm under the impression that canonical works on pages not elements such as images, and Google wouldn't punish websites for serving the same image in several different resolutions as its very common to do so especially with the increase of responsive design. I'd expect only a punishment if 10 images using all the same alt description but if you put "keyword - resolution" that would overcome that problem. – Simon Hayter Aug 11 '14 at 16:12
  • 1
    Adding a resolution in every alt is not really user-friendly, isn't it ? I'm not able to find the article I read before implementing the canonical header in images, but I will... – Hugo H Aug 11 '14 at 16:47
  • 2
    Having each size of image indexed might not be a bad thing, particularly when users can search Google Images for particular sizes? – MrWhite Aug 11 '14 at 18:13
  • @Tyrius you've used SEO tag in the question and using keyword and resolution is both SEO and user friendly since you are informing your users and search engines the differences in each of the files. Using identical alt tags is bad for seo nevermind confusing for blind users. This action can be extended with including words like widescreen, cropped and so for, again improving on seo and user experience. An alt tag is to describe what the image is, if repeated with differences then you should inform users the differences. Also Jeffatrackaid has linked what Google determines usage for canonical. – Simon Hayter Aug 11 '14 at 18:20
  • 2
    Another ideal is rather than using resolution in the alt tag you could use extra small, small, medium, large, x large, xx large, and xxx large) but just an example. – Simon Hayter Aug 11 '14 at 18:28
2

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.

  • Thanks for this informations about PageRank. I will use the <a href idea. – Hugo H Sep 1 '14 at 9:37
0

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

  • I edited my question to remove informations about link rel. Thanks for the links. – Hugo H Aug 13 '14 at 7:10
0

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.

  • This doesn't resolve how search engines are referencing my images - and I'm not looking for a way to handle responsive images here. ;) – Hugo H Aug 13 '14 at 7:01
  • Sorry, I was thrown off by the different versions of the images, supposing that is what you had the issue with. There is not rel-alternate with images. You can try and block all but the full resolution version on robots.txt or instead use the srcset image attribute with a polyfill for older browsers who dont support image sets. – Frank Aug 13 '14 at 8:15
  • You can also use a canonical header for images pointing to the original and full size version. Here is a write up on the subject. blog.maxcdn.com/better-image-seo-canonical-headers – Frank Aug 13 '14 at 8:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.