Decoding the “IMG” Tag

Update: Dec 4th, 2009

What You Need to Know that You Don’t!

html Have you ever wondered what all those “extra” attributes are in an <IMG> or <A HREF> tag are? Been tempted to just let the development application “fake it” for you? Don’t!Those extra tags are some of the easiest ways to increase your search engine optimization. (SEO)Let’s disect the tags and see what is really going on behind the scenes. Here is a typical HTML line of code calling an image:

<img src=”images/my-dog.jpg”>

The <img> tag tells the server where to find the file “my-dog.jpg” and send it to the user’s browser display. If you hand-coded this in an HTML file, that is all that will appear. If you inserted the image using a web site development application like DreamWearver or WordPress, those applications will add:

<img src=”pix/my-dog.jpg” width=”257″ height=”329″ alt=”my-dog.jpg”>

What Purpose do These Additional Values Serve?

Width and Height Values

At first glance, these may seem superfluous. After all, the image IS 257 pixels by 329 pixels and the browser will know that once the image is displayed. That last is, however, an important condition. If we let the browser “figure it out” after the image has been sent, it will cause the load time to be longer. By putting in the size of the image in the <img> tag, we “warn” the browser how big the picture is. The browser then, in effect, is ready to display the picture sooner. This can be an important user satisfaction factor if your page has a whole lot if pictures on it.

Alt Values

Even more important is the ALT value. The default value is the name of the file…in this case “my-dog.jpg”. Not terribly informative, is it?

Have you ever done an image search on Google? Where do you think Google is finding out what picture to display when you search for “Miami Beach”? Search engines cannot “look” at pictures to see what they are. They have to “read” text that tells them – and the content of the ALT value plays a major role in Google – or any other search engine – knows about your picture.

So, it follows that by taking the time to edit the ALT value to something 1) more specific and 2) with more keyword punch, you can increase your search position. For instance we could change this ALT value to: “The Great Dane Tasha Cruising the Beach in Miami”.

<a href=”pix/my-dog.jpg” width=”257″ height=”329″ alt=”The Great Dane Tasha Cruising the Beach in Miami”>

ALT values also aid sight impaired users. Filling out your ALT values with better content allows sight-challenged users to “hear” more accurately what your picture is about.

This is just one of several things that you need to do to increase your site SEO, but it is an easy and important one.

Happy Coding!

You must be logged in to post a comment.