2006/11/22

Resolution independence: the problem with bitmaps

I can’t keep up with the discussion on resolution independence that started a little while back and to which I added my thoughts the other day.

The IconFactory rebutted the claims about their vector image being composed of bitmaps — how else do we expect such effects to appear in icons? And fair enough. The field of raster image processing is far more advanced than vector; you need vector support for things like gaussian blurs in an image format before they can be included in a vector image. None of this is impossible (see Windows Vista) but it does require work.

Many people have been saying that high resolution bitmaps are all we need. And I challenge that claim. Again, I’ll reference Ian Griffiths; this time, see this article discussing Apple’s then-new 30 inch LCD display. In particular, note the visual artifacts shown in the “Click me!” button he shows; that’s the crux of the argument.

In a nutshell: bitmaps are fine, provided they exist by themselves. Icons, for example, possibly are best represented in some ridiculously large bitmap with a million pixels or so. All it’s going to do is sit on screen somewhere and presumably change size at various points. Nothing to worry about; decimation with low-pass filters (or whatever “smart” re-sizing algorithm you wish) works fine to rescale the image nicely (see Mac OS X’s Dock).

However, interface elements that have to align with each other must not exhibit scaling artifacts that are inevitable when dealing with raster images. “Resolution independence” implies that the sizes of interface objects can be specified in real world units (points, millimetres, inches, …) and render at the correct size. A bitmap has no provision to scale its internal features accordingly. What do I mean by this?

Say you’ve got the edge of a scroll bar rendered with blurs, transparency, whatever effects you like, and this has to mesh with part of the window that cannot be drawn as a bitmap of the same size. When these bitmaps are scaled, no matter how high their resolution, when it comes time to remove pixels from the image, rounding issues are going to affect which parts of the image stay and which are removed. Similar to anti-aliasing, a sharp hairline may end up a fuzzy mess if it doesn’t snap exactly to an integer number of display pixels. Bitmaps of different sizes will rescale and render such features in a non-controllable way. So you’ll end up with lines that change width when they shouldn’t or have off-by-one errors between adjacent interface elements.

And even with high-res displays, it’s surprising how much a “one pixel off” error stands out. This problem can only be solved satisfactorily (once and for all) if interface elements that must co-exist are all depicted as vectors and are sampled to the display resolution all as one.

To summarise: icons are fine as bitmaps. But there’s more to a graphical user interface than icons.