Ultimate Image Replacement — The Harry Roberts Method?

Before reading this article and attempting to reuse any code, I recommend you fully understand and familiarise yourself with the Gilder Levin method of image replacement. If you already know this inside out I suggest you skip straight to the good stuff.

I’m not aware of anything similar, and would appreciate any feedback on this method, too. I came up with it completely out of the blue, and haven’t had chance to test it destructively, so please let me know of any issues or flaws. Please pick though the markup on this page and look through the CSS file as much as you like. Oh and if it’s any good can we call it ‘The Harry Roberts Method’? ;)

Replacing text with images on the web

The topic of image replacement is a highly debated one. There are many methods which I won’t discuss here, but you can read up on them at Mezzoblue. There, Dave Shea talks through a number of methods and the pros and cons of each.

The Gilder-Levin Method

My method is actually an extension of the awesome Gilder-Levin method, a favourite of mine as it allows for all combinations of styles/images on/off.

First we’ll remind ourselves of the Gilfer-Levin method. I works by stretching an empty span with a background image applied to it over the top of the element to be replaced:

Example:

CSS Wizardry — Home

Markup:

<h1><a href="http://csswizardry.com/" title="Web Standards Front-end Development"><span></span>CSS Wizardry — Home</a></h1>

CSS:

…
h1 a{
	position:relative;
	width:250px;
	height:50px;
	display:block;
}
h1 a span{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(images/logo.gif) top left no-repeat;
	cursor:pointer;
}
…

The problem here is the empty span. It isn’t the end of the world, but isn’t semantic either. My method addresses this issue.

The Ultimate Image Replacement

My revised method actually adds an image (<img />) to the span. The image in the <img /> tag is exactly the same as the one in the CSS file

CSS Wizardry — Home

<h1><a href="http://csswizardry.com/" title="Web Standards Font-end Development"><span><img src="images/logo.gif" alt="Ultimate Image Replacement" /></span>CSS Wizardry — Home</a></h1>

The image is hidden on screen using display:none; so that it doesn’t interfere with users with CSS enabled. Obviously when it is disabled, users will see an embedded image as well as text. The fact that the text remains intact plays a role in SEO and accessibility for screen readers. However, there is one other useful upshot of using this method: print stylesheets…

When printing a branded page (i.e. with a company’s logo) you want the logo to be visible, but backgrounds aren’t visible on printed documents. By applying display:block; to the image in the print stylesheet it becomes visible on a printed sheet, along with the additional text.

The full CSS is as follows:

Screen CSS:

…
h1 a{
	position:relative;
	width:25em;
	height:15em;
	display:block;
}
h1 a span{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(images/logo.gif) top left no-repeat;
	cursor:pointer;
}
h1 a span img{
	display:none;
}
…

Print CSS:

…
h1 a span img{
	display:block;
}
…

And there you go! As a final little tip, print (preview) this page. Please leave any recommendations/feedback on the associated blog post. Cheers.