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
imgtag. - Images referenced in the CSS file are cached
- Reply: As far as I know, images referenced through inline
imgelements 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
altattribute on theimgtag.
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).
48 Comments/Reactions
July 5th, 2005 at 11:05
> 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
altattribute 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.
July 5th, 2005 at 11:32
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
with
Not such a big feat.
This is true. But for most scenarios, I at least haven’t run across any real need for such semantic fallback text.
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.
July 5th, 2005 at 11:50
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.
July 5th, 2005 at 11:53
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
July 5th, 2005 at 12:09
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.
July 5th, 2005 at 12:14
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.
July 5th, 2005 at 13:14
Sacha,
Thanks for your comment.
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,
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,
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.
July 6th, 2005 at 7:31
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.
July 6th, 2005 at 9:23
Tommy,
Thanks for sharing.
Nowadays there are ways that are pretty good but I still fail to see any major benefit from it.
Which is fine, and I respect your situation. But inline images are cached too, even in Opera, right?
July 6th, 2005 at 17:46
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.aspx
July 6th, 2005 at 19:19
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.
July 6th, 2005 at 19:35
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?
July 6th, 2005 at 21:46
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!
Interesting. To me, that definitely sounds like content.
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
July 6th, 2005 at 21:54
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!
July 7th, 2005 at 8:34
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.
July 7th, 2005 at 8:39
Tommy,
That was my opinion too. I think it’s too important to take any risks whatsoever with it.
July 7th, 2005 at 21:12
Also, in this case the semantic meaning you are conveying is an image.
July 8th, 2005 at 14:54
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.
July 8th, 2005 at 15:38
Dimitri,
Thank you!
Sounds like an interesting idea, with one inline image and one image replacement for spicing it up.
December 3rd, 2005 at 1:24
[...] mage Replacement Image Replacementâ€â€No Span Breakdown Of CSS Image Replacement Techniques Is Image Replacement Really [...]
December 12th, 2005 at 17:40
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
alttext. 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
display: none;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.
December 12th, 2005 at 17:41
semantically-rich *
December 12th, 2005 at 18:16
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
altattribute within aH1tag, 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
display: none, I couldn’t agree more…September 12th, 2006 at 13:55
[...] 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 [...]
October 25th, 2006 at 13:34
[...] 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 [...]
November 10th, 2006 at 15:20
[...] 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 [...]
November 26th, 2006 at 17:32
[...] 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 [...]
November 26th, 2006 at 17:32
[...] 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 [...]
March 19th, 2007 at 23:52
Also, in this case the semantic meaning you are conveying is an image.
May 3rd, 2007 at 20:07
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-replacement
May 3rd, 2007 at 22:27
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
H1element for the logo and one for the actual heading/name of the current page.June 7th, 2007 at 18:29
[...] Is image replacement really worth it? Robert Nyman [...]
February 13th, 2008 at 18:17
[...] Is image replacement really worth it? Robert Nyman [...]
April 11th, 2008 at 22:09
I think the question should be “is image replacement really that bad?”
I don´t think so ^^
April 30th, 2008 at 11:59
[...] Is image replacement really worth it? Robert Nyman [...]
April 30th, 2008 at 15:05
[...] Is image replacement really worth it? Robert Nyman [...]
May 7th, 2008 at 18:23
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.
November 13th, 2008 at 13:52
…and what about seo? It is usefull for indexation?
November 14th, 2008 at 19:14
[...] Is image replacement really worth it? Robert Nyman [...]
November 29th, 2008 at 11:57
I am also interested in the aspects regarding seo. I doubt that image replacement is useful for indexation.
December 22nd, 2008 at 14:19
I think it´s useful for SEO! If you haven´t some content for indexation you can´t have a better indexation.
January 1st, 2009 at 20:57
[...] Is image replacement really worth it? Robert Nyman [...]
January 5th, 2009 at 9:49
[...] Is image replacement really worth it? Robert Nyman [...]
January 20th, 2009 at 6:13
A very interesting discussion.
And who are revealed the secret?
March 22nd, 2009 at 18:45
[...] Is image replacement really worth it? Robert Nyman [...]
April 18th, 2009 at 2:19
[...] Is Image Replacement Really Worth It? – Robert Nyman [...]
July 1st, 2009 at 22:58
[...] Is image replacement really worth it? [...]
May 7th, 2010 at 11:14
It’s of course important for SEO. Most people don’t think about this strong fact.
Write a comment
Twitter reactions