CSS image replacement techniques for progressive enhancement

Feb 23 2009

In my understanding of the progressive enhancement (PE) philosophy, an HTML document should not include a single image tag other than for images that are part of its plain content (i.e. illustrations, figures etc.).

Since all other graphical material – from logos over graphical UI elements to decorative items – are purely presentational by nature, these have to be taken out of the markup. For this very reason, image replacement techniques have long become the number one tool for front-end developers to achieve visual effects without adding presentational elements to the markup. Last year, it had also been confirmed that using CSS image replacement is not being punished by Google.

Frankly speaking, without image replacement web standards wouldn’t be where they are today. I reviewed popular image replacement techniques starting from the original, six years old, Fahrner Image Replacement (FIR) method that had already been proven to not meet its own goals of accessibility the same year. In 2003, Dave Shea published an extensive listing of image replacement methods, none of which seems to be entirely flawless.

My personal requirements for an image replacement technique are:

• semantic (no additional markup)
• SEO-friendly
• scalable (i.e. different representations of the same HTML file, using different CSS, should enable using different images for replacement)
• visibility as text on print and mobile, if desired (therefore, rendering tags inappropriate by any means)

While the FIR method is the easiest, and therefore widely popular, the “Gilder/Levin method” (prepending the content to replace with an empty tag) or alternatively the Leahy/Langridge technique seem to be the best in accessibility terms. The former has additional markup (though, as tags have no semantic meaning, I don’t consider that critical), both suffer from the problem that browsers set to apply CSS but not load images don’t show anything instead of the replacement image.

Paul Young recently suggested a method called “State Scope image replacement” , where a small JS script detects whether the browser is set to display images or not and adds an according class to the tag. From my point of view this is a very smart method, but I dislike the idea that the achievement of a rich CSS layout (which is one of the reasons image replacement hacks were invented) are only possible with JavaScript support. While basically in sync with the idea of PE (“if you have JS, we enhance your experience”), I consider this a little too rigorous.

Since 2006, a method has been suggested that makes use of the :before CSS pseudo-element. The Nash Image Replacement (NIR) technique prepends markup to the HTML element when calculating the representation on the screen. Using a modern CSS 2.1 technique, I believe this is the most modern and progressive (in a PE sense) solution. Only, Internet Explorer (up to version 7) does not support :before pseudo-elements. Nash suggests using conditional comments to target IE specifically and apply the Leahy/Langridge method instead.

With IE8 around the corner, I have lately switched to purely using the NIR technique, with conditional comments serving Leahy/Langrdige to Internet Explorer ≤ 7.

Tweet this Share on Facebook Send by e-mail More bookmarking/sharing