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.
2014: H5BP Image Replacement 2
2012: H5BP Image Replacement
2012: Scott Kellum Method
2010: Improved NIR (Nash Image Replacement)
2008: Phark with Inline Image Method
See the Pen 2008 Phark with Inline Image - Image Replacement Method by CSS-Tricks (@css-tricks) on CodePen.
2007: Yet Another Image Replacement Method
2006: Nash Image Replacement Technique
2005: Thierry Technique
2005: Malarkey Technique
2003: Shea Enhancement
See the Pen 2003 Shea Enhancement - Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.
2003: Lindsay Method
See the Pen 2003 The Lindsay Method - Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.
2003: Glider/Levin Technique
2003: Leon Dwyer Method
See the Pen 2003 Leon Dwyer Method - Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.