Image replacement technique

Hello,

What are the advantages of Image replacement over the <IMG> tag?

What do you think is the impact on SEO (since it hides text and G. may dislike it)?

Thanks.

 

Done correctly, there should be zero SEO difference between an <img> with alt text, and image-replacement. Google supports accessibility and treats keyword stuffing, whether done with image-replacement or in alt text, as keyword stuffing: worthless.

The main advantage to image replacement is

unlike alt text, you can style your text much richer.

You can do this with images:
<h1><img src="blah.png" width="" height="" alt="hi i can haz cheezburger?"></h1>

img {
  color: #00f;
  font: bold italic 2em "marker felt", "arial black", "comic sans", sans-serif;
  text-decoration: underline;
}

Code (markup):

those styles can be applied to alt text, if CSS is on.
But with image replacement you can
<h1>hi <span class="cheez">i can haz <span>cheezburger</span></span>?<span></span></h1>

h1 {
  styles;
  position: relative;
  font-size: 1em;
}
h1 span {
  position: absolute;
  width, height, coords;
  background: url(blah.png) 0 0 no-repeat;
}
h1 span.cheez {
  position: static;
  background: none;
  color: orange;
}
h1 span.cheez span {
  font-weight: bold;
  font-size: 3em;
}

Code (markup):

That to me is the biggest advantage of image replacement: richer styling of the text when the image doesn't show.

Second biggest advantage is, easier to do Sliding Doors with CSS sprites. It can be done with HTML <img> but it's harder, you need to be careful and pixel-perfect with overflow, and then something for IE6.

Otherwise, there is no difference. What you see in Lynx or any other text browser, is what google sees. In both cases here, it's

first-level-header: hi i can haz cheezburger?