Image Replacement Techniques

Some websites have to use specific fonts in order to maintain its brand identity. As you can only guarantee your visitors will have a few common fonts, images are often used on headings to stick keep the  corporate look. For most SEO specialists this is a wasted of an opportunity to include some search engine readable headings. Fortunately, there is a technique that incorporates the two.

Image replacement is a technique that allows you to write a heading or sub-heading but show an image on the page. Using this method,  main headings, sub-headings can be used and preserve the document outline of the page. There are three ways that this is usually done.

Placing the text off the screen:

HTML:

  <div class="image-replacement">
    <h1">Main Heading</h1>
  </div>

CSS:

.image-replacement {
  background: url(../img/main-heading.gif) 0 0 no-repeat;
  display: block;
  height: 26px;
  width: 145px;
  text-indent: -9999px;
}

This simply places the text way out of view. Although it works, there is something which I find cumbersome about this technique.  A more elegant way to achieve the same effect is with Farhner Image Replacement (FIR).
HTML:

  <div class="image-replacement">
    <h1><span>Main Heading</span></h1>
 </div>

CSS:

.image-replacement {
  background: url(../img/main-heading.gif) 0 0 no-repeat;
  display: block;
  width: 145x;
  height: 26px;
}
span {
  display:none;
}

Finally, in this example the add padding  to the height of the image and then hiding the text using overflow hidden. Also, we’re setting the height to zero.

HTML:

  <div class="image-replacement">
    <h1>Main heading</h1>
  </div>

CSS:

.image-replacement {
  background: url(../img/main-heading.gif) 0 0 no-repeat;
  display: block;
  height: 0px !important;
  overflow: hidden;
  padding: 26px 0 0;
  width: 145px;
}

All the technqiues using CSS can be detected and it is believed that sites might be penalised for this however it should be okay if used correctly and sparingly. Some evidence for this was given at an event Apart in 2008.