October 06, 2006

Optimization using images on your website

There are several important factors to consider when optimizing images on your site:

File Names:
Giving pictures an appropriate filename will help search engines determine its contents, especially for image specific searches like Google's Image Search. For example, naming a picture of a butterfly "butterfly.jpg" is better than naming it "1234.jpg".

Image Size and Quality:
The fact that both image size and quality are important causes problems for site owners. Lower quality images increase loading speed, but hurt rankings in image searches and detract from the overall user experience. Higher quality images help in image search rankings and look great, but cause pages to load slowly, which can be a problem for visitors with slow connection speeds.

I've found that the best way to get the best of both worlds is to have a small, lower quality image on the page that links to a higher quality image file. That way the page can be loaded and viewed quickly, but users wanting a closer look can click the image, and image searches will have a high quality image to index (increasing your chances of ranking high). For example, on an e-commerce site, it makes sense to place small thumbnail images next to the description of an item and then link the thumbnail to a higher quality image of the item for potential buyers looking to get a closer look.

Alt Text:
All images should include short alt text that describes the image. Alt text helps search engine spiders understand what your image contains, which will help them to understand the context of your page better, and in turn pass you more targeted traffic via search and image search. Alt text also helps screen readers tell disabled visitors what the image contains, enhancing their experience on your site.

A properly formatted HTML image tag with alt text looks like this:
Descriptive alt text here

Surrounding Text and Captions:
It is important that the surrounding text and image captions are consistent with the content of the picture. According to the Google Images FAQ:

"Google analyzes the text on the page adjacent to the image, the image caption and dozens of other factors to determine the image content. Google also uses sophisticated algorithms to remove duplicates and ensure that the highest quality images are presented first in your results."
Avoid Putting Text in Images:
There are some occasions where text in an image is necessary, but in general it should be avoided at all costs. It's common practice to use images with text in headers or other important parts of the page, usually because of the background or surrounding logos. While alt text certainly helps, it's best to have the text actually readable by search engine spiders and screen readers.

A simple alternative is to create your graphic with everything but the text, write the text by itself (formatted to your liking using CSS), and then make the graphic a background image of the text (also using CSS). This makes it look like the text is part of the graphic, when in reality it is part of the HTML.

You can see an example of this by going to http://www.seo-playbook.com/image_example.php. You'll notice that both images look the same, but the second one doesn't include the "Page Title" in the image. Instead, it is part of the HTML code on the page. When Googlebot comes and visits a page like that, it will be able to read that "Page Title" is a page heading and incorporate that accordingly into their results.

About the Author: Adam McFarland owns iPrioritize - simple to-do lists that can be edited at any time from any place in the world. He also provides SEO consulting for small businesses looking for a cost-effective way to drive more traffic to their site and convert more visitors into customers.

No comments:

Template Design | Elque 2007