Archive — hermiene.net

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. stopdesign.com'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.