Images and Alt Tags

Achieving Better Search Engine Ranking for Your Website

Many years ago, my sister asked me to look at the Google Images search. When I first saw the page, I thought Google was offering a place for freebie photos before I realized that it was probably searching for and finding the “alt tag” text written in the HTML for website images. “Alt tags” or “alt text” refers to a bit of descriptive data that web developers often (and should) include with images on their websites for various reasons explained below. Anyway, I found myself explaining the image alt tag and thought the topic might be a worthwhile tutorial on the subject.

Inside the Alt Tag

Virtually all web pages today are comprised of text and images. Browsers display this information by following instructions written in a special markup language called HTML. When an image is to be displayed, the HTML code for that image must contain directions to the server on where that image is located. The image is then retrieved from that location and displayed in the web browser. The code might read:

<img src=”pix/mammamaria.jpg”>

The tag acts as an instruction to the server to go to the source of the file, in this case, the “pix” directory, find the image called “mammamaria.jpg”, and send that image to your computer’s browser. Proper HTML code adds additional information:

<img src=”pix/mammamaria.jpg” width=”257″ height=”329″>

These attributes contain dimensional information which allow your browser to hold a properly sized area open so the fast loading text is formatted around the picture while the slower loading image downloads. Missing dimension attributes are noticeable on slower loading websites when text shifts in the browser window as the images begin to appear. (Fast cable and DSL speeds have made this a problem of the past.) When those dimensional attributes are missing, the browser has no way of knowing in advance how much space to allocate for an image. On dial-up connections, you will notice that the text shifts as the images begin to appear, which can be annoying while reading. Therefore, proper code will format the page in advance for a more professional appearance.

Now, for the alt attributes. They look like this:

<img src=”pix/mammamaria.jpg” width=”257″ height=”329″ alt=”Snowing – North End, Boston”>

Notice the additional attribute–alt. What does the alt attribute or tag do? Hover your mouse over the image to the left. Do you see the little text box pop up? See what it reads? Does it look familiar? :)

Alt tags are good coding for several reasons:

1. Alt tags let visitors know an image is being formatted before it is displayed. Like the text visitors read as they wait, they can anticipate the image before it appears.
2. Alt tags aid visitors who can’t see the image whether they are Lynx users–a text based browser on Unix or Linux systems that has no image capability, or users who have images turned off in their browser preferences, or visitors who are visually impaired. Aids for the blind include readers that can tell them the image’s text description and allow them to understand accompanying information about your images. One warning: if our example above had the alt text, “pic1a.gif”, it would be meaningless for our visually impaired visitors. No description of the image provides no benefit about the image itself!
3. Search engines can only read text. Images with alt tags allow search engines to match the description to the site’s content possibly aiding in search engine rankings. Hence, the Google Images search.

So, hover over the images in your website. Do they have the important alt text included? At Thunder Data Systems, we adhere to proper coding standards! If your web developer is not following fundamental and sound web design practices, you should consider talking to our design team.

Occasionally, we add educational or interesting articles like this one to our site. If you are interested in learning more about effective website marketing and design, please subscribe to our mailing list.