The Perfect Image Replacement

**AndrewDay** · Mar 21, 2004 16:36

I just posted this over at my blog and thought it would be useful to you all:

I just re-implimented a new version of image replacement which I stole from MezzoBlue. It makes it so that the banner is inserted via CSS and is a link. For those of you who don't know, the advantage of an image replacement is that it boost your search engine ratings because search engines value <h?> tags more then any other tag save for the <title> tag. Also, it leaves your (X)HTML to be more about the content and less about design which is always preferable. There are more advantages for image replacement, but that's a subject for another time. Here some example code of the "perfect" image replacement in action:

CSS:

h1 {
margin: 0;
padding: 0;
}

#pageHeader h1 a:link, #pageHeader h1 a:visited {
background-image: url(images/banner.jpg);
width: bannerwidth.px;
height: bannerheight.px;
margin: 0;
display: block;
}

#pageHeader h1 span, #pageHeader h2, #pageHeader h3 {display: none;
}

HTML:

<div id=”pageHeader”>
<h1><a href=”/”><span>Page title</span></a></h1>
<h2><span>Description</span></h2>
<h3><span>Copyright Info (I deleted this line)</span></h3>
</div>

**Paul O'B** · Mar 21, 2004 17:31

Hi,

Thanks for sharing

A few questions :

1) What's this commented out section for?

Code:

/*#pageHeader h1 a:link, #pageHeader h1 a:visited {
background: #fff url(images/banner.jpg) top left no-repeat;
width: bannerwidth.px;
height: bannerheight.px;
margin: 0;
display: block;
}*/

It seems to be almost a duplicate of the code that follows. This may confuse some people who think that this code always has to be added

2) Why the span in these 2?

Code:

<h2><span>Description</span></h2>
<h3><span>Copyright Info (I deleted this line)</span></h3>

You are turning the h2 and h3 off with display:none so the span seems unnecessary. Unless you meant to add the span here #pageHeader h2 span.

If you are hiding the h2 and h3 and they are merely there to provide text that you hide then this may be considered spamming.

3)What makes this perfect and different from other image replacement techniques - just so we know

I'm not picking holes in it on purpose, just trying to make it clear to other people before they use the techniques

Still thanks for sharing it with us.

Paul

**AndrewDay** · Mar 21, 2004 17:55

the good part about it is that it is readable in screen readers and includes a banner link. I'm looking into why you do the two other things you mentioned right now... i think it's because some browsers are stupid but maybe not.

**AndrewDay** · Mar 21, 2004 18:08

i've decided the extra CSS isn't needed.... it might be something for IE 5.1 or something like that but who cares?

**junjun** · Mar 21, 2004 18:12

Originally Posted by AndrewDay

i've decided the extra CSS isn't needed.... it might be something for IE 5.1 or something like that but who cares?

Hi Andrew,
Can we conclude you copied this CSS from somewhere else? ;-)
I mean, if you wrote it, you surely would know what it was there for..

**Zoef** · Mar 21, 2004 19:13

Originally Posted by AndrewDay

the good part about it is that it is readable in screen readers

It is my understanding that most screenreaders don't read out elements that have 'display:none' set on them.

Also, like all image replacement techniques that I have seen, with images off and CSS on, nothing will be shown, not even an alt tag. For this reason alone I'm staying clear of it so far.

Rik

**Paul O'B** · Mar 22, 2004 09:52

this is David Shae we're talking about! He is a css god

Aren't we all lol

Originally Posted by Zoef

Also, like all image replacement techniques that I have seen, with images off and CSS on, nothing will be shown,

I like a challenge

10 mins later..............

How about this one then?

Works with images off and css on. Works with css off and images on. Doesn't even attempt to hide the text or move it sideways. Just leave it where it is and cover it up with a background image in the anchor (or span if you don't need a hyperlink).

http://www.pmob.co.uk/temp/headerreplacement2.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1 {
height:40px;
width:400px;
position:relative;
}
h1 a {
background: transparent url(images/pob.gif) no-repeat left top;
position:absolute;
left:0;top:0;
display:block;
height:40px;
width:400px;
}
</style>
</head>
<body>
<h1>This is the header text<a href="http://www.pmob.co.uk/faqcss" title="This is the header text"></a></h1>
<p>Turn images off and the header text will appear</p>
</body>
</html>

Just make sure the banner is big enough to hide your heading text.

I find it amusing that people cobble together some css and then say that they've just invented the wheel when a lot of us use these techniques daily without giving fancy names to them.

I'm going to call my version. MEOIRLOL (My Example Of Image Replacement LOL)

Paul (tongue in-cheek)

**AndrewDay** · Mar 22, 2004 12:36

Originally Posted by junjun

Hi Andrew,
Can we conclude you copied this CSS from somewhere else? ;-)
I mean, if you wrote it, you surely would know what it was there for..

if you would have read

I just re-implimented a new version of image replacement which I stole from MezzoBlue.

but thanks for trying to make me look like a fool... always appreciated.

**AndrewDay** · Mar 22, 2004 12:38

Originally Posted by Zoef

Also, like all image replacement techniques that I have seen, with images off and CSS on, nothing will be shown, not even an alt tag. For this reason alone I'm staying clear of it so far.

incorrect... with CSS off it shows the <h1></h1> content so you make the <h1> the title of you site because w/o the css the browser doesn't know to make them not display!

**megamanXplosion** · Mar 22, 2004 13:37

Andrew, his point was that if CSS is turned on then it will try to replace the text with an image, but if images are disabled then nothing will be shown to the user, not even the text. Often when I am downloading something (56k here) I will turn off images so that I can view sites a lot quicker, and this would leave me with ummm, nothing. I would have to agree with him, that's enough reasoning to avoid using image replacement.

If your main reasoning to do this is for search engine optimization then you could just put an <h1> at the very top of the page and hide it with CSS. I have done this on my site Everything Capcom (link in signature), and I unhide the H1 and hide the header image when the page is being printed. This way, I get the SEO benefits and give my users an effecient printer-friendly version. Just a thought.

**junjun** · Mar 22, 2004 13:44

Originally Posted by AndrewDay

but thanks for trying to make me look like a fool... always appreciated.

I think you missed my squinty-eye smilie in there :-)

But, when boldly call this code the 'perfect image replacement' you should expect people inspecting your code.

**AndrewDay** · Mar 22, 2004 14:23

Originally Posted by junjun

I think you missed my squinty-eye smilie in there :-)

But, when boldly call this code the 'perfect image replacement' you should expect people inspecting your code.

I'm sure that all the code is neccesary.... this is David Shae we're talking about! He is a css god

BUT it doesn't logically seem neccesary to me but I'm naive about this kind of stuff.

**Zoef** · Mar 22, 2004 19:13

Will the real CSS god please stand up?

You should be writing for alistapart, Paul.

Originally Posted by Paul O'B

Just make sure the banner is big enough to hide your heading text.

Just thinking here... One could experiment with defining heights and widths in em's, keeping the aspect ratio and maybe oversizing the banner graphic somewhat. Might also want to have the body's font-size set in px (to have a 'fixed' relationship betweeen px and em's).

Originally Posted by Paul O'B

I'm going to call my version. MEOIRLOL (My Example Of Image Replacement LOL)

Nah, just call it perfect

.

Off Topic:

Building an altar. Can I have a strain of your hair, Paul?

Rik (tongue very firmly in cheek indeed)

**AndrewDay** · Mar 22, 2004 20:24

Paul,

I thought about doing something like your arrangement but I figured that therir must have been a reason that no one has suggested that... Great idea though I'll try it out...

Andrew

**Paul O'B** · Mar 23, 2004 06:18

Originally Posted by rik

Just thinking here... One could experiment with defining heights and widths in em's, keeping the aspect ratio and maybe oversizing the banner graphic somewhat. Might also want to have the body's font-size set in px (to have a 'fixed' relationship betweeen px and em's).

Good idea - it will keep it hidden if text is resized etc

Will the real CSS god please stand up?

Why is everybody standing up lol

Originally Posted by Andrew

Great idea though I'll try it out...

Feel free to experiment and improve it. After all it's only CSS

Paul

**junjun** · Mar 23, 2004 12:48

Fitting for this topic is the latest scripting blog entry from Simon Willison.
http://www.sitepoint.com/blog-post-view.php?id=159732

He talks about SxSW Interactive, and Doug Bowman announcing image replacement as dead.

Simon writes:

Although designed to improve accessibility, the technique actually has the opposite effect thanks to many screen readers ignoring text that has been set to display: none in the CSS. Joe Clark's article in A List Apart from last year has the full technical details.
Various other image replacement techniques have sprung up to replace FIR, but so far every one of them has the distinct disadvantage of rendering content completely invisible for users with images turned off in their browser.

And then concludes:

My recommendation is to avoid image replacement techniques unless the usability of the site is not hugely affected by the replaced text not being visible at all. Unfortunately this rules the technique out in most cases. Remember though, from an accessibility point of view an image with a properly chosen alt attribute is just as accessible as plain HTM text!

**junjun** · Mar 23, 2004 13:00

Doug's presentation is available online too
http://www.stopdesign.com/present/sxsw2004/goodbad/

**Paul O'B** · Mar 23, 2004 16:17

Hi junjun,

Thanks for the links 2 two of the worst presented sites I've seen

SxSW Interactive,

What monitor was that designed for 3000px x 3000px ? What an earth's going on there.

Also:

http://www.stopdesign.com/present/sxsw2004/goodbad/

Opening splash page - couldn't find any navigation!!

Clicked everything on the page twice and nothing happened. Then I noticed a faded out gif in the top right corner that was barely visible under the layer of dust on my screen.

This leads to , wait for it, a blank page! Had to refresh page before anything appeared. This seemed to happen all through the site.

If people are to write off techniques due to their lack of accessibility then they should put their own houses in order first I think lol.

techniques have sprung up to replace FIR, but so far every one of them has the distinct disadvantage of rendering content completely invisible for users with images turned off in their browser

Not true with my example

.

I'm not a fan of image replacement techniques to replace every heading etc but I can see that some designers will like the choice of presenting something more appealing than standard text.

If it works with images off then I think its fair to use it.

Paul (still tongue in cheek)

**junjun** · Mar 23, 2004 20:24

Originally Posted by Paul O'B

What an earth's going on there.

lol, don't look at me, I'm only giving you a link to the goods ;-)

Originally Posted by Paul O'B

If it works with images off then I think its fair to use it.

I won't argue with you, people have different view on which techiques are 'ok' to use and which are not. I've never liked techniques that are not meant for the browser/user but solemnly for the search engines.
Yours seems to degrade gracefully tough, which actually makes it a little different.

At least there's light in the tunnel with CSS3, but God knows how long it would take for enough users to switch once css3 is a recommendation and browsers have started supporting it.

**Paul O'B** · Mar 24, 2004 03:36

[quote-junjun]
lol, don't look at me, I'm only giving you a link to the goods ;-)
[/quote]

I've never liked techniques that are not meant for the browser/user but solemnly for the search engines.

I agree that it would be wrong in that case as I think we should make the pages for people first. I don't agree with doing unnecessary things just for search engines either. If it's right for the page and the visitor should be the most important point.

Of course everything is open to abuse and if people can spam a few more keywords in then they will try and do it lol.

I think replacing all headings with images is a bit over the top but if you want a banner heading then you may as well use an image replacement like the one above) because you are providing the banner (as per normal) and also text for screen readers. If images are turned off everyone gets the text.

At least there's light in the tunnel with CSS3

I'll be too old by then lol

Paul

**Zoef** · Mar 25, 2004 19:42

Came across this today and I thought I'd add it to this thread: http://www.mezzoblue.com/tests/revis...e-replacement/
It gives an overview of all image replacement techniques known to man at this point in history.

Btw, Paul, the "Gilder/Levin Method" mentioned on that page is very similar to what you cooked up.

Rik

**redux** · Mar 25, 2004 19:58

Originally Posted by AndrewDay

it boost your search engine ratings because search engines value <h?> tags more then any other tag

which is why, if it's a title, i often do

Code:

<h1><img src="blah.jpg" alt="the text of the image" /></h1>

Paul, i like your idea of covering the text up with a background image...the only problem comes when you want/need the background of that element to be transparent - for whatever reason. good stuff nonetheless

**Paul O'B** · Mar 26, 2004 02:58

Originally Posted by Rik

Btw, Paul, the "Gilder/Levin Method" mentioned on that page is very similar to what you cooked up.

Great minds think alike lol

As I've been saying for some time, it's only CSS and some of us have been using techniques like this (and others) without giving silly names to them.

Perhaps we should invent names for every css command statement

I've got one......... #pob {color:red}

I'm sorry but no-one else is allowed to use my method above without my permission lol. The colour red is now mine forever.

Originally Posted by redux

Paul, i like your idea of covering the text up with a background image...the only problem comes when you want/need the background of that element to be transparent - for whatever reason. good stuff nonetheless

Thanks Redux, and I agree that it is a drawback (or could it be a feature

of the method if transparency is required.

Paul

**KalinaWD** · Mar 26, 2004 04:20

Thanks for the info, it's very useful!

**rakess** · Oct 13, 2004 07:59

Ok paul stupid Question.

Why does the link show up on the text and the image when the link tag is not surrounding anything???

I don't understand why this works but i have needed it for a while!!!

Thanks

RAKESS

OK Now i do feel stupid i just figured that one out but is there a way to have images and CSS turned off that the link is still there?

User Tag List

Thread: The Perfect Image Replacement

Thread Tools

Display

The Perfect Image Replacement

Image Replacement dead

Ok stupid Question

Bookmarks

Bookmarks

Posting Permissions