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
See the Pen 2014 H5BP Image Replacement Method 2 by CSS-Tricks (@css-tricks) on CodePen.
2012: H5BP Image Replacement
See the Pen 2012 H5BP Image Replacement Method by CSS-Tricks (@css-tricks) on CodePen.
2012: Scott Kellum Method
See the Pen 2012 Scott Kellum Image Replacement Method by CSS-Tricks (@css-tricks) on CodePen.
2010: Improved NIR (Nash Image Replacement)
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
See the Pen 2007 Yet Another Image Replacement Method by CSS-Tricks (@css-tricks) on CodePen.
2006: Nash Image Replacement Technique
See the Pen 2006 Nash Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.
2005: Thierry Technique
See the Pen 2005 Thierry Image Placement Technique by CSS-Tricks (@css-tricks) on CodePen.
2005: Malarkey Technique
See the Pen 2005 Malarkey Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.
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
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
See the Pen 2003 Fahrner Image Replacement Technique by CSS-Tricks (@css-tricks) on CodePen.
So glad these days are over now, I remember using the sliding door technique for buttons many many times over. Onward and upward!
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.Interesting to see an Image Replacement article at this time and age.
Not sure what happened to the museum here, but other notable techniques include:
Definitive Solution to Image Replacement
GIR
Scalable Inline Image Replacement
Dynamic Text Replacement
Scalable Jens Image Replacement [no, not mine]
Scalable Inman Flash Replacement †
SwishMAX Text Replacement †
German readers may be interested in http://meiert.com/de/publications/articles/20050513/, which should pretty accurately reflect the state of affairs until 2005, when IR was still pretty fashionable.
I think Cufon was one of the most popular techniques for a while. Although it is quite different from the ones mentioned in the post, so maybe that’s not the kind of thing you were intending to list.
Don’t do it. All this hacks are penalized by Google Search, https://support.google.com/webmasters/answer/66353
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.
Good thing there is a content property that can be used on any eleme… Oh, right, it only ever worked in Presto Opera. Too bad browsers seems more interested in implementing DRM than this.
Working for a company large enough to be able to afford a web font and modern enough to know better, and I’m gonna have to use one of these :(