Image Replacement

Image replacement techniques are becoming more widespread on the web as designers want more and more control over typography. They are a consequence of the lack of control that we have available to really do what we want. In an ideal world we would not need to use the extraordinary round about methods that we do just to produce some titles or headlines that look nice. Having said that, image replacement has come along way since the early days, when images were just stuffed into the mark-up with the <img> tag, and a bit of alt text added if we were lucky. With the birth of CSS designers came up with much more accessible and efficient ways of replacing text with images.

The UsableType Logo

The logo on this web site, at the top left of your screen (assuming you are using a CSS aware browser) is actually the background image of an <h1> element. Anyone with a modern standards compliant browser with CSS support will see the logo. Anyone without CSS support will see only the text within the <h1>, which would otherwise be hidden by the CSS text-indent property. Now, we have chosen to use this method here because we wanted the branding function of a logo and not just browser rendered text. We felt that the disadvantages of using images for text were outweighed by the branding advantage. Yes… there are disadvantages to this technique.

Accessiblity

No image replacement is 100% accessible to everyone. People who have CSS support but have chosen not to download or display any images will not see any of the <h1> text, or the image—so they may be at a loss as to what the site is called. Furthermore, testing with screen readers has not been found to be 100% successful. Some readers will recognise the text and others may not. Even with these disadvantages there is no doubt that image replacement is a growing feature of the web. Until there are reliable and accessible methods for displaying good looking headers and titles, these work arounds are going to continue increasing in popularity.

Further Information

Everyone’s opinion on image replacement is different. A good starting point to learn about it is the article Using Background-Image to Replace Text by Doug Bowman. For information on the accessibility issues of image replacement read Facts and Opinion About Fahrner Image Replacement by Joe Clarke. For a positive spin on image replacement read In Defense of Fahrner Image Replacement by Dave Shea.