CSS Text/Image replacement, SEO Penalty?

Will replacing text with images hurt SEO.

[Matt McInvale]

I am working on converting a table/javascript based site to be an XHTML/CSS site. I am using 2 text/image replacements per page (ie. <h1> & <h2> tags) using CSS positioning and hidden overflow.

I do not see a problem with anything that I am doing because the user sees a graphic that represents the text I replacing. However, I was talking with a friend who is heavy into SEO and he thought that the text/image replacement would be caught by Google/Yahoo/MSN as cloaking.

Does anyone have any experience with this? Thanks.

[XtendScott]

Is this what you mean?

<h1><span>Mydomain.com has great widgets</span><h1>

css:

h1 {
background: url(myimage.gif);
height:30px;
width:30px;
}
h1 span {
display:none;
}

This can be to hide the text, and "could" be used for print vs. screen rendering. For SEO right now, I don't know that SE's are penalizing it but it is an area that can be abused and could be decreased value or potential penalty.

It is unknown how smart SE's are with CSS, I dought they are perfect.

XS

[jetboy_70]

If you use the image replacement as it's meant to be used, to provide a text alternative to a graphic, then there will be no problems at all.

It only becomes a problem if you use it for keyword stuffing, and even then it's most likely to get caught as part of a manual check.

It's a worthwhile technique, and you shouldn't be afraid to use it.

[Matt McInvale]

Here is what I have in my HTML:

<h1>Company Name - Company Slogan</h1>

Then in my CSS:

h1
{
background: url("images/header.gif");
text-indent: -100em;
overflow: hidden;
width: 208px;
height: 243px;
}

the image/header.gif is just the company logo with the company slogan... using the same technique for my <h2> tags as well...

thanks for the input.

[createErrorMsg]

I don't think that's technically an 'image replacement' technique at all. The image is background and the text is simply moved off-stage by the indent.

My understanding is that techniques using display:none or visibility: hidden may cause SE problems (and almost definitely accessibility ones), but I don't think a spider would even notice the technique you're using.