Squeeze the soul out of your images and offer it as a tribute to Google

Posted on: December 8th, 2008

How to optimize website images from a SEO perspective.

Product images, screenshots, your beautiful team members, catchy images for your website content, corporate images, logos, icons, you name it – all your online images should join forces and work for your website success, rigorously planning to embrace the new era of universal search.

If you want to get the most out your images though, just sitting and watching how pretty they are won’t help you too much. You need to optimize your images to get faster loading times and attract more traffic to your website. You can do that by paying your highest respects to search engines rules. This article presents most common techniques of optimizing images for image search engines like Google Images, Yahoo Images or Live.

Let’s get practical now:

1. Image file name

Insert your desired keyword in the image filename, which also describes the content of the image. You must do this because, currently, search engines do not “see” images, but “read” their titles, filenames, alternate attributes , descriptions and so on.

For example, change you image name from DSC00004536.jpg to keyword.jpg. And if you’re wondering which one is best: word1-word2.jpg or word1_word2.jpg, go with the first one, because some search engines don’t consider the underscore (”_”) a words separator.

2. Image alternate text

Make sure the search engines fully understand your tribute by adding alternate <alt> attributes to your images. The alternative description should also include an expressive keyword for your image.

3. Image title

Yes, the image also has a title and using the attribute guarantees that on mouse over the title of the image is visible, unlike the “alt” attribute that is not fully supported by all browsers out there. This recommendation is more of a usability issue than a SEO one, but don’t underestimate it – deep down inside, search engines want to be treated like human beings. Well, maybe not human, but beings for sure, artificial intelligent beings that is.

4. Image file size

Keep it as small as possible, so that PDA users as well as users with slow internet connections may get the same intended, fast experience. The optimal image size is 20-100kb and the best resolution would be 300×400 px and 72dpi. It is also recommended to set the image size as part of the corresponding tag for the image.

5. The URL of the image

What is the best URL for you image? Again, Google recommends you place all your images in a folder named “images”, “pictures” or something similar, so that the final URL of your image will look like: /images/image.jpg
While you’re at it, make sure you don’t block access to the image-containing folder in your robots.txt file.

6. Get the full option “htmlised” image

  • Specify your image height and width in pixels or percent – using the width and height attributes;
  • Properly align your images – it is recommend to do this directly in the CSS style.

Other attributes to be defined directly into the CSS styles:

  • Image border;
  • Hspace and vspace – set the horizontal and vertical space around the image. Please note search engines recommend to place relevant content around your image, that is related to the image and its description.

7. Placing the images in the page

It is best to place your images in context. This means that the more relevant the text around your image, the better the ranking will be for your image.

You do know that it is not advisable to insert vital information – like contact details, address and so on – as images, don’t you? :)

Now that we have finished what we might just call a HTML tutorial for OnPage image optimization, let’s see how images can be optimized OffPage for better rankings in search engines.

Let’s get physical:

If you’ve followed all the steps above, you now have a fully functional image, ready to be indexed and bring benefits to your business. The next thing you should do is tell the people out there about it, because this is the most important part of your image optimization. First of all, make sure you activate the enhanced image search option in Google Webmaster Tool.

Let’s take as example a photo that is attached to a post on this blog on usability gurus and see why it is on the first page of image search in Google, as well as on regular web search.

usability gurus

1. Image filename: usability-start-300×261.jpg
2. Image alternate text: usability gurus
3. Image title: usability-start
4. Image file size: 28.74 KB
5. URL: http://blog.avangate.com/wp-content/uploads/2008/08/usability-start-300×261.jpg
6. width: 210px; height: 183px
7. Placing of the image: well, I think this is its strong point, because it belongs to an article about usability gurus, that contains the keyword both in the title and content of the post.

There are plenty of other opportunities to promote your images in your link baiting efforts, online reputation management or for better results in universal search.

In a previous post I’ve written about the benefits of using Flickr for your website images. Some argue that Flickr is getting less tolerant with using it for business purposes, but nevertheless, there is no strong reason why you should not give it a try anyway.

And if you’re looking for sources of images for your content, you may start with any of the three recommendations below:

  1. 100 (Legal) Sources for Free Stock Images
  2. Sources for free images recommended by Search Engine Journal
  3. A Complete Guide to Finding and Using Incredible Flickr Images

What else do you think that “the all mighty” (Google) would be pleased with?

Tags: , , , ,

roxana

Author:
Roxana Patrichi

  • .del.icio.us
  • .Digg
  • .Reddit
  • .Facebook
  • .StumbleUpon
  • .Technorati
  • .TwitThis

5 Responses to “Squeeze the soul out of your images and offer it as a tribute to Google”

  1. Using ALT Text with Images Says:

    [...] How to optimize website images from a SEO perspective. | Avangate … [...]

  2. Missy Says:

    Hi,

    I have a question on images that has been bugging me for some time now. In Wordpress there is a field for title and also a field for caption (also used as alt text).

    However the way Wordpress has it set up, when you add alt text, this also serves as a caption for the image. Which i don’t want.

    So how do i add (alt text) to images in Wordpress without including a caption on the image?

  3. Roxana Says:

    Hi Missy,

    In the Wordpress Dashboard, after inserting the alt text, while you are in visual mode writing your post, just delete the caption text near the image. The alt will remain and the caption field will be erased. Or you can delete from the html of the article caption=”text”.

    Note that search engines appreciate your alt text more if there is a caption attached to your image – because the caption can also be seen on the page by users , unlike the alt text.

    If you don’t want to do this move every time you insert an image into a post, check out these resources: Wordpress Support and Katzwebdesign – maybe there you can find your answer.

  4. Missy Says:

    Thank you Roxana. I was not aware that the engines appreciate the caption as they do the alt text. Good to know. I guess i which Wordpress would style it differently on the image.

    Will look into the resource links you provided. Thanxs again. This has been helpful and i may write up about it on my blog for my readers as well. Since i’m sure i’m not alone on this issue.

    Have a fantastic weekend!

    Missy.

  5. mp3traker Says:

    Well, actually, I might be wrong. It does appear to have some issues when I’m using it on my new blog.

Leave a Reply