Is image replacement really worth it?

I’ve been wondering if image replacement and the promotion of it is really a good idea. But let’s start from the beginning: what is image replacement?

Image replacement is a common name for a technique to use images for headings and their likes from an external CSS file, as opposed to in the XHTML/HTML. The general approach is to hide the text content (one way or the other) of the element and instead show an image through CSS.

An example (Note: this is not the most sophisticated way to do it, but an easy one to get an overview of the basic idea):

HTML

<h1>
	<span>Some text...</span>
<h1>

CSS

h1{
	width: 138px;
	height: 40px;
	background:url(images/my-logo.png) no-repeat;
}

h1 span{
	display: none;
}

Many more alternatives/techniques can be found in Dave Shea‘s Revised Image Replacement.

There are some general arguments why to use image replacement, and I though I’d respond to them here:

You can add images for a rich typography or logo
Reply: You can do the same thing with an inline img tag.
Images referenced in the CSS file are cached
Reply: As far as I know, images referenced through inline img elements are cached in most, if not all, major web browsers.
Easier maintenance with a single file to edit
Reply: In pretty much every web site, the content is dynamically generated through ASP.NET, JSP, PHP or something similar. Then you just have a WebControl/include file witht the content of your header and the tag is still just in one file. And if you have a hard-coded site, basically any tool offers search and replace functionality to easily change the content of every file.
For accessibility reasons, it’s good to have a fallback text in the document
Reply: You get the same thing using the alt attribute on the img tag.

Another major reason for not using image replacement is that, to my knowledge, there’s still no way to handle the scenario where the user have a web browser setting with images off and CSS on, then they won’t see the text nor the image. There is, however, ways to use JavaScript-enhanced image replacement, but to me being dependant on JavaScript isn’t an option either.

So, use image replacement if you want to. I know I won’t (at least not until someone convinces me of any advantage of it over using an img tag).

49 Comments

  • > Images referenced in the CSS file are cached
    > (REPLY from Robert)

    Inline images are dynamic content, background images from CSS are considered layout (thus, repeated across multiple pages) and these get a higher priority for remaining in the browser cache when the cache reaches its limit.

    > Easier maintenance with a single file to edit
    > (REPLY from Robert)

    Actually, this is far from true. There are millions upon millions of websites that consist of static HTML pages, and only with a very good grasp of regular expressions can you reliably go through so many pages for such a task.

    > For accessibility reasons, it’s good to have a
    > fallback text in the document
    > (REPLY from Robert)

    Except that an alt attribute can’t convey the same amount of information, as it only permits plain text as its value. You can’t add semantics or language-specific tags to certain words that are part of the heading with an alt attribute, but you can do that just fine with Image Replacement.

    Also, “images off CSS on” is a negligable share. For global websites, they form up probably less than 0.1% of the audience.

  • Robert Nyman says:

    Faruk,

    Thanks for your comment.

    > Images referenced in the CSS file are cached

    Maybe images in the CSS get a higher cache priority, I don't know about that, but inline images are still also cached.

    > Easier maintenance with a single file to edit

    If one has so many files that can't easily be updated/edit, be it manually or through a find and replace, something is fundamentally wrong.

    And if you use image replacement to replace, for instance, a logo, the code will be the same on every page. Then there's no need for any regular expression, just a common replace.

    Like:

    Replace all <pre><code><h1>

    <span>Some text…</span>

    </h1></code></pre>with<pre><code><h1>

    <img src="images/my-logo.png" alt="Some text…" />

    </h1></code></pre>

    Not such a big feat.

    Except that an alt attribute can’t convey the same amount of information…

    This is true. But for most scenarios, I at least haven't run across any real need for such semantic fallback text.

    Also, "images off CSS on" is a negligable share.

    While it might be true, it's dangerous thinking. If it works with inline images, I don't think it's worth the risk.

    Generally, if you think it does the trick for you, use it. But I don't see any major benefits that makes it worth the risks.

  • Sacha says:

    Robert,

    I think the important thing is whether one things of the replacement image as content or as a part of the layout. By image I mean the actual image, not the content of the image (because that has of course nothing to do with layout). One could argue that the plain text that is surrounded by defines the title, and anything else is additional, so why put it in the HTML file? You use two tags where actually one would be enough.

    But anyway, another new perspective to me. 😉 I probably shouldn’t be so «Oh, it’s new – so it’s great!» hehe … thx. Maybe after reading a little more about it, I will share your opinion.

  • Rob Mientjes says:

    What justifies it for me is that I can change the whole look of a heading just by changing the CSS. If I can't touch the markup, I can still make it look completely different. The other stuff's covered by Faruk 🙂

  • Faruk covered my point nicely.

    I actually think image replacement could be promoted far more than it currently is. It's a great technique keeping the presentation from appearing in your content, thus keeping the markup clear, thus keeping the message to the user clear.

    And yes, the CSS on/images off scenario is still a problem, but I am with Faruk saying the group of people using that negligible.

  • Rob's point is very good indeed. Sometimes you just don't have access to the markup (be it long-time legacy documents or whatever other reason), but you can still change the CSS.

    There are millions of legacy documents on long-existing websites. Are these fundamentally wrong? Perhaps. Does that change anything? No. They've been around since 1994 and have been building up ever since, all using static pages and hand-crafted links. Fundamentally wrong, perhaps, but inevitable just the same.

  • Robert Nyman says:

    Sacha,

    Thanks for your comment.

    I think the important thing is whether one things of the replacement image as content or as a part of the layout.

    That is a indeed a good question.

    Rob,

    Good to see you here!

    There might be cases where one doesn't have access to the markup, and then you have no choice. But to me, that sounds like a very rare situation (except for the CSS Zen Garden, of course :-)).

    Jeroen,

    It’s a great technique keeping the presentation from appearing in your content

    That's where our opinions differ, I don't think the techniques offered as of today are that great. But I can agree that it is a great concept! 🙂

    Faruk,

    There are millions of legacy documents on long-existing websites.

    True, but what makes you think that they are semantically correct and/or prepared for image replacement then? I don't think many of them are.

     

    To answer you all:

    To clarify, I have no problem with putting the image reference in the CSS; on the contrary, I'd really like that. But what I'm saying is that with the options available on the market today I just don't think it's worth it. The techniques aren't really that good (albeit clever), and to me it wouldn't be such a gain.

  • Tommy Olsson says:

    For once I agree with most of what Faruk said. 🙂

    The original FIR had several drawbacks. Since then there have been a number of improvements from various people. There are methods that allow you to replace text with an image without any extra markup, but those fail in the CSS on/images off scenario.

    I use image replacement for the 'logo' on my blog, and it seems to work as intended with or without CSS and with or without images (at the expense of 11 bytes of extra markup). It will fail, at least partially, with CSS on, images off, and a large text size, but I can live with that since it's not critical information.

    Contrary to popular belief, not everyone is on broadband yet. When I surf from home, I use Opera with a setting that only displays images that are already in the cache. If I encounter an image that I need to see, I can easily make it visible, but I filter out all the unnecessary fluff. As a result, surfing on dial-up is no longer unbearably slow. Although I realise that I'm in a small minority, I don't think I'm the only one to do it.

  • Robert Nyman says:

    Tommy,

    Thanks for sharing.

    Nowadays there are ways that are pretty good but I still fail to see any major benefit from it.

    I use Opera with a setting that only displays images that are already in the cache…

    Which is fine, and I respect your situation. But inline images are cached too, even in Opera, right?

  • I think it's always good to ask questions like these. It helps to get your thinking straight.

    I wrote about this topic quite extensively here:

    http://glazkov.com/blog/archive/2005/04/18/430.as

  • Tommy Olsson says:

    But inline images are cached too, even in Opera, right?

    Absolutely. That part was just to inform Faruk and others that there are people who will miss out if you ignore the CSS on/images off scenario.

    In most cases, an inline image with an alt text will work just as well. In other cases you'll need better formatting, e.g. by adding emphasis to part of a heading, and you can't do that with a CDATA attribute text.

    However, to me it's more a question of semantics. If the semantic purpose is to provide the text "This is a heading", then I think that's what should go into the markup. If you want it to look pretty, you can use image replacement in CSS to achieve that (although you may have to add an empty, semantically neutral element in the process, unfortunately).

    If the semantic purpose is to show an image with text in it, an inline image with a good text equivalent as the alt attribute is the correct choice.

    I think it's important to separate the semantics from the presentation.

  • If you are using IR to replace text with a font that is not on the web, then I think the place to do this is in the CSS. Hopefully in the future there will be better font support and with antialiasing technologies like clear type and that provided by Apple the need for IR to replace text will be a thing of the past. When that happens it will much simpler to change the CSS than every source page. For that matter, I know it's not as nice as a Photoshop font image, but it's still pretty good, why not SIFR?

  • Robert Nyman says:

    Dimitri,

    Thank you!

    I also think it's important to discuss this to get many different persons' take on it, to then form your own decision on how to proceed based on the facts and ideas you've gathered.

    I think you (in your article) and Tommy is on to something good. The questions we need to ask ourselves are: what is it you're going to put there? Text? An image? Is it presentation or content?

    Tanny,

    Thanks for coming here!

    If you are using IR to replace text with a font that is not on the web, then I think the place to do this is in the CSS

    Interesting. To me, that definitely sounds like content.

    …it will much simpler to change the CSS than every source page.

    This I don't buy, see the post and some comments for the reason why.

    When it comes to sIFR, I wrote about my musings about it in sIFR 2.0: Rich Accessible Typography for the Masses

  • Robert Nyman says:

    By the way, Jeroen and I had an instant messaging chat where we discussed how important a logo is on a web site.

    Is it content or presentation? Is it something you dare use image replacement for or should it be inline to be as foolproof as possible?

    Share your thoughts, please! 🙂

  • Tommy Olsson says:

    A real logo is a very important part of the corporate identity. It is often a registered trade mark, which means that it must have a very specific appearance (fonts, colours, etc.). You also want it to be visible in older browsers that don't support CSS.

    So a logotype for a company or an organization should definitely be an inline image IMHO.

    As I said before, I use image replacement for the "logo" on my site, but that's not a real logo.

  • Robert Nyman says:

    Tommy,

    So a logotype for a company or an organization should definitely be an inline image IMHO.

    That was my opinion too. I think it's too important to take any risks whatsoever with it.

  • Tommy Olsson says:

    Also, in this case the semantic meaning you are conveying is an image.

  • Good discussion. One case where I would see image replacement being used for a log is if the logo was modified for Web presentation (gradient added, colors changed, etc.). In this case, I would use img element to refer to the official, standard (print) image, and use image replacement to "spice it up".

    This actually would work really nicely if you are building a print stylesheet.

  • Robert Nyman says:

    Dimitri,

    Thank you!

    Sounds like an interesting idea, with one inline image and one image replacement for spicing it up. 🙂

  • […] mage Replacement Image Replacement—No Span Breakdown Of CSS Image Replacement Techniques Is Image Replacement Really […]

  • Mike says:

    Hey guys, I think everybody's kinda missing the point of image replacement here. Image replacement was first thought up not as an easy way to put all presentational styles into CSS, but to help visually-impaired users who are using screen readers! Did everyone forget that? 🙂

    The reason that semantically-reach information is needed for images is because without that, a screen reader will announce a logo with the same emphasis as, say, a 5×5 pixel spacer GIF or an email icon. That is the #1 priority point for using image replacement — because when you stick a logo into an H1 (not an image into an H1, but the H1 is the logo via image replacement) it is announced with the same emphasis as H1 text which is infinitely more useful to the assisted-user than just <code>alt</code> text. People using screen-readers FAR outweigh users who are browsing with CSS on and images off, so it's almost a moot point.

    Sticking an image into an H1 for a logo doesn't help at all, because when the screen reader gets to it, it's only just announcing alt text on an image and the H1 semantics are lost. Image replacement techniques that use <code>display: none;</code> to work are completely and utterly useless because the screen reader can read CSS, and will not say anything that's not visible on the screen. FIR and other display: none; techniques should not be used for this very reason.

    Faruk summed up my thoughts on this subject almost completely, but remember everybody, image replacement was first dreamed up because it was a more accessible alternative to just sticking images into your HTML when those images convey meaning within the context of the site.

  • Mike says:

    semantically-rich * 🙂

  • Robert Nyman says:

    Mike,

    Thanks for your long comment, and for thoroughly expressing your view on it!

    Correct me if I'm wrong here, but when it comes to how a screen reader reads out the text in the <code>alt</code> attribute within a <code>H1</code> tag, isn't that rather a screen reader issue?

    I think I've heard (not literally, but heard mentioned) that some screen readers do in fact read it out as a heading.

    When it comes to image replacement techniques and <code>display: none</code>, I couldn't agree more…

  • […] ameron Adams – The Man in Blue
    In search of the One True Layout
    Position Is Everything
    Is image replacement really worth it?
    Robert Nyman
    Make better Web […]

  • […] r Cameron Adams – The Man in Blue In search of the One True Layout Position Is Everything Is image replacement really worth it? Robert Nyman Make better Web pa […]

  • […] r Cameron Adams – The Man in Blue In search of the One True Layout Position Is Everything Is image replacement really worth it? Robert Nyman Make better Web pa […]

  • […] r Cameron Adams – The Man in Blue In search of the One True Layout Position Is Everything Is image replacement really worth it? Robert Nyman Make better Web pa […]

  • […] r Cameron Adams – The Man in Blue In search of the One True Layout Position Is Everything Is image replacement really worth it? Robert Nyman Make better Web pa […]

  • Also, in this case the semantic meaning you are conveying is an image.

  • If we are talking about the logotype, I find it most often to be a part of the content, not design. It's a part of the default view and plays a critical part in telling the user who the author of the site is.

    Considering the logo, it should also be clickable in most case, with the home page as destination.

    Take this for example: When replacing a h1 with a logo, which is very common, you will probably make the h1 clickable in the same way. But since a h1 should represent the page's content and will likely change from page to page, it's not such a good idea at all. You'll get a situation where "I clicked the large 'blue widgets' link and came to the front page". Confusing and bad semantics. Not to mention SEO.

    It's easy to use the very same replacement techniques to alter the logo in various layouts, f.ex negative for screen and positive for print.

    I'm all in for using the img tag for logotypes, except maybe on the front page.

    http://monc.se/kitchen/27/logotype-image-replacem

  • Robert Nyman says:

    David,

    I generally agree with you. However, and this might be slightly off-topic, but as of lately I've tended to lean to that it's ok to have one <code>H1</code> element for the logo and one for the actual heading/name of the current page.

  • […] Is image replacement really worth it? Robert Nyman […]

  • kai says:

    I think the question should be "is image replacement really that bad?"

    😉

    I don´t think so ^^

  • […] Is image replacement really worth it? Robert Nyman […]

  • Ricardo says:

    This guy created a technique that solves the CSS on + Images off scenario, and even allows scalable image replacement, with very clean markup (a bit bulky css though).

    I was in for simply using <img> tags with alt attributes, but it defeats the point of content/structure separation, I want all my styling away from the XHTML.

  • …and what about seo? It is usefull for indexation?

  • […] Is image replacement really worth it? Robert Nyman […]

  • Auyana says:

    I am also interested in the aspects regarding seo. I doubt that image replacement is useful for indexation.

  • Manu says:

    I think it´s useful for SEO! If you haven´t some content for indexation you can´t have a better indexation.

  • […] Is image replacement really worth it? Robert Nyman […]

  • Laufkran says:

    A very interesting discussion. 🙂 And who are revealed the secret?

  • […] Is image replacement really worth it? Robert Nyman […]

  • […] Is Image Replacement Really Worth It? – Robert Nyman […]

  • […] Is image replacement really worth it? […]

  • It's of course important for SEO. Most people don't think about this strong fact.

  • […] Is image replacement really worth it? Share Articoli correlati:Risorse CSS: sintassi, cascata, selettori, specificità e ereditarietà […]

Leave a Reply

Your email address will not be published. Required fields are marked *