Here’s another, slightly different example of this technique: We start with an alpha-transparent image (in this case, the moon):

and then we apply some style to it to add a background:

img#moon {
  display: block;
  background: url(iIR_sample_bg.jpg) top left no-repeat;
  width: 75px;
  height: 76px;
  padding: 20px 205px 200px 20px;
  margin: 1em auto;
}

which gives us this:

Kinda intersting to experiment with.

http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}

In my experience, this is true even if the images are inside heading elements. If you know otherwise, please tell.

Down in the comments, Roger continues (emphasis his):

It should work like that, but because of keyword spamming in alt attributes, search engines may value such text less. Again, I have no hard evidence, only personal experience. At the moment, I’d go with some kind of image replacement technique if I were to use graphical headings.

Clearly, we need some clarity on this issue. This will be one of the foci of our Web Standards and Search discussions @ SXSWi.

If that is the case, I would agree, but, after extensive Google-ing I have found no evidence that it is.

Really? If I Google “search engine optimization text in headings”, the first result is: Basics of search engine optimisation. The author says:

Using graphics for headings may let you use any typeface you want, but search engines aren’t going to pay much attention. Even if you (as is required) use the alt attribute to specify alternate text for heading images, that text will not be anywhere near as important as real text in a heading element. In my experience, this is true even if the images are inside heading elements.

Because text in a h1 is not the same as the value of the alt attribute of the img element; even if it is placed inside a h1.

If that is the case, I would agree, but, after extensive Google-ing I have found no evidence that it is. Can you provide a link as backup to your argument? I think that’d be very beneficial to the other readers (and me as well).

I will be involved with two search panels at SXSWi this year, “Web Standards and Search” and “Web Standards and SEO.” Both have a number of search experts on them, including folks from the engines themselves. I will discuss this topic with them as well to see if we can suss out the details and present them in March.

I am also curious about an additional tack: If we were to use an alt in addition to a title on the img, how that is considered by the search engines? I do know that both alt and title attributes are indexed, the weight they carry, however, is a mystery to me.

I’ll circle back on this topic once I’ve found something. Please do the same on your end.

I guess I just really don’t see the point of doing that. It’s redundant. With images off, you’d end up with the h1 reading “Twinings of LondonTwinings.”

Because text in a h1 is not the same as the value of the alt attribute of the img element; even if it is placed inside a h1. If you use “Twinings logo” for alt and “Twinings of London” for the h1, you give Search Engines more things to chew on. IMO, a h1 is a very important element, you do not want to “waste” it.

Mark: Thanks, I’m glad you liked it.

I think you make a valid point and I wonder how dial-up users deal with images in general nowadays. The stats may paint a different picture, but, on that rare occasion when I do surf on dial-up, I tend to turn images off. I don’t know if that’s a common practice now or not, but I believe some of the stats programs out there could tell you the numbers for your audience. That would be a good place to look for guidance if you are considering an approach like this.

We certainly should not make any assumptions (or you know what) about users turning off images when on dial-up and I strongly advise against using tons of super high-resolution images on a single page, with or without iIR. As with many things in life, iIR’s best used in moderation.