Image Attribute

Giving your images the proper tags is important not only to search engines, but to users as well.

Search engines like google generally index an image using an alt tag. If you think about it though, google is not the only one with a hard time seeing images. Blind web users and web surfers that use text based browsers (i personally know a tech guy who this is normal for) can not see that fancy image of yours. That is why it is important to properly describe your image with the alt attribute.

here is how the alt attribute works:

<img src=”image-source.jpg” alt=”alternate text” />

Do not fall into the trap of overly describing your image. This is not a pixel by pixel description. It should be meaningful and concisely give the user an idea of what the image is. Pretend that instead of that image there was a box with your alt text inside of it. In the case of a blind user, or text based browsing, the image will be replaced with the alt text.

Just as well, you can add a title attribute for extra information to the user. You would do that as so:

<img title=”image title text goes here” src=”image-source.jpg” alt=”alternate text” />

The title is typically displayed in a browser when a user hover’s their mouse over the image. The title should be used to give the viewer more context about the image, such as what will happen when the user clicks the image, or what the purpose of the image is.

here is a working example from my site:

<img class=”twitter” title=”Twitter” src=”/~zdm9/labiv/images/twitter.png” alt=”Bird Icon: Twitter” />

In the end, if you properly fill out your attributes, users will appreciate it, screen readers will appreciate it, search engines will appreciate it, and you will be satisfied at the positive effect it has on your site.


~ by zacdavidm on September 24, 2012.

One Response to “Image Attribute”

  1. Dear ZacDavidM,
    Your blog was was very informational but was hard to follow. I had trouble seeing what the next step was throughout the process. An introduction to what you are trying to show the reader would have been helpful. You sound like you know exactly what you are doing and I think that is why it is hard to follow. For you this may be an easy task but for those who have never worked with this type of computer software this task may be difficult. I would suggest breaking it into clearer steps for those who are beginners to follow. Other than that I feel like you know what you are talking about and I trust that I would be able to use your DIY to enhance my website.
    Julia M

Comments are closed.

%d bloggers like this: