The Image Replacement Museum

CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1>) with an image (often a logo). It has its origins in the time before web fonts and SVG. For years, web developers battled against browser inconsistencies to craft image replacement techniques that struck the right balance between design and accessibility.

Now that web fonts and SVG do much more of the heavy lifting for stylized text on the web, these techniques are falling out of use. But, we feel it's worth preserving them in this museum to celebrate the ingenuity that went into their creation, and to remind ourselves of a bygone era in web design.

These demos will take you through a comprehensive history of image replacement on the web, stretching back to 2003. Each demo is presented with its source link, if available—some are lost to the ages now.

I don’t think that .visuallyhidden is about image replacement. It’s rather an accessibility utility to provide some useful information for blind people (label for icons etc.) or freaks using Lynx. And because of that I can’t agree that this specific technique is falling out of use.

Google web team are being a*holes. Don’t do this, don’t do that, penalize this, penalize that. They penalize for using hash tags, penalize for using breadcrumb urls, penalize for using semitransparent text, penalize for using plugins, penalize for duplicate words, penalize for using display none, penalize for deep linking, penalize for not deeplinking, penalize for not using metatags, penalize for using metatags, I could go on and on.