Fri 9/7 The Death of Dither
If you have visited Egg Freckles anytime during the past few days then you know the dither is dead. The black and white dithered images that used to accompany each of my posts are gone. Dithering is a technique used in computer graphics to create the illusion of color depth in images with a limited color palette.
Since Egg Freckles is trying to resemble a Newton MessagePad with a 1-bit display, I thought using images rendered with the 1-bit Atkinson dithering algorithm would be a neat addition to the site. Over the years I have gotten praise from readers and developers alike, who appreciate seeing their favorite apps with an old time look and feel. I believe Egg Freckles’ dithered images have helped me stand apart from other blogs, but I fear the age of dithered graphics may be at an end.
In a dithered image, colors not available in the palette are approximated by a diffusion of colored pixels from within the available palette. The human eye perceives the diffusion as a mixture of the colors within it. Dithered images, particularly those with relatively few colors, can often be distinguished by a characteristic graininess, or speckled appearance.
In the past dithering has been used to mask the poor output capabilities of digital monitors by giving them the illusion of a greater available color depth. For example, dithering might be used in order to display a photographic image containing millions of colors on video hardware that is only capable of showing 256 colors at a time. During the early days of the web, dithering was used by web browsers to mask the limited capabilities of computer hardware by constraining the color palette of downloaded images. It was due to problems with dithering that a color palette known as the “web-safe color palette” was identified, for use in choosing colors that would not be dithered on displays with only 256 colors available. Even with today’s 32-bit monitors capable of displaying millions of colors bandwidth is still a problem, and popular graphic file formats like GIF and PNG often employ dithering to reduce the file size of images before they are sent over the web.
By its nature, dithering introduces a pattern in to the image, the idea is that the image is viewed from such a distance the pattern is not discernible to the human eye. Unfortunately this is not typically the case and often the patterning is visible.
Dithering was employed on early Macintosh computers to mask the fact that they could only display black and while pixels. The Atkinson dithering algorithm was first implemented in early scanning software to give the impression of greyscale graphics, but even on displays capable of depicting millions of colors the effect has beautiful quality all its own.
Atkinson dithering, developed by Apple programmer Bill Atkinson, resembles Jarvis dithering and Sierra dithering, but it’s faster. Another difference is that it doesn’t diffuse the entire quantization error, but only three quarters. It tends to preserve detail well, but very light and dark areas may appear blown out.
I chose the Atkinson dithering algorithm for Egg Freckles because of its eye-catching contrast and ties to the early Mac. But as displays have increased in density, the hard edged pixels that make dithered art appealing are slowly turning to grey.
The retina display, and antialiasing are slowly killing dithered art. Instead of showing the crisp borders the algorithm intended, retina display are enlarging the image in software and blurring the boundaries between points with antialiasing. Serving up multiple sizes of the same dithered image where the hard edges have been preserved may fix the problem on displays where densities can be anticipated. But multitouch displays encourage users to pinch and zoom the rendered output, producing unanticipated point sizes and blurring the intended details of dithered art.
The only solution I can see, is an algorithm that dithers images on the fly in accordance with the point densities for which they are currently displayed. I have tried using a technique in the past that relies on javascript and the HTML5 canvas element to render dithered images on the fly, but the flicker produced from a dynamically rerendering image appears jarring, especially during zooming. Even with perfect on the fly dithering, modern browsers insist on antialiasing the final output, leaving a dithered image’s hard edges blurry and soft. I fear as displays get denser, and volatile points replace static pixels, dithered graphics may become a relic of the past.