Contents   Prev   Next
  1. Poorly Optimized Image
  2. Image "alt" Text
  3. Image "title" Text
  4. Image "longdesc" Text
  5. Image File Name
  6. Image Folder Name
  7. Page Title
  8. Page Content
  9. Page URL

Optimizing Your Images

As with any web page you want to optimize, there are certain things you can do to increase the ranking of the images on the web page as well (and overall definition of the topic of your site as a whole). Below are a few of the commonly used techniques to optimize an image for an image search engine.

Poorly Optimized Image

A bad example of an image tag will look like this: (for purposes of illustration, we'll assume the image is a picture of a grey whale):

Code listing:

<img src="pic1.jpg" border="0" width="200" height="300" />


Notice that you are unable to derive any information from this tag regarding the image itself -- neither can a search engine -- there is nothing indicating what the picture is of.

Image "alt" Text

The following examples are the most logical in order of importance.

The "Alt text" refers to the "alt" or "alternative" attribute used in the image tag, it's purpose is to provide some alternate text to describe the image in the event that a browser has image loading disabled, or the person viewing the web page is unable to see the image (poor eyesight, assistive technology, color blindness, etc.). There are many text readers for those in need of assistive technology to surf the web. It is important to use these alternative text attributes for accessibility.

Code listing:

<img src="pic1.jpg" alt="alternative text" />


Image "title" Text

The title attribute on tags is recognized by most modern browsers and will be visible when hovering your mouse over an image (also known as a "tooltip").

Code listing:

<img src="file" title="Image title" alt="Alternate text" />


Image "longdesc" Text

The longdesc attribute is rarely used, if at all.

Image File Name

The filename is an important factor in optimizing for a search engine. In the example above we used "pic1.jpg". Not very descriptive. Renaming the file to "grey_whale.jpg" will help give the search engine spiders a clue about the picture.

Image Folder Name

The folder name can also be a factor in ranking the image, as with html pages. Typically, you would create a subdirectory in your main htdocs folder called "/images" and store all your images in there. However, if you have several images on your site, and you wnat to optimize them, it's better to organize them accordingly. Let's say we have 10 pictures of whales. So a better folder path for your images would be "/images/whales/" and put all your whale images with descriptive file names in there.

Let's take a look at a fully optimized image tag applying the suggestions above. It would look something like this (we will remove the width, height, and border attributes for brevity, as these can be defined in CSS anyway):

Code listing:

<img src="/images/whales/grey_whale.jpg" alt="Grey Whale" />
<img src="/images/whales/blue_whale.jpg" alt="Blue Whale" />
<img src="/images/whales/killer_whale.jpg" alt="Killer Whale" />
<img src="/images/whales/humpback_whale.jpg" alt="Humpback Whale" />


Not only does this help your ranking in image searches, it also is more accessible by people who have low-bandwidth constraints (ie: dialup) or use assistive technology to browse the web.

Page Title

Page title, as always is an effective use of optimization. Read the full explanation of the page title tag. Google looks at several factors, and if your page has a title tag with the keywords in it, you are more likely to rank higher.

For the above example, a good title tag would look something like this:

Code listing:

<title>Grey, Blue, Killer and Humpback Whale Pictures</title>


Notice we did not repeat any of the keywords words, a very common mistake which could penalize your ranking.

Page Content

The content is also very important, as the search engine spiders will read this content in determining what the images on the page could be about, read more about optimizing web pages.

Page URL

Lastly, and probably least important in the ranking of an image, is the url of the page. One might consider this factor if they are specifically targeting the images on the page, rather than the content. Regardless, a good url would be something like this:

Code listing:

The url of the page which contains the image can also have an influence on the ranking of the image. It's worth considering if you want to rank higher. For example an image contained on the page "page2.html" may not rank as high as the same image (and all other things constant) which is placed on a page called "whale-pictures.html".

Contents   Prev   Next