Repetition and Replacement ¬ Easy Reader

Repetition and Replacement

While working on a new site for a client, I stumbled upon an application of the Leahy/Langridge method of image replacement… to images. As far as I know, it had not been attempted before and, frankly, I was a little amazed it worked.

The technique, which I am calling iIR for “img Image Replacement” (a bit of a mouthful, I know), helps you keep you code leaner and meaner without sacrificing stylability or accessibility. You can read the article on the Easy Designs and feel free to drop your comments below. Maybe you can think of a better name for it too.

This entry was posted on Monday, January 9th, 2006 at 6:07 pm and is filed under web, standards and CSS. Technorati counts 0 blog reactions to this post. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

27 Responses to “Repetition and Replacement”

kevadamson Says:

Great technique - worth bearing in mind on many projects as an alternative to the ol’ background techinque - cheers

(think the link on the example goes to the wrong blog entry though)

January 9th, 2006 at 6:27 pm
Malarkey Says:

Posted to StyleGala!

January 9th, 2006 at 6:51 pm
Aaron Says:

Kev: Doh! Whoops… That’s what I get for copying a template. Good catch.

Andy: Cheers mate!

January 9th, 2006 at 7:04 pm
Steve Avery Says:

HI. I’ve done something very similar on a site I’ve worked on recently before xmas 2005.

Check out www.cafemet.co.uk

The technique is used for the logo (top right).

January 12th, 2006 at 6:11 am
Aaron Says:

Steve: What you have done is similar to what I used to do as well. You are applying a background image of the screen logo to an element containing the print-friendly image (in your case an anchor tag). You are then positioning the img beyond view to the left by -5000px.

The difference in what I have done with iIR is that the background image is being applied to the print-friendly image itself, not to a container element. This means we need less markup and end up with cleaner pages. It also helps in situations (like a homepage) where you may not want the logo to be a link to the page the user is already on (so there’s no anchor around the image to apply a new background to). Also, with iIR, you get the added benefit of the alt text showing up when images are off but CSS is on. The same cannot be said for your technique or the Phark method (which I used to use).

January 12th, 2006 at 7:51 am
Thierry Koblentz Says:

Interesting, so many variations… But do you consider text as “extra markup”? Because I don’t see anything wrong with using real text rather than the alt attribute to convey the info.

Image Placement vs. Image Replacement

January 15th, 2006 at 12:43 pm
Aaron Says:

Thierry: I think you may be missing the point. I don’t consider text to be extra markup, but in certain instances (as in the case of a logo), it may make more sense to have an image rather than text. Branding is very important to many companies and some even have style guides which expressly forbid display of their company name in anything other than their logo when used for this purpose. In such a situation you could make a perfect case for iIR.

Another place in which this may be a useful technique is when exhibiting very detailed art, maps or charts on the screen. In cases such as this, it may behoove the web developer to provide a screen-friendly version of the image in question for the browser, but a hi-res one for the print version. This is an instance where text simply couldn’t work. That is why this is img Image Replacement (iIR) and not another form of traditional text IR.

PS - I am familiar with TIR and have experimented with it a few times in the past.

January 15th, 2006 at 1:01 pm
patrick h. lauke Says:

Similar in many ways to my PNG image replacement experiment (where I do it for a different reason: having an 8bit PNG in the markup and replacing it with a 24bit one via CSS) and the approach I took on the (horrible, horrible site… but I only did some of the styling and back-end coding) E-bazaar.

January 15th, 2006 at 4:49 pm
Thierry Koblentz Says:

What I was saying is that I think your technique would work fine with text too. Unless a transparent image is used for background, the text should not be visible.

January 15th, 2006 at 5:24 pm
Aaron Says:

Patrick: I hadn’t thought of replacing an 8bit PNG with a 24bit one, that’s another great application. Your technique still requires extra markup though (the a which, of course, has a purpose) which this technique does not.

Thierry: That would be the Leahy/Langridge method I referenced.

January 15th, 2006 at 7:12 pm
Patrick H. Lauke Says:

Your technique still requires extra markup though (the a which, of course, has a purpose)

well, in the two specific cases it does serve a purpose (on the experiment fragment it may not be obvious, but seeing it in context as used on Molly’s site it does). the technique i use, when generalised, would work with any element containing an image, in the same way as yours (on the E-bazaar, for instance, it’s only the “logo” link + image that are being styled…could just as well have been an h1 + image).

January 16th, 2006 at 5:00 am
Aaron Says:

Patrick: Ah, but if you look at the CSS, the h1 is irrelevent except in how it provides a hook for selecting the img. All of the replacement is done on the img:
```
#branding img {
  background: url(/images/logo.png) top left no-repeat;
  display: block;
  padding-top: 93px;
  height: 0;
  …
}
```
If the img had been id-ed itself (which it easily could have been), the h1 would not even have been needed in the selector.

January 16th, 2006 at 7:37 am
Thierry Koblentz Says:

That would be the Leahy/Langridge method I referenced.

No, because AFAIK they are not using a IMG element. It would be more like the TIP method (referenced in my first comment). Anyway, it is a smart technique that doesn’t need any hook to work, thank you for sharing…

January 16th, 2006 at 4:24 pm
Aaron Says:

Thierry: Hmm. Perhaps I am misunderstanding you then. When you say “your technique would work fine with text too,” do you mean using 2 images with text in them? I guess the “text” bit is what has me confused. I thought you were talking about replacing text with an image. Could you offer an example of the CSS and markup you are envisioning?

PS - Thanks. TIP is very smart as well.

January 16th, 2006 at 5:54 pm
Eugene T.S. Wong Says:

Hi Aaron. Thanks for sharing with us.

I don’t understand why you don’t use @media statements for print media. Could you elaborate?

January 16th, 2006 at 9:51 pm
Aaron Says:

Eugene: I prefer to keep my CSS componentized into specific files for specific purposes. For that reason, I keep my print styles in a seperate style sheet which I associate with the page via a print media-specific link element.

January 17th, 2006 at 8:00 am
Thierry Koblentz Says:

Could you offer an example of the CSS and markup you are envisioning?

Markup:
<h1 id="branding"> <img src="/images/logo-print.jpg" alt="Twinings of London" />Twinings</h1>

CSS:
h1 {position:relative;font-size:.9em}

“Twinings” should be hidden behind the IMG element.

I’ve included a link to iIR in my article, I think it is a nice “extra” when “playing” with images.

January 17th, 2006 at 11:09 am
Alex Jones » Blog Archive » iIR: img Image Replacement Says:

[…] A discussion of the concept is running at the associated blog entry. […]

January 17th, 2006 at 2:08 pm
Marc Says:

Just another point, and not meaning to sound negative, but wouldnt both images download when the page is displayed? Thus inhibiting dialup users? (I know they are a dying breed!) Other than that a very well presented and informative article.

January 19th, 2006 at 6:43 pm
Aaron Says:

Thierry: I guess I just really don’t see the point of doing that. It’s redundant. With images off, you’d end up with the h1 reading “Twinings of LondonTwinings.”

Mark: Thanks, I’m glad you liked it.

I think you make a valid point and I wonder how dial-up users deal with images in general nowadays. The stats may paint a different picture, but, on that rare occasion when I do surf on dial-up, I tend to turn images off. I don’t know if that’s a common practice now or not, but I believe some of the stats programs out there could tell you the numbers for your audience. That would be a good place to look for guidance if you are considering an approach like this.

We certainly should not make any assumptions (or you know what) about users turning off images when on dial-up and I strongly advise against using tons of super high-resolution images on a single page, with or without iIR. As with many things in life, iIR’s best used in moderation.

January 19th, 2006 at 7:10 pm
Thierry Koblentz Says:

I guess I just really don’t see the point of doing that. It’s redundant. With images off, you’d end up with the h1 reading “Twinings of LondonTwinings.”

Because text in a h1 is not the same as the value of the alt attribute of the img element; even if it is placed inside a h1. If you use “Twinings logo” for alt and “Twinings of London” for the h1, you give Search Engines more things to chew on. IMO, a h1 is a very important element, you do not want to “waste” it.

January 22nd, 2006 at 12:37 am
Aaron Says:

Because text in a h1 is not the same as the value of the alt attribute of the img element; even if it is placed inside a h1.

If that is the case, I would agree, but, after extensive Google-ing I have found no evidence that it is. Can you provide a link as backup to your argument? I think that’d be very beneficial to the other readers (and me as well).

I will be involved with two search panels at SXSWi this year, “Web Standards and Search” and “Web Standards and SEO.” Both have a number of search experts on them, including folks from the engines themselves. I will discuss this topic with them as well to see if we can suss out the details and present them in March.

I am also curious about an additional tack: If we were to use an alt in addition to a title on the img, how that is considered by the search engines? I do know that both alt and title attributes are indexed, the weight they carry, however, is a mystery to me.

I’ll circle back on this topic once I’ve found something. Please do the same on your end.

January 22nd, 2006 at 8:53 am
Thierry Koblentz Says:

If that is the case, I would agree, but, after extensive Google-ing I have found no evidence that it is.

Really? If I Google “search engine optimization text in headings”, the first result is: Basics of search engine optimisation. The author says:

Using graphics for headings may let you use any typeface you want, but search engines aren’t going to pay much attention. Even if you (as is required) use the alt attribute to specify alternate text for heading images, that text will not be anywhere near as important as real text in a heading element. In my experience, this is true even if the images are inside heading elements.

January 23rd, 2006 at 9:20 pm
Aaron Says:

Thierry: Nice find (my searches for things like “h1 img SEO” yielded few results). Though I certainly trust Roger’s experience and depth of knowledge, this is still anecdotal, not definitive (emphasis mine):

In my experience, this is true even if the images are inside heading elements. If you know otherwise, please tell.

Down in the comments, Roger continues (emphasis his):

It should work like that, but because of keyword spamming in alt attributes, search engines may value such text less. Again, I have no hard evidence, only personal experience. At the moment, I’d go with some kind of image replacement technique if I were to use graphical headings.

Clearly, we need some clarity on this issue. This will be one of the foci of our Web Standards and Search discussions @ SXSWi.

January 23rd, 2006 at 10:38 pm
Blog Says:

This method is a variation on this one:

http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}

January 24th, 2006 at 7:51 am
Aaron Says:

Both have their origins in the Leahy/Langridge method. The key differentiator here is that iIR applies this technique to an img element, not a standard text element (a, li, h1, etc.). It’s applying background images to images.

Here’s another, slightly different example of this technique: We start with an alpha-transparent image (in this case, the moon):

and then we apply some style to it to add a background:
```
img#moon {
  display: block;
  background: url(iIR_sample_bg.jpg) top left no-repeat;
  width: 75px;
  height: 76px;
  padding: 20px 205px 200px 20px;
  margin: 1em auto;
}
```
which gives us this:

Kinda intersting to experiment with.

January 24th, 2006 at 5:12 pm
Thierry Koblentz Says:

I think I found a way to make this technique works in IE Win:
PNG Overlay with no extra markup.

May 26th, 2006 at 12:28 pm

27 Responses to “Repetition and Replacement”

kevadamson Says:

Malarkey Says:

Aaron Says:

Steve Avery Says:

Aaron Says:

Thierry Koblentz Says:

Aaron Says:

patrick h. lauke Says:

Thierry Koblentz Says:

Aaron Says:

Patrick H. Lauke Says:

Aaron Says:

Thierry Koblentz Says:

Aaron Says:

Eugene T.S. Wong Says:

Aaron Says:

Thierry Koblentz Says:

Alex Jones » Blog Archive » iIR: img Image Replacement Says:

Marc Says:

Aaron Says:

Thierry Koblentz Says:

Aaron Says:

Thierry Koblentz Says:

Aaron Says:

Blog Says:

Aaron Says:

Thierry Koblentz Says:

Blatant Self-Promotion