Archive —

"Hammer, anvil, forge and fire, chase away The Hoof'ed Liar. / Roof and doorway, block and beam, chase The Trickster from our dreams."

December 4, 2003

I've used (and independently devised) the Fahrner Image Replacement technique (FIR for short, named after Todd Fahrner), but I didn't discover the correct term for it until now. It's pretty simple. Say you want a heading as an image while still preserving the stylized text the image shows in plain text form. This is the old HTML way:

<h1><img src="img/header.png" alt="The history of England" height="50" width="150"></h1>

That would certainly display the alt value for people using a text-only browser like the Links browser or Lynx, but search robots index alt values differently than pure HTML text. That image is a presentational feature, and should be kept in CSS. It's fairly easily done:

<h1><span>The history of England</span></h1>

Apply CSS:

h1 {
  background-image: url(pics/header.png);
  background-repeat: no-repeat;
  height: 50px;

h1 span {
  display: none;

Of course, this method isn't bullet-proof.'s article on FIR (where I discovered the term) covers much, and provides links for further reading and alternative methods (such as LIR).

The redesign is moving along at a reasonable pace.

<< | Previous entry (December 1, 2003) | Next entry (December 11, 2003) | >>
Back to Archive