Replacing header text with an image

Question

I am working on setting up a Drupal based website and wanted to replace the site title in the header with an image file. I came across this article: "Revised Image Replacement" summarizing several techniques for doing just that.

I was wondering what the current best practice is, in terms of SEO and browser compatibility?

Answer 1

I used to think the Leahy/Langridge method was the best, however as I have used it more and more I have found the Phark method to be both easier to implement, just as effective and more useful, as you can have links within the headers as well (something I never got working before).

Both of those require no extra markup and I don't think (if Google's Matt Cutts is to be believed) there is much, if any, bad effects on SEO (ie Google won't penalise you for hiding text as long as it doesn't appear spammy).

Both don't work, or take extra work to make work, in IE5, but I don't know of anyone who supports that anymore.

So I would recommend the Phark (or Phark Revisited, which works best) method.

Answer 2

Use CSS and override whatever element you have the 'text' in like this: (Phark Method)

Html:

<h1>Header</h1>

CSS:

h1 {
text-indent: -9999px;
background: url('image.png') no-repeat top left;
}

Answer 3

The only problem that none of these techniques have really addressed, although it is a marginal edge case these days, is if someone has images turned off.

I have generally found the Phark method to be pretty easy to implement, and nearly always works, but you can also look at javascript methods - pretty easy to write your own.