CSS image replacement techniques

Date: 05 Mar, 2009
Posted by: admin
In: design, fonts & graphics|internet, web design & development

Bookmark and Share

Here’s a quick review of image replacement techniques as of 2009. I’ve discussed what I think are the 6 most common CSS techniques for image replacement along with their pros and cons. Some history and links for demos are given too.

Edit: awaiting update – LIR doesn’t provide a link area (though it could be hacked too, we’re trying to keep pure); TIP means I have to provide space for the Hx as it’s made relative and drops out of the flow, also I’d have to alter my actual markup; so currently I’m using TIP with negative indent!

Edit 2: Just finished writing a post after a couple of days research – I’ve sorted the problems with LIR and present a clickable transparent image based, pure semantic CSS image replacement technique (lots of examples in post).

Image replacement techniques

CSS methods to swap text for images

My marketing skills are teh sukzor so I’ve put what I consider to be the best method at the top. Let me know your choices in the comments – especially if you disagree or have a problem with the Langridge Image Replacement (LIR) method. The methods are:

  • LIR, zero height + background image in padding, win
  • TIP, using heading box as an image frame
  • Gilder-Levin-Pixy method, cover text with a span
  • Phark method, set text off-screen with negative indent
  • Position absolute, hide text behind image
  • FIR, span text and hide the span

Read on for all the gory details …


Leahy-Langridge method,  zero height + padding

Attributed to Seamus Leahy and Stuart Langridge as they appear to have developed this technique separately but in the same period, around July 2003. However looking at Leahy’s site he seems to be using negative-indent which I consider to be a different method, see below. David Shea in his review at mezzoblue proposed an enhancement (bold in code below) adding a title attribute to ensure that a tooltip would be presented replacing the alt tool tip expected on hovering an image. How: Set the parent element to have zero height, add padding to contain the image. Thus text is hidden beyond the frame of the box (below if padding is on top).

h1#newrepl { padding-top: 35px; /* height of the replacement image */ height: 0px; overflow: hidden; background: url(“hello_world.gif”) … ; } <h1 id=”newrepl” title=”Hi!”>Hello world!</h1>

Pro: Keeps style completely separate to the markup by not requiring any extra elements. Con: Needs hacks for IE5, IE5.5 (I don’t support these now, see Langridges write up if you’re interested). Demo: As of 2009-03-04 this is the method being used (with sprites) on the Apple Computers homepage. Aaron Gustafson documents iIR using LIR for  image replacement and calls it “img Image Replacement”.

Thierry Image Placement (TIP), peekaboo!

I’ve labelled this “peekaboo” as that describes the method for me. TIP is described very well at Theirry’s TKJDesign the origin for the method. How: Make a frame with the parent element and view a child elements, with an oversized background, within that frame. There are 2 proposed implementations as shown below (my preference) or  using a transparent image (like Radu Darvas‘ method) on an img tag instead of the anchor.

h1 {position:relative} h1 a { z-index:1; position:absolute; top:0; left:0; width:538px; height:1.7em; min-height:28px; background:transparent url(/img/helloworld.gif) no-repeat; border:1px dotted red; font-size:1em } <h1><a href=”/” title=”" />Company Name</h1>

Pro: appears to fix all the problems of FIR as it’s a too extremes development of that method. Cons: It is possible to get a little underflow of text at very large text zooms. Requires a large image with an opaque background. [And in one implementation a clearing gif - bleurgh!! I'm pretty sure this is illegal nowadays.] Demo: the author has a demo using a second background-image as a rollover (I’d use a sprite as it causes a flash of text on rollover). They also have a scalable method like sIFR.

Gilder-Levin-Pixy method, covering span

Petr Stanicek (a.k.a. “Pixy”), Levin Alexander and Tom Gilder. There’s an adaptation of this method by Schoberg (which he calls Ultimate Image Replacement) How: Use a span inside the link element and expand the span to cover the link text, put your image as background to the span.

#chapter-one { margin:0; padding:0; position:relative; width:200px; height:80px; overflow:hidden; } #chapter-one span { display:block; position:absolute; left:0; top:0; z-index:1; width:200px; height:80px; margin:0; padding:0; background:url(“chapter-one.gif”) top left no-repeat; } <h2 id=”chapter-one”>Chapter One<span></span></h2>

Pro: CSS = on and images = off still yields a title, most other methods don’t. Con: extra markup element needed (though I guess you could add this with some scripting to achieve proper content-style separation. Demo: weon.co.uk shows this method off with the addition of the sprite background method (all images stuck together in one big image). Interestingly Weon uses self-closing span tags, not seen that before. He also provides fixes for flickering, non-hover and cursor bugs with IE5, IE6.

Phark method, text indent

Apparently devised by Mike Rundle of Phark in August 2003. Other similar methods used margins instead. How: Use a large negative indent to push text off the page and show the background image below.

.head2 { text-indent:-9000px; background: … }

image replacement Leahy style

image replacement Leahy style

Pro: text is on page and so perceived benefit over display:none for search rank; page readers still read the text. Cons: selection box (narrow dotted lines around a link) extend off the page. Demo: Seamus Leahy’s image replacement example from 2006 (see thumbnail) may make you physically ill, beware!

Position absolute and adaptations

How: simply apply a position absolute style to the heading.

<h1><img src=”/img/helloworld.gif” alt=”" />Hello World</h1> h1 img {position:absolute}

Pro: Simple, hides text behind image. Con: Won’t work with transparent images, text can peek out. Broken in Netscape 6. Image and text when CSS = off. Demo: This method can be adapted to make the heading box the size of the image, avoiding overflow of the text. Also, NN6 can be fixed with an extra position property. But this doesn’t solve CSS = off, MSIE5 (Mac) is borked, text can be cutoff with smaller images or large text size when images = off.

Farner Image Replacement, FIR; aka display:none

Farner Image Replacement (FIR)  is, I believe, the granddaddy of all image replacement techniques. FIR was popularised in 2003 by Doug Bowman and widely used. Originally developed by Todd Fahrner. How: Wrap the text of the title in a span, hide the text with display property.

div { background: … } span { display:none; } <div><span>Hello world!</span></div>

Pro: First method for displaying styled text or a replacement image, beats having only alt-text when images are off. Con: CSS = on, images = off means no text. Screen readers ignore it. Fail. Demo: Visibility:hidden would probably have provided the perfect solution to this problem and we could all have got on with designing website. Unfortunately most of the big-name screenreaders failed to read out visually hidden text. Interestingly Doug Bowman now doesn’t use image replacement – looking at his Stopdesign blog we can see use of an image for text in the header (eg “balancing form [...]” without a replacement. Also the logo relies on alt text, though for SEO purposes the H1 element doesn’t appear until below the header.

End of the tour

That’s the end of your tour around CSS image replacement methods. The rest of this article is just a quick look at what a few of the notables of website design are doing on their own sites for image replacement …

Notable use of image replacement, or not

wellstyled.com

Wellstyled has an article on it which mentions FIR and GLP (without the funky names). The wellstyled.com homepage header uses simple FIR on an H2 for the logo and similarly for the strap line.

<h2 id=”logo”> <a href=”/”><span>WellStyled.com</span></a> </h2>

Quite frankly shocked by that. Other pages don’t use FIR but have pure text or image-text (ie an image of text with no replacement). Their site is bilingual so this could be the reason for their choices here.

Shaun Inman

The other well know replacement method Scalable Inman Flash Replacement (SIFR) was developed first by Shaun Inman, version 3 of sIFR is now available. What does shauninman.com (caution may crash FF) use for their logo? Well it’s got to be … a plain PNG with alt text wrapped in an anchor. No Hx element, no fancy-smancy flash.

<div id=”header”> <a href=”/” id=”logo” class=”img over”> <img src=”/images/logo.png” width=”92″ height=”36″ alt=”ShaunInman.com” /></a>

And yes his site did kill Firefox 3, fine on Konq though.

Stuart Langridge

Yes the author of the LIR method (or one of them at least). He uses plain text in an anchor inside a H1. How dissappointing.

<div id=“header”> <h1><a href=“http://www.kryogenix.org/days/”>as days pass by, by Stuart Langridge</a></h1> <div id=“tagline”>scratched tallies on the prison wall</div>

He does use some fantasy fonts on his site elsewhere but only via a font declaration. Crispy and clean.

mezzoblue.com

Mezzoblue have an article from May 2008 discussing Google’s response to image replacement techniques. What do mezzoblue use? Text indent, even keeping with the traditional -9000px.

CSS Zen Garden

The CSS Zen Garden is a demo site for CSS, it’s default however is to simply use FIR. But then CSS Zen Garden isn’t exactly catering for the visually impaired now is it (“This design screenreads the same as the last 200 … “).

And finally

There are of course other methods of image replacement using other coding technologies, eg Javascript IR – like the State Scope method, PHP IR – see Stewart Rosenberger (for whom I coudn’t find anything more recent than 2004).

I did think of a couple of other possible ways of IR with CSS (that I hadn’t found, but am sure have been “claimed” elsewhere, let me know!). Possibly using a child span to contain the text with zero opacity (expect this not to work in IE based on past experience of opacity handling). Having an image as content :before the Hx, where teh header wraps the text, whilst setting the Hx element at zero width? Nothing there to match LIR in my opinion though.

Span tags and alt attributes should be considered carefully to take account of SEO issues. If one relies on alt attribute text (“alt-text”) is that as good for search engines as actually text directly enclosed in a Hx?

Hope you’ve enjoyed the tour of CSS-IR. I know there are other places to discuss these things .. but I would love to hear any comments on this before I set to work on my next website.

3 Responses to "CSS image replacement techniques"

1 | New(?) pure CSS image replacement technique JIR | flapjacktastic

March 7th, 2009 at 3:34 am

[...] 2009, he makes the following claim about CSS image replacement, which, up until today (following my review) I was in total agreement with: Most other image replacement techniques (Fahrner, Phark, [...]

2 | Dan Owen

June 15th, 2009 at 1:38 pm

How about image replacement in a CSS style in support of navigation?.

For example, I rollover an and the background image of the <a> link inside it changes? The is wider than the <a> and so the image switching which should happen at the same time doesn’t.

I want to force the <a> background image to swap when I rollover the .

Thanks!

[Edited by alicious as tags not showing]

3 | Dan Owen

June 15th, 2009 at 1:39 pm

rollover an “LI”


About

Flapjacktastic is just a random collection of musings, hints&tips, notes, information ... a collection of stuff really that's overflowed from the brain of this husband, father, potter, business-man, geek ...

past posts