« Graphics: Influence Histograms | Main | Graphics: Blur Backgrounds for Optimized JPEGs »

Graphics: Minimize Dithering

Summary: Dithering uses existing colors to strategically change pixels to minimize apparent banding. While dithering increases file size, when used in combination with lossy compression and weighted optimization, dithering can allow lower bit-depths for GIFs and PNGs.

At lower bit-depths, color quantization can reduce smooth color gradients into discernible bands of color (see Figure 1). Dithering is the process of changing pixels in these color transition zones to minimize banding. This feathering process strategically places patterns of available colors to emulate colors eliminated in the color quantization process. The resulting image appears smoother, but dithering makes file sizes larger (see Figure 2).

Comparison of No Dithering to Dithering at 64 Colors
Figure 1: Balloon at 64 Colors Shows Banding (9,121 bytes)	Figure 2: 64-Color Balloon with 85% Dithering (10,052 bytes)

The compression algorithms used in GIFs and PNGs are dictionary or substitution-style schemes. LZW and deflate substitute shorter codes for repeated pixel patterns along scanlines. Generally, the more flat-color areas you have the smaller the GIF or PNG. Anything that disturbs this regularity (dithering, drop-shadows, anti-aliased text) will increase either the number of colors or the number of unique pixel patterns and thus increase file size.

Used judiciously however, dithering can allow you to use lower bit-depths. A 32-color image at 100% dithering is often smaller than a non-dithered 64-color image (see Figure 3).

Figure 3: Dithering at 32 Colors versus 64 Color GIF
Original Balloon	32-color Balloon, 85% dithered = 7,975 bytes	64-color Balloon = 9,121 bytes

The colorful balloon at 32 colors and 100% diffusion dithered is 8,277 bytes, at 85% dithered the dithering was less apparent, and it weighs in at 7,975 bytes. The 64-color balloon is 9,121 bytes with no dithering.

Lossy Compression and Dithering

You can combine "lossy" compression with dithering to compensate for the increased file size. Lossy compression has the opposite effect as dithering does on file size. Lossy compression increases redundancy along scanlines, and makes the LZW and deflate algorithms work more efficiently. At lower values, lossy compression is not easily detected and works well with the patterns that diffusion dithering creates (see Figure 4).

Figure 4: Comparing 32-Color Dithered GIF with 64-Color Non-Dithered GIF
64-color balloon = 9,121 bytes	64-color Balloon, 85% dithered = 10,052 bytes	64-color Balloon, 85% dithered, 23% lossy = 9,148 bytes

The final dithered and lossy 64-color image has the smooth look of a higher bit-depth image yet nearly the same file size as the 64-color image with no dithering. Of course this smooth-toned image would work better as a JPEG, but this gives you an idea what can be done for an extreme example.

Diffusion versus Pattern versus Noise Dithering

While pattern dithering gives more repeated patterns for LZW to chew on, it is less discriminate than diffusion dithering. Diffusion dithering only applies dithering to abrupt transition zones. We recommend using diffusion dithering over the others.

Conclusion

Used judiciously, dithering and lossy compression allow you to reduce bit-depths without sacrificing visual quality. Use the minimum amount of dithering that you can, because dithering increases file size. Used in combination with lossy compression and weighted optimization, dithering allows you to use lower bit-depths for smaller GIF and PNG file sizes.

Graphics: Minimize Dithering

Comparison of No Dithering to Dithering at 64 Colors

Figure 3: Dithering at 32 Colors versus 64 Color GIF

Lossy Compression and Dithering

Figure 4: Comparing 32-Color Dithered GIF with 64-Color Non-Dithered GIF

Diffusion versus Pattern versus Noise Dithering

Conclusion

Further Reading