Image replacement decision grid

Method Support read by Screenreader Text selectable Image printable When to use
CSS enabled CSS disabled
Images enabled Images disabled Images enabled Images disabled
<img> Image Text [1] Image Text [1] Yes ? [2] Yes when the Image is actual content
<Object> [6] Image (or anything else) Fallback Content Image (or anything else) Fallback Content ? [6] No Yes When the image is content but needs to be described with complex markup if it is unavailable. Support?
cover up Andrew [5] Image Text Text Text Yes Yes No decoration
Phark, Leahy/Langridge Image Nothing Text Text Yes Yes No decoration, if image needs to be transparent or markup can't be changed
CSS2 :before Image Text Text Text Yes Yes No (only works in Opera7 and upcoming Safari, degrades nicely, support may grow soon)
CSS3 Content-Property [4] Image "Image" Text Text Yes [3] No Yes (only works in Opera 7, degrades nicely, relies on CSS3)
FIR Image Nothing Text Text No No No never, actually, convert to this
[1]
Safari will not show alt-text when images are disabled
[2]
Opera does not allow alt text to be selected. I'd consider that a bug in Opera. I've not tested it in other browsers
[3]
There is no Screenreader that supports CSS3
[4]
Can be used in addition to the other techniques to provide multiple backgrounds or to provide printable images with CSS
[5]
Here is a testcase Here is a more complex testcase that shows some problems with multiple layers
[6]
I do not know how browsers other than Opera 7.5 handle this

Levin Alexander, 2004-03-22
Teil von grundeis.net