{"id":206019,"date":"2015-11-03T06:56:16","date_gmt":"2015-11-03T13:56:16","guid":{"rendered":"http:\/\/css-tricks.com\/?p=206019"},"modified":"2015-11-04T07:56:01","modified_gmt":"2015-11-04T14:56:01","slug":"the-image-replacement-museum","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-image-replacement-museum\/","title":{"rendered":"The Image Replacement Museum"},"content":{"rendered":"

CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1><\/code>) 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. <\/p>\n

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.<\/p>\n

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.<\/p>\n

<\/p>\n

2014: H5BP Image Replacement 2<\/h3>\n

source<\/a><\/p>\n

See the Pen 2014 H5BP Image Replacement Method 2<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2012: H5BP Image Replacement<\/h3>\n

source<\/a><\/p>\n

See the Pen 2012 H5BP Image Replacement Method<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2012: Scott Kellum Method<\/h3>\n

source<\/a><\/p>\n

See the Pen 2012 Scott Kellum Image Replacement Method<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2010: Improved NIR (Nash Image Replacement)<\/h3>\n

source<\/a><\/p>\n

See the Pen 2010 Improved NIR – Image Replacement Method<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2008: Phark with Inline Image Method<\/h3>\n

See the Pen 2008 Phark with Inline Image – Image Replacement Method<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2007: Yet Another Image Replacement Method<\/h3>\n

source<\/a><\/p>\n

See the Pen 2007 Yet Another Image Replacement Method<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2006: Nash Image Replacement Technique<\/h3>\n

source<\/a><\/p>\n

See the Pen 2006 Nash Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2005: Thierry Technique<\/h3>\n

source<\/a><\/p>\n

See the Pen 2005 Thierry Image Placement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2005: Malarkey Technique<\/h3>\n

source<\/a><\/p>\n

See the Pen 2005 Malarkey Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Shea Enhancement<\/h3>\n

source<\/a><\/p>\n

See the Pen 2003 Shea Enhancement – Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Lindsay Method<\/h3>\n

source<\/a><\/p>\n

See the Pen 2003 The Lindsay Method – Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Glider\/Levin Technique<\/h3>\n

See the Pen 2003 Glider\/Levin Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Leon Dwyer Method<\/h3>\n

See the Pen 2003 Leon Dwyer Method – Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Leahy\/Langridge<\/h3>\n

See the Pen 2003 Leahy\/Langridge Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Radu Darvas Shim<\/h3>\n

See the Pen 2003 Radu Darvas Shim Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Radu Darvas Technique<\/h3>\n

See the Pen 2003 Radu Darvas Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Phark Method<\/h3>\n

source<\/a><\/p>\n

See the Pen 2003 Phark Method Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n

2003: Fahrner Image Replacement<\/h3>\n

source<\/a><\/p>\n

See the Pen 2003 Fahrner Image Replacement Technique<\/a> by CSS-Tricks (@css-tricks<\/a>) on CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

CSS image replacement is a technique of replacing a text element (usually a header tag like an <h1><\/h1>) with an […]<\/p>\n","protected":false},"author":33562,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[4],"tags":[],"class_list":["post-206019","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":171038,"url":"https:\/\/css-tricks.com\/svg-text-typographic-designs\/","url_meta":{"origin":206019,"position":0},"title":"SVG `text` and Small, Scalable, Accessible Typographic Designs","author":"Chris Coyier","date":"May 27, 2014","format":false,"excerpt":"Let's say you designed something with custom fonts that was a little bit fancy. Perhaps a certain word is positioned between the ascenders of another word below it. Some text is kerned out below to match the width of that same word. This is something we might tell a graphic\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":235098,"url":"https:\/\/css-tricks.com\/creating-web-type-lockup\/","url_meta":{"origin":206019,"position":1},"title":"Creating a Web Type Lockup","author":"Chris Coyier","date":"December 1, 2015","format":false,"excerpt":"A type lockup is a typographic design where the words and characters are styled and arranged very specifically. Like the design is literally locked in place. This idea is slightly at-odds with the responsive web that we know and love, where text is fluid and wrappable and whatnot. Yet, the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":245796,"url":"https:\/\/css-tricks.com\/methods-controlling-spacing-web-typography\/","url_meta":{"origin":206019,"position":2},"title":"Methods for Controlling Spacing in Web Typography","author":"Geoff Graham","date":"September 26, 2016","format":false,"excerpt":"If you were developing sites in 2006, then you may have worked with a designer like me who was all up in your business about fonts not looking exactly the same in the browser as they did in mockups. Then you may have tried explaining to me the pains of\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":365677,"url":"https:\/\/css-tricks.com\/colrv1-and-css-font-palette-web-typography\/","url_meta":{"origin":206019,"position":3},"title":"COLRv1 and CSS font-palette: Web Typography Gets Colorful","author":"Ollie Williams","date":"May 11, 2022","format":false,"excerpt":"According to Toshi Omagari, the author of Arcade Game Typography, the world\u2019s first multi-colored digital font was created in 1982 for a never-released video game called Insector. Multi-colored fonts, sometimes called chromatic type, are still relatively rare on the web, even though the COLR font format has had full cross-browser\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_07727771E2AE24CAE12B4C96FD6B6B6976797741459E0498D84303A46B2B3814_1644779893852_applehello.png?fit=1200%2C720&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":206019,"position":4},"title":"A Compendium of SVG Information","author":"Chris Coyier","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":209611,"url":"https:\/\/css-tricks.com\/web-font-anti-patterns\/","url_meta":{"origin":206019,"position":5},"title":"Web Font Anti-Patterns","author":"Robin Rendle","date":"October 13, 2015","format":false,"excerpt":"A series of articles by Bram Stein on typography, performance and modern day best-practices for using fonts. I particularly like what Bram has to say on overusing web fonts: An\u00adother re\u00adcent trend is us\u00ading web fonts where they\u2019re not ap\u00adpro\u00adpri\u00adate. Don\u2019t use web fonts if you don\u2019t need them. They\u2019re\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206019","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/33562"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=206019"}],"version-history":[{"count":16,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206019\/revisions"}],"predecessor-version":[{"id":210532,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/206019\/revisions\/210532"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=206019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=206019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=206019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}