Section 24.5. Image Replacement | Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))

24.5. Image Replacement

Web designers frustrated with typography limitations on the Web have been replacing text with inline images for more than a decade. The problem with swapping out real text, such as an H1 element, for an img is that the text is removed from the source document entirely. Providing alternative text improves accessibility, but it does not repair the damage to the semantic structure of the document. Not only that, in terms of site maintenance, it's preferable to control matters of presentation from the style sheet and leave the source free of purely decorative elements.

The year 2003 saw the dawn of CSS image replacement techniques that replace a text element with a background image specified in a style sheet. The text element itself is still present in the source document, but is prevented from displaying via some CSS sleight of hand. It should be noted that, as of this writing, there is no ideal solution for CSS image replacement, just different approaches and trade-offs. Most techniques rely on users being able to read the content in images when the text is hidden, which means users who have CSS turned on but images turned off (or who are simply waiting for images to load over a slow connection) are not well served. This problem remains to be solved.

This section introduces the most popular image replacement techniques as of the end of 2005, along with the advantages and disadvantages of each. To check in with the state of image replacement, see David Shea's (of Zen Garden fame) list and articles at www.mezzoblue.com/tests/revised-image-replacement/.

The Future of Image Replacement

In CSS Level 3, image replacement may be accomplished using the expanded capabilities of generated content. To replace an h1 element with an image in CSS 3, the rule would look like this;

     h1 { content: url(headline.gif); }

Unfortunately, current browsers do not support this use of generated content well enough for it to be a viable option as of this writing. Hopefully, one day that will change and the image replacement trickery in this chapter will be a quaint blip in web design's past.

24.5.1. The Original (FIR)

The image replacement technique that started it all is the Fahrner Image Replacement (FIR) technique created by Todd Fahrner and popularized by Doug Bowman. (See the original article at www.stopdesign.com/articles/replace_text/.) It is now discouraged from use due to serious drawbacks (noted later), but it is included here both for historical purposes and because it so clearly illustrates the basic concepts of image replacement.

In FIR, the content of an element is wrapped in a span that is used to hide the text, while a background image is applied to the element and appears in its place. The markup goes like this:

     <h1 ><span>This is the headline.</span></h1>

The styles that hide the text and replace it with a background image are extremely straightforward.

     #header {         background: url(headline.gif
) top left no-repeat;         width: 240
;         height: 20
; }     #header span { display: none; }

The fatal flaw of FIR is that, although the content of the h1 element is preserved in the source document, presumably ensuring its accessibility to all users and devices, it turns out that some screen readers will honor the display: none property and simply not read the element. So FIR fails the accessibility test (as tested and documented by accessibility specialist Joe Clark).

The other aspect of FIR that is generally frowned upon is that it requires the insertion of a meaningless span element into the source, which is considered to be "bad" markup.

Like most other IR techniques, this one won't work if for some reason a user can't see the images but has CSS support turned on in his browser (the "CSS-on/Images-off" scenario).

24.5.2. Leahy/Langridge Image Replacement (LIR)

This technique developed simultaneously by Seamus Leahy and Stuart Langridge hides the text by setting the height of the element to 0 (zero) and setting its text overflow to hidden. The background image is applied to the padding area, which has been set to the height of the image.

     <h1 >This is the headline.</h1>           #header {     /* background image shows through top padding, set to image height */         padding: 20px
0 0 0;         overflow: hidden;         background-image: url(headline.gif);         background-repeat: no-repeat;         height: 0px !important;     /* this is the IE Explorer hack */         height /**/: 20px
;     }

This method offers the following advantages:

No extra span element
Screen reader-accessible

Disadvantages include the following:

It requires a hack to overcome box model problems in Internet Explorer 5 for Windows. Internet Explorer ignores the !important rule (because it doesn't support !important) and overrides it with the second height declaration. Compliant browsers recognize and enforce the first height declaration and ignore the second.
It won't work under the CSS-on/Images-off scenario.

24.5.3. The Rundle/Phark Technique

This technique was developed by Mike Rundle for use on his Phark site. It hides the element text by setting an extremely large negative text-indent that pushes the text off the screen to the left where it can't be seen.

     <h1 >This is the headline.</h1>           #header {         height: 20px ;         text-indent: -5000px ;         background: url(headline.gif ) no-repeat;     }

This method offers the following advantages:

No extra span element.
Screen reader-accessible.
It doesn't use any hacks.

Disadvantages include the following:

It causes problems in Internet Explorer 5.0 for Windows (the background may be moved with the text).
It won't work under the CSS-on/Images-off scenario.
Some search engines look down upon pages that use large negative text-indent values.

24.5.4. The Gilder/Levin Method

This technique, named after Tom Gilder and Levin Alexander, is a bit different than the others in that it displays the text but immediately covers it up with an opaque image placed in an empty span. This is the only image replacement technique that does not suffer from the CSS-on/Images-off accessibility issue.

     <h1 >         <span></span>This is the Headline     </h1>           #header {         width: 240px ;         height: 20px ;         position: relative; }  */ makes this the containing block */           #header span {         background: url(headline.gif ) no-repeat;         position: absolute;         width: 100%;         height: 100%; }

This method offers the following advantages:

Screen reader-accessible.
The text displays if the image doesn't, solving the CSS-on/Images-off dilemma.

Disadvantages include the following:

It uses a non-semantic empty span.
Transparent images allow the text behind them to show through.
Resizing text very large may allow the text to show around the image edges.

24.5.5. Which Should You Use?

Which image replacement technique you use (or whether you use one at all) depends upon your personal priorities and the priorities of your project or client. It might be that one method is appropriate for one site while a different method is appropriate for another.

If you require 100% accessibility, including for users without images, then the Gilder/Levin "cover-up" method is the only option. You'll have to sacrifice semantic purity of the document and allow an empty span. You'll have to stick with opaque images as well.

If you can live with the CSS-on/Images-off scenario, the Rundle/Phark method is the most popular among the standards-conscious designers as of this writing and works well in all browsers. The original FIR method is obsolete and should not be used due to fundamental accessibility issues.