Image replacement is a useful means of putting your heading content in your XHTML file as text, but overlaying an image, so that you still get all the benefits of pretty fonts in your headings without compromising the benefits of screenreader accessibility.
There is a school of thought which says that Image Replacement is a silly idea. (X)HTML does provide for screenreaders and other image-unfriendly devices already. <img> has the alt attribute and <object> has element content. You might be able to justify image replacement if you have concerns about browser support for <object> and if you want to use other then plain text (i.e. markup such as <abbr> which can't exist inside an alt attribute).
Most image replacement techniques suffer from serious accessibility problems for users who turn images off (there are lots of people who have to pay for their internet access by data transferred, not everybody is on unmetered or per second billing, or who just have slow connections) but CSS on.
CSS Image Replacement
FIR
Fahrner Image Replacement (FIR) is the original and uses display: none, but suffers from major accessibility problems. The articles about it are still worth a read to learn about the reasoning behind image replacement in the first place.
Methods that move or hide the text
The nice thing about most of these methods is that they don't require an extra span in the markup. The downside is that when images are off, the user sees nothing. Thus, these methods are not preferred, and should only be used if you need a transparent image.
- [LIR by Stuart Langridge] - more reliable than Tom Gilder's, when used with floated elements, apparently, for some reason. Basically the same as Leahy's method, but requires an extra span.
Examples
- [PhotoMatt's blog], which generates the images dynamically. Personally, I think that's just showing off, but it's rather cool. Text is moved OffLeft, which means when images are disabled the user sees nothing.
Methods that cover up the text
These all work with CSS on and images off, but require the use of extra markup. Most agree this is worth it for the accessibility benefit. The other downside to these methods is that they don't work with transparent images, as the image has to sit over the text.
- [Tom Gilder's Image Transform] by avoiding OffLeft, this can handle users with images turned off, similar to Pixy's version. If you find the text is showing up on top of the replacement image, it's that you've forgotten to put span at the end of your background-image declaration, like I just did. Easy to omit, bloody difficult to debug, if you've got long ids! :o) — OwenBlacker
- [Mike Ryznar and Harley Jacoubsen's adaptation of the Gilder/Levin method] Includes a few additions to the Gilder/Levin method such as further IEmac compatibility. (All Gilder/Levin IR methods including these adaptations work successfully in CSS-on/Images-off situations.) This page also describes some other solutions but version 1 of the Gilder Levin Ryznar Jacoubsen technique (linked from this page) seems to be the most successful.
Combination methods
Summaries
Alternatives to CSS Image Replacement
CSS3 content insertion
Only [CSS3-content] supports native image replacement. Prior to CSS3-content, all the CSS solutions are inherantly fudged and ugly (including the example I wrote).
- [PPK on IR] works in JS supporting browsers, has very clean HTML, and does not require extra changes to the code to add new images to be replaced.
- [ALA: Dynamic Text Replacement] Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own.
- [CSS Rules Image Replacement] - Instead of traversing the html and changing the properties of elements and ids via getElementById, this uses the DOM to move through the stylesheet and change the css rules to replace text. Works in JS supporting browsers, has very clean HTML, and does not require extra changes to the code to add new images to be replaced.
- [Image Replacement Revisited] enhanced version of previous contributions. Works in JS-supporting browsers and with screen readers. Allows CSS-based tweaking of the image. Some desperately needed humor, as well.
Flash
- [sIFR] dynamically turns the text into a swf file using whatever font you wish. If Flash or Javascript is not available, it degrades gracefully to the regular text that you can style with CSS.