Update 4/11/06: I’ve received some criticism on this post from people who assumed I was saying you should never use image tags in HTML. My bad for the misleading title, I’ve added to the title in parens to be more concise! For those that didn’t read the whole post, in the last paragraph I say that it’s fine to use HTML image tags for content, I just think it’s bad design to use image tags for style elements. Anyhow, thanks for all the feedback (postive and negative) and here’s the original post:

CSS offers us a lot of power to style and decorate our pages with images, however, replacing text with an image is one gap not well addressed by CSS such that you often see sites doing:

<a href=”/”><img alt=”Home” src=”home.gif”/></a>

which is obviously bad for 2 reasons:



1. It violates the separation of content and design by including a design element in your HTML

2. Your SEO will suffer because image alt tags don’t carry as much weight as real text

As a result a number of people have come up with clever image replacement techniques in CSS. It began in 2003 with the Fahrner Image Replacement technique (or Classic FIR), however, the technique I currently favor is the Mike Rundle’s Phark revised method which:

1. Works well cross browser (but be sure to test in IE 5 for possible issues if you’re still supporting it)

2. Works with a screen reader such as JAWS for accessibility

3. Works well for SEO (many techniques style the text with display:none which likely won’t work with the next generation of crawlers such as Google’s new Mozilla based crawler)

Taking the example above, the correct approach would be as follows:

<a id=”home” href=”/”>Home</a>

Then apply the Phark revised method via CSS:

#home {

display: block;

text-indent: -9000px;

background: url(/images/home.gif) no-repeat;

height: 25px;

width: 100px;

}

Here’s the result:

About Us

Now we’ve replaced the text with an image yet still kept the separation of content and design clean. I stated that it’s bad design to use image tags in your HTML but I’d like to qualify that, it’s fine if your “content” is an image such as a product photograph in a web catalog, a graph, or a headshot in your user profile. Also I think it’s fine to bail on image replacement if you start wasting a lot of time in CSS layout land, it’s just good to start with the clean text based approach first and use it until it becomes impractical.