Why Image Replacement is So Important If you already understand the fundamentals of image replacement, you can safely skip this section. Otherwise, let%u2019s talk about it for a moment. Styling text with CSS alone is basically limited to the selection of a few typefaces and flat-shaded coloring. Displaying effects like reflections, shadows, and perspective transformations to all users is a task that%u2019s simply impossible given the level of support by web browsers in current use. The only reliable alternative for web designers is to display an image that contains these effects (created in a graphics program like Photoshop). And the most basic technique for displaying this image%u2014a technique that was common even before CSS gained widespread use%u2014is to embed that image in a page using an  tag. However, using the img element to display what%u2019s essentially textual information introduces a lot of complications. For one, when images are turned off, the page sometimes degrades insufficiently, especially in Internet Explorer. Secondly, because the actual text is separate to the markup, screen readers and search engines may be unable to read that text properly. Finally, depending on how the image was created, updating the text in the image can be inconvenient. One solution is to use image replacement, the practice of placing text inside an HTML element, then using CSS to replace that text with an upgraded version%u2014the image. Unfortunately, because there are many different approaches (see Dave Shea%u2019s excellent summary for a comprehensive list), each method to accomplish this can produce new complications of their own. Web designers need an image replacement method that works without compromise%u2014one that supports printing, degrades gracefully when images have been turned off in the client browser, imposes only necessary markup, and is simple enough to be used by anyone. The Problem with Other Methods Most other image replacement techniques (Fahrner, Phark, Gilder/Levin, Leahy/Langridge) use the same CSS when images are on and off. I%u2019ve come to the conclusion that it%u2019s important to make use of different CSS when images are on and off, otherwise the result suffers from one or more of the following side effects: * The technique breaks easily%u2014for example, when images are disabled or if the replaced image has transparent regions. * It%u2019s too complex to be implemented rapidly and reliably. * The technique uses JavaScript to traverse the DOM tree, which causes an undesirable flicker while the page loads (and is brittle for a variety of other reasons). * The technique may be incompatible with some browsers. The @media block lets us scope CSS to different media types, but we%u2019re without a useable construct to show different CSS when images are on or off. I%u2019m unsure how the W3C missed this, but they did, even in the latest CSS3 media queries module. The ability to use declarations like the following would be ideal: h1 /* This rule would theoretically only be displayed when images are on */ @media images-on { h1 } I believe that this shortcoming is the reason why all of the techniques proposed to date have been weak at best. The good news: it%u2019s possible to fake this syntax with a little ingenuity. A New Image Replacement Method I%u2019m proposing a new way to do image replacement. I%u2019ve named my technique State Scope image replacement, because the technique uses JavaScript to set an %u201Cimages are on%u201D state across the entire page. State Scope image replacement requires JavaScript, but implementing it is easy. Include a small script (available for download here) into the element of your document. Once this script is in place, appending .images-on before any CSS rule on your web site will cause that rule to be applied only when images are enabled in the client browser. Here%u2019s an example where State Scope image replacement is used on an h1 element: h1 { width: 100px; height: 50px; } @media screen { .images-on h1 { text-indent: -10000px; background-image: url(image.png); overflow: hidden; } }