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.