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).
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.
