Image Replacement Considered Evil

Monday 8 November, 2004 ( 5:46PM GMT)

In another great "10 Questions" interview over at the Web Standards Group, Jon Allsopp of WestCiv fame gets a grilling.

The answer that was of particular interest to me (in a general web design kinda way) was to the question "what do you think about the various image replacement methods?".

Out of all of the web designers I know, read about and see the work of, I can safely say that my point of view is closer to Johns than most - graphical text is used far too much in web design. But although I do agree with the general gist, I feel the need to pick up a few points. Maybe just to play devil's advocate...

To kick off, I would disagree that image replacement breaks the concept of separating content and presentation. Of course, in visual terms, it doesn't matter if the image is replacing any functional text or not and the image will effectively be conveying the information to those that can see it, but if it can be said to be offering an alternative presentation to any given content then it can safely be defined as presentation. Just because it's made up from a load of pixels rather than a scalable font, what's the difference? - these are both ways of visually presenting content.

John goes on to point out the practical drawbacks of image replacement...

His first point is that IR techniques are not accessible. I wouldn't say that they are not accessible (full stop), but they have severe accessibility problems.

It is a very good (although quite obvious, but so often neglected) point that John makes when he says that accessibility isn't all about accommodating those who are blind and use screen readers - there are other disabilities to consider, such as impaired vision - those who suffer from which will quite possibly have a harder time reading graphical text, which can not be scaled up.

Like biology and "vertebrate bias", web accessibility seems to suffer from screen-reader bias.

Although not ideal, accessibility-wise, if we are forced to use image replacement (and we often are, which I'll come to in a moment), we can make sure that it is as accessible as possible by making sure that text is as large as possible in the first place and that there is alternative content that can be read by screen readers, for example.

His next point is that image-replaced text is ugly, which is very much one mans opinion and something that most designers would most certainly disagree with.

Linked to the accessibility point, he does however say that "due to the different default screen resolutions, and to user control by font zooming, while with CSS and text you can maintain font proportionality using say ems, IR based designs won't scale." which is something that all too often seems to be overlooked in web design. It isn't unusual to find a design based on pixel sizes that breaks down when the text size is changed.

He also says "IR techniques make reusing, updating, restyling content much more difficult" because graphics need to be changed rather than quick text edits. Unfortunately, this is kind of tough luck and it's not something that would stop a designer applying a certain style to any other aspect of a page design.

Image replacement is not going anywhere anytime soon. With so few safe fonts at a designer's disposal (and the fact that they're not anti-aliased by default on older operating systems), graphic designers and clients demand images to be used for text to the extent that IR has become a necessary technique in modern web design.

Sometimes it isn't even a case of one web maker trying to convince one client that functional text is the better option (which is difficult enough) - many organisations have a number of people in control of the design and a number of people in control of the code. And let's not even mention the project managers and the inevitable design by committee. Oops. Too late.

All we can do is our best. When we use image replacement we can apply it in the best possible way to wring out as much accessibility and flexibility out of what is left over.

Comments

Comment 1

This entry should mention sIFR.

So said Gabriel Mihalache on Monday 8 November, 2004 at 7:42PM GMT.

Comment 2

Why?

So said Patrick on Monday 8 November, 2004 at 7:49PM GMT.

Comment 3

Because it scales, has many fallbacks just in case something goes wrong, and it does not require new images. It's not perfect, but it solves a good number of the problems caused by previous IR techniques.

So said Chris Vincent on Monday 8 November, 2004 at 8:16PM GMT.

Comment 4

http://www.mikeindustries.com/blog/archive/2004/08/sifr

Just in case someone is curious about what sIFR actually is...
I agree with the above poster. It's a valid substitute for current image replacement that scales and was created to combat many of the issues brought up in this post.

So said travis on Tuesday 9 November, 2004 at 3:53AM GMT.

Comment 5

Using flash instead of images to render text is a bit over the top IMHO.

So said andrew on Tuesday 9 November, 2004 at 4:58PM GMT.

Comment 6

I essentially agree with Patrick here. Whether we use IR or not, the technique serves as ornamentation and decoration of existing content. As I have said before, provided the content/type/copy/meaning is preserved when the stylesheet is removed we are only removing presentation. I do see John's perspective albeit not in perfect black and white.

So said Chris B on Wednesday 10 November, 2004 at 7:19AM GMT.

Comment 7

Andrew-

Care to explain why you think it's over the top? sIFR allows for scalable text that is generated on the fly, in an infinite number of possible typefaces, and degrades nicely to users without flash or javascript. How is that "over the top?"

Bloggers often time live in their own world. You may say that Flash is "over the top" for rendering the headers on your blog. After all, there are only four of them, they never change, and images are just much easier. I agree. But Mike created sIFR for ESPN.com and other sites like it.. ESPN.com has new headlines by the minute, requires a corporate typeface, and requires that the headers be entered by non-designer types. I'd say it's "over the top" to expect a bunch of content editors who have never used Photoshop to create image based headers for each headline they post, which can probably be up to five or six per minute. With sIRF, all they have to do it type the text. That's all.

What's so wrong with that?

So said Jeff Croft on Wednesday 10 November, 2004 at 10:03PM GMT.

Comment 8

Perhaps, like a lot of techniques, individual circumstances make the decision for you. I mean generalisation is a bad thing at the best of times. I'd have to comment that given the client's wishes, the job specifications, and all of the other factors involved in the decision whether or not to use IR techniques there probably isn't a black and white answer to this one. Personal choice and politics. Just one opinion of course, hope its not low grade meat lol.

Good devil's advocating by the way.

So said Steven Clark on Thursday 11 November, 2004 at 7:52AM GMT.

So said Simon Walsh on Tuesday 22 November, 2005 at 10:13AM GMT.

Comment 12

Speaking about personal choices I choose sIFR as an alternative to other IR techniques. But I do not insist that it's the best choice.

So said Andy on Thursday 19 January, 2006 at 7:30AM GMT.