Why Images As Links Are Better Than Text As Links

This is a hugely debated topic, the biggest argument against this technique of using images as link buttons being that large (kb size) graphic-ladden pages unnecessarily clog the bandwidth. The other very popular argument is the new _old_skool where some people want the web to looks and feel like a circa 1980s BBS. I think I can shed a little light on why I can get all the bang of a thin-web technique with a powerful combo of benefits in usability and SEO (search engine optimization, for any newbies out there.)

One of the most popularly overlooked indexed realities on the web is the graphic, specifically the IMG tag. Nobody is going to create an IMG tag without defining its SRC attribute, but I know plenty of people who do not go back and fill in the ALT attribute (side note: the ALT is an attribute of the IMG tag, and I have heard a number of people refer to the "ATL tag" and when we talk like this we are mixing our metaphors. Technically, ALT is meant to define alternate text definition for the image the IMG tag is displaying. Some people like to imagine that by filling in the ALT attribute they are "socially tagging" their image. While that may be true, most people are actually refering to HTML syntax and not social tagging, so, if you are having a technical discussion about HTML tags, please refer to it as the ALT attribute.) In some cases this actually makes sense. Since a screen reader will read through the HTML tags on a page, if you don't fill in some of the tags for images that create layout but do not communicate something specific, then it might be better to leave the ALT attributes blank. But in many cases it is just more important to go ahead and give an alternative definition to the image. With this in mind, lets consider how a search engine indexes a website.

The most popularly acknowledged technique for a search engine in indexing a page is that a crawler hunts down the "A" tags on a page and associates the text within the "A" tag with the HREF attribute in the "A" tag. Simple, right? What if the "text" inside the "A" tag is an IMG that says "Read Me" in the graphic (I don't advocate this technique in text, since it does not clue the reader into what they would be reading about). What will the search engine index on? If you didn't have a graphic and just had text that said "read me" then if someone did a search on "read me" at google, your link would come up. How horrible is that? Let me tell you. That is bad. So, number one for SEO would be a text link that actually describes what you are clicking on (eg. click to read more about Search Engine Optimization ). But, if you want to use a graphic, then create a single graphic that you can reuse (that the browser will cache and continue to reference without multiple downloads) but set the ALT attribute to something uber-meaningful. This way the search engine will associate your image ALT value with the URL in the "A" tag. You get some very optimized eyecandy with an excellent SEO value to boot.

In terms of usability, remember that people spend the majority of their time on the web looking for something. This is why the statistics show that the largest interaction on the web by an astounding degree is: a surfer hitting the back button. The most redundant and frustrating activity on the web is the negative experience of following a link and then saying to yourself, "well, not what I was looking for" then hitting the back button. You don't want to navigate your users into this black hole experience simply because you gave them links that did not do a good job at targeting/explaining the content at the other end of the link. The best way to avoid this is to optimize the link message. The worst example of this (you can read about this in my blog entry Click To Read More ) is the textual "read more" link. The best is to adjust the textual link to include the actual descriptive message in the link. But if you have a site that would work best if you used a graphical link, then remember to set the most descriptive value for the ALT attribute.