Attention Macintosh users!
The software available from this page is now obsolete. The folks at Furbo Filters have incorporated the WebScrub algorithm (described below) into their "Web Scrubber" shareware filter, and added a number of nifty enhancements. I recommend that you download the "Webmaster Series" plug-ins. They're working on a Windows version. This is actually what I hoped would happen.
This piece discusses dithering in the context of Web graphics, and introduces the WebScrub image optimization algorithm developed by Todd Fahrner at Verso, realized as freely-downloadable Photoshop plug-ins for Mac and Windows, as well as scripts for the image-processing program DeBabelizer (MacOS only at present). Sample images show the benefits of the process.
People preparing graphics for the Web must cope with the fact that many users have their displays set to 8-bit (256) color mode, either out of necessity, ignorance, or apathy. 256 colors are generally insufficient for representing rich graphics, unless the palette is customized very carefully for each image or set of similar images. To assure some level of cross-platform color consistency, however, Netscape and Microsoft have settled on a fixed 216-color palette which applies forcibly to all images viewed in 8-bit color. This palette, known as "the color cube," "the Netscape palette," or "the Browser-Safe palette" is familiar to all seasoned Web designers and graphics production specialists:
One means of extending the usefulness of this limited palette is dithering. Dithering refers to the interpolation of unavailable colors by mixing pixels of (usually two) available colors in certain patterns and ratios. When the dither pattern is very tight, with available colors in nearly equal quantities, the resulting appearance can be very good, sometimes nearly indistinguishable from a nondithered image (demonstrated in the DitherBox plug-in promo materials). Dithering becomes objectionable when the pattern is diffuse, and when the palette used is obviously alien to the original image. The color cube's hot, bright, mathematical unnaturalness makes it alien to a great many images.
Note that images may be dithered either at the time they are created (pre-dithering) or on-the-fly as they are viewed, based on the limits of the display. So there are three kinds of dithering:
"Bad" is pre-dithered to the cube. It looks Bad no matter the quality of your display. "Ugly" will dither on-the-fly to a sickly measled appearance when viewed in 8-bit color. (Reload if necessary.)
Many designers leap from the frying pan of the Ugly into the fire of the Bad, forcing their images at publish time to the "worst case" 216-color palette. This is unfortunate on two counts:
Assuming the image in question is destined for GIF or PNG format, a better way is not to force images to an arbitrary foreign palette like the cube, but to reduce colors in the native palette to the least acceptable number, dithering only in exceptional cases as a last resort. This will assure that the images will look as good as possible under all viewing conditions, dithering only if necessary in 8-bit browsing situations. Undithered images will also be more highly compressible than pre-dithered ones.
The most common tool for this operation is Adobe Photoshop, whose adaptive palette reduction unfortunately shifts the colors ever so slightly, causing even colors originally specified from the "safe" cube colors to dither when viewed in a browser at 8-bit. Because the color shift is slight, this dithering is diffuse and Ugly: measles.
Equilibrium's DeBabelizer is superior to Photoshop in this regard: it does not shift colors when reducing the palette. Even with DeBabelizer, however, there is no assurance that colors remaining in the image will not produce Ugly dithering when viewed in 8-bit.
The only way out of this dilemma has been to hand-edit the palette, adjusting colors that might dither objectionably one-at-a-time. This is extremely tedious work. The ideal dithering solution would permit the Good, shun the Bad, and avoid the Ugly, all without tedious manual intervention. We've done it.
Programmer Philip Gwyn, a gentleman and scholar, has donated his time and skills to turn the original WebScrub DeBabelizer scripts (offered below) into Photoshop plug-ins, for both Mac and Windows. In a nutshell, the plug-in "biases" images toward the web palette by degrees, rather than simply slamming them to it, all or none. Download the goodies:
Got DeBabelizer for MacOS? The scripts offered below will apply the WebScrub algorithm to as many images as you like. It's less flexible than the Photoshop plug-in, but requires no manual intervention for batch processing.
The scrubbing operation alters colors that could produce Ugly dithering, while preserving those that can dither satisfactorily (Good dithering). It looks for colors whose red, green, and blue values are within n units of an equimultiple of 51 in 0-255 RGB space. There are 216 steps, corresponding to the 216 cube colors. "Close" values get snapped to the cube; any others are left alone, to dither only as necessary in 8-bit surfing environments. As a bonus, scrubbing tends to regularize images, boosting the effectiveness of lossless compression schemes like GIF.
If the algorithm fails to produce good results for GIFs, your image should probably be a JPEG or higher-depth PNG. The algorithm can help minimize the Ugly in these formats, too: run one of the processes on the full-color (unreduced) image, perform a mild Gaussian blur to take the edge off any banding, and save.
If you have a PhD in psycho-optics, you could optimize the, uh, "grit curves" to match the eye's sensitivity to color shifts through the spectrum. With 10-grit, for instance, sometimes the collapsed spectral range is quite noticeable, while other times the range could be larger. By varying the curve, you'd further optimize visual quality and compressibility. Finally, it might be worth looking at the 216 values that are exactly in-between adjacent cube values. Anything within n units of those would get locked to exact inter-cube values, where they would dither on-the-fly cleanly to a 50% dither (like DitherBox). Similarly, the values at exactly 1/3 the cube-cube span: these would get locked on, to produce clean 3:1 dithers.... So long as you permit enough off-cube intermediates to avoid the chunky cartoon look, you come out ahead.
If you'd like to improve, extend, or prepare other realizations of this stuff, and make your work publicly available, please contact the author Todd Fahrner at Verso.
Disclaimer: Verso does not provide technical support, nor will it assume any liability for problems related to the use of these scripts. Verso places the scripts and underlying algorithms into the public domain.