Is it proper to use images inside header tags?

Question

I've done quite a bit of googling on this, but I haven't been able to get a straight answer.

In terms of SEO, how bad is it to use images for your headers? The reason for doing this of course would be to be able to display non-standard fonts. I know it is bad to use images in place of headers, but I'm wondering if this sort of syntax would do anything to make it more search engine friendly:

<h1><img src="header.jpg" alt="Level 1 Header" /></h1>

Does it have the same effect as this?:

<h1>Level 1 Header</h1>

I suspect the answer to this is no. I think search engines probably wouldn't like this because you could put any text in the alt attribute without it actually being displayed on the page. So in that case, what is the best way to use images for headers without sacrificing SEO?

Answer 1

One old trick is to put the real text in the <h1> box, but then use CSS to make the text invisible and put your image in the background.

So you'd do something like:

h1 {
  color: transparent;
  background-image: url(your/cool/image.png);
  width:400px; height: 300px;
}

Astute Stackoverflow member K Ivanov points out that it would probably be better to make the text invisible by positioning it way off the page with "text-indent: -5000px" or something.

Answer 2

It is a recognised practise (neither good nor bad) to use text-indent:-9999px; alongside overflow:hidden; for headings.

This offsets the text by a massive amount then uses the overflow to hide it.

That means you can have a nice big description/title in your <header> and have an image with the description/title the way you want it to appear, that way you get the best of both worlds.

A perfect example of this is: http://www.sohtanaka.com/web-design-blog/

The "LatestWord" section is an image, but if you look at the CSS for the section you will see this technique employed.