Image Replacement

From CSS Discuss

Jump to: navigation, search

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.

Contents

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.

Article on Stop Design 
- this is mainly detailing the Fahrner image replacement (FIR) technique.
Joe Clark's ALA article 
-detailing some problems with FIR.
Dave Shea's article on Digital Web
-"In defense of FIR".

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 Seamus Leahy 
-requires no span.
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.
YAIRM by Estelle Weyl 
-requires no span. works for both in-line and block styled elements.
Phark by Mike Rundle 
-with a small revision.
MIR, or Malarkey Image Replacement 
-uses negative letter spacing.

Examples

Photo Matt's blog 
-which generates the images dynamically. Personally, I think that's just showing off, but it's rather cool. Text is moved Off Left , 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.

Pixy's Image Transform 
- First IR technique that can handle disabled images.
Tom Gilder's Image Transform 
-by avoiding Off Left , 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 id's!  :o) — Owen Blacker
Levin Alexander's 
-Is another method like Pixy's and Gilder's.
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.
Thierry Image (re)Placement 
-Works well with images off and/or CSS off, also allows text selection and printing.

Combination methods

Douglas Livingstone's article on Sitepoint
Anatoly's Definitive Image Replacement 
-Great image replacement that works well with images off and doesn't need an extra markup.

Summaries

Dave Shea's summary of most of the main techniques

Bob Easton's accessibility testing of four of the techniques

Alternatives to CSS Image Replacement

CSS3 content insertion

Only CSS3-content supports native image replacement. Prior to CSS3-content, all the CSS solutions are inherently fudged and ugly (including the example I wrote).

Java Script

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

IFR: Revisited and Revised
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.
Two color sIFR
Personal tools