CSS image replacement is a technique of replacing a text element (usually a header tag like an

) 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 technique 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

source

See the Pen 2014 H5BP Image Replacement Method 2 by CSS-Tricks (@css-tricks) on CodePen.

2012: H5BP Image Replacement

source

See the Pen 2012 H5BP Image Replacement Method by CSS-Tricks (@css-tricks) on CodePen.

2012: Scott Kellum Method

source

See the Pen 2012 Scott Kellum Image Replacement Method by CSS-Tricks (@css-tricks) on CodePen.

2010: Improved NIR (Nash Image Replacement)

source

See the Pen 2010 Improved NIR – Image Replacement Method by CSS-Tricks (@css-tricks) on CodePen.

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

source

See the Pen 2007 Yet Another Image Replacement Method by CSS-Tricks (@css-tricks) on CodePen.

2006: Nash Image Replacement Technique

source

See the Pen 2006 Nash Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2005: Thierry Technique

source

See the Pen 2005 Thierry Image Placement Technique by CSS-Tricks (@css-tricks) on CodePen.

2005: Malarkey Technique

source

See the Pen 2005 Malarkey Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Shea Enhancement

source

See the Pen 2003 Shea Enhancement – Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Lindsay Method

source

See the Pen 2003 The Lindsay Method – Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Glider/Levin Technique

See the Pen 2003 Glider/Levin Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Leon Dwyer Method

See the Pen 2003 Leon Dwyer Method – Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Leahy/Langridge

See the Pen 2003 Leahy/Langridge Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Radu Darvas Shim

See the Pen 2003 Radu Darvas Shim Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Radu Darvas Technique

See the Pen 2003 Radu Darvas Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Phark Method

See the Pen 2003 Phark Method Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

2003: Fahrner Image Replacement

source

See the Pen 2003 Fahrner Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.

---

The Image Replacement Museum is a post from CSS-Tricks