Comments on: Using Image replacement techniques

By: Joseph Zimmerman

Joseph Zimmerman — Sat, 08 Nov 2008 06:43:54 +0000

Once again sorry. I've got it figured out now. I'm just redoing the whole post. My Favorite is the Fahrner Method: HTML:


Hello World

CSS:


h1 {
background-image:url(”hello_world.gif”);
background-repeat:no-repeat;
height:35px;
}
h1 span {
display:none;
-or- (either works and doesn’t make much difference between screen readers)
visibility:hidden;
}

If CSS is disabled it will show the text but if images are disabled nothing shows unless CSS is disabled too.

By: Joseph Zimmerman

Joseph Zimmerman — Sat, 08 Nov 2008 06:39:19 +0000

Sorry About the Last post. Under HTML I wanted:


Hello World

By: Joseph Zimmerman

Joseph Zimmerman — Sat, 08 Nov 2008 06:36:20 +0000

My Favorite is the Fahrner Method

HTML:

Hello world!

CSS:
h1 {
background-image:url(“hello_world.gif”);
background-repeat:no-repeat;
height:35px;
}
h1 span {
display:none;
-or- (either works and doesn’t make much difference between screen readers)
visibility:hidden;
}

If CSS is disabled it will show the text but if images are disabled nothing shows unless CSS is disabled too.

By: 3:00

3:00 — Fri, 25 Jan 2008 18:53:23 +0000

This is great info. Does the third option ensure that search engines will not see this as a black hat technique?

By: Alex

Alex — Mon, 12 Feb 2007 10:02:53 +0000

There seems to be a bit of confusion going on ATM. Method 1 isn’t image replacement. The whole concept behind image replacement (rightly or wrongly) is to take garden-variety text and replace it with an image version of the same text. There is nothing to replace there.

The default behaviour of any browser (AFAIK) is to display the ALT text whenever the image isn’t available, which is what is happening there.

Putting a H1 around the image may cause the ALT text to appear larger in non-IE browsers (even IE7 still shows all ALT text 12px high with the ‘missing image’ icon — regardless of H1s, etc), but whether ‘the Google’ and other SEs would give your ALT text the importance of other H1 content is doubtful IMHO.

That doesn’t mean it’s wrong. It’s still the safest way to operate generally, but it doesn’t really qualify as IR.

By: Anthony Brewitt

Anthony Brewitt — Mon, 12 Feb 2007 10:01:39 +0000

I have been playing with some of these and prefer A and B myself. Everybody’s heard of the Flash image replacement but my problem with that is your users have to have the flash plug in, I think this adds another layer of complications. But the futures bright as I am sure I remember reading that css3 has font embedding. Lets just hope css3 arrives in our lifetimes.

By: Will

Will — Mon, 12 Feb 2007 10:00:42 +0000

Good article. I use the Phark Method i think