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.
Comments
Because text in a <code class=“html”>h1</code> is not the same as the value of the <code class=“html”>alt</code> attribute of the <code class=“html”>img</code> element; even if it is placed inside a <code class=“html”>h1</code>. If you use “Twinings logo” for <code class=“html”>alt</code> and “Twinings of London” for the <code class=“html”>h1</code>, you give Search Engines more things to chew on. <abbr title=“In My opinion”>IMO</abbr>, a <code class=“html”>h1</code> is a very important element, you do not want to “waste” it.
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)
Posted to StyleGala!
@Kev: Doh! Whoops… That”s what I get for copying a template. Good catch.
@Andy: Cheers mate!
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).
@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 <code class=“html”>img</code> 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 <code class=“html”>alt</code> text showing up when images are off but <abbr title=“Cascading Style Sheets”>CSS</abbr> is on. The same cannot be said for your technique or the Phark method (which I used to use).
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 <code class=“html”>alt</code> attribute to convey the info.
Image Placement vs. Image Replacement
@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 <abbr title=“img Image Replacement”>iIR</abbr>.
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 <code class=“html”>img</code> Image Replacement (<abbr title=“img Image Replacement”>iIR</abbr>) and not another form of traditional text <abbr title=“Image Replacement”>IR</abbr>.
<abbr title=“Post Script”>PS</abbr> - I am familiar with <abbr title=“Thierry Image Replacement”>TIR</abbr> and have experimented with it a few times in the past.
Similar in many ways to my <abbr title=“Portable Network Graphics”>PNG</abbr> image replacement experiment (where I do it for a different reason: having an 8bit <abbr title=“Portable Network Graphics”>PNG</abbr> in the markup and replacing it with a 24bit one via <abbr title=“Cascading Style Sheets”>CSS</abbr>) and the approach I took on the (horrible, horrible site… but I only did some of the styling and back-end coding) E-bazaar.
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.
@Patrick: I hadn’t thought of replacing an 8bit <abbr title=“Portable Network Graphics”>PNG</abbr> with a 24bit one, that’s another great application. Your technique still requires extra markup though (the <code class=“html”>a</code> which, of course, has a purpose) which this technique does not.
@Thierry: That would be the Leahy/Langridge method I referenced.
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 in 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 <code class=“html”>h1</code> + image).
@Patrick: Ah, but if you look at the <abbr title=“Cascading Style Sheets”>CSS</abbr>, the <code class=“html”>h1</code> is irrelevent except in how it provides a hook for selecting the <code class=“html”>img</code>. All of the replacement is done on the <code class=“html”>img</code>:
<code class="css">#branding img { background: url(/images/logo.png) top left no-repeat; display: block; padding-top: 93px; height: 0; /* ... */ }</code>If the <code class=“html”>img</code> had been <code class=“html”>id</code>-ed itself (which it easily could have been), the <code class=“html”>h1</code> would not even have been needed in the selector.
No, because AFAIK they are not using a <code class=“html”>img</code> 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…
@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 <abbr title=“Cascading Style Sheets”>CSS</abbr> and markup you are envisioning?
<abbr title=“Post Script”>PS</abbr> - Thanks. TIP is very smart as well.
Hi Aaron. Thanks for sharing with us.
I don’t understand why you don’t use <code class=“css”>@media</code> statements for print media. Could you elaborate?
@Eugene: I prefer to keep my <abbr title=“Cascading Style Sheets”>CSS</abbr> 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 <code class=“html”>link</code> element.
Markup:
CSS:
<code class="css">h1 {position:relative;font-size:.9em}</code>“Twinings” should be hidden behind the <code class=“html”>IMG</code> element.
I’ve included a link to <acronym title=“img Image Replacement”>iIR</acronym> in my article, I think it is a nice “extra” when “playing” with images.
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.
@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 <code class=“html”>h1</code> reading “Twinings of LondonTwinings.”
@Mark: Thanks, I’m glad you liked it.</p>
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 <abbr title=“img Image Replacement”>iIR</abbr>. As with many things in life, <abbr title=“img Image Replacement”>iIR</abbr>’s best used in moderation.
<blockquote cite=“/archives/repetition-and-replacement/#comment-239”>Because text in a
h1is not the same as the value of thealtattribute of theimgelement; even if it is placed inside ah1.</blockquote>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 <abbr title=“South by Southwest Interactive”>SXSWi</abbr> 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 <code class=“html”>alt</code> in addition to a <code class=“html”>title</code> on the <code class=“html”>img</code>, how that is considered by the search engines? I do know that both <code class=“html”>alt</code> and <code class=“html”>title</code> 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.
Really? If I Google “search engine optimization text in headings,” the first result is: Basics of search engine optimisation. The author says:
<blockquote cite=“http://www.456bereastreet.com/archive/200502/basics_of_search_engine_optimisation/”>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.</blockquote>
@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):
<blockquote cite=“http://www.456bereastreet.com/archive/200502/basics_of_search_engine_optimisation/”>
In my experience, this is true even if the images are inside heading elements. If you know otherwise, please tell.
</blockquote>
Down in the comments, Roger continues (emphasis his):
<blockquote cite=“http://www.456bereastreet.com/archive/200502/basics_of_search_engine_optimisation/#comment30”>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.</blockquote>
Clearly, we need some clarity on this issue. This will be one of the foci of our Web Standards and Search discussions @ <abbr title=“South by Southwest Interactive”>SXSWi</abbr>.
This method is a variation on this one: http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html
<code class="css">#nav a { float: left; padding: 20px 0 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* for IE5/Win only */ }</code>Both have their origins in the Leahy/Langridge method. The key differentiator here is that <abbr title=“img Image Replacement”>iIR</abbr> applies this technique to an <code class=“html”>img</code> element, not a standard text element (<code class=“html”>a</code>, <code class=“html”>li</code>, <code class=“html”>h1</code>, 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):
/img/posts/iIR_sample_img.png
and then we apply some style to it to add a background:
<code class="css">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; }</code>which gives us this:
/img/posts/iIR_sample_img.png
Kinda intersting to experiment with.
I think I found a way to make this technique works in <abbr title=“Internet Explorer”>IE</abbr> Win: <abbr title=“Portable Network Graphics”>PNG</abbr> Overlay with no extra markup.