Home » Graphics: Minimize Dithering – reduce banding diffusion dithering in gif png for smaller optimized images

Graphics: Minimize Dithering – reduce banding diffusion dithering in gif png for smaller optimized images

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

balloon at 64 colors showing banding balloon at 64 colors and 85% diffusion dithering
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 as a jpeg high quality balloon at 32 colors 85 percent diffusion dithered balloon at 64 colors perceptual palette
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 no dithering balloon at 64 colors 85 percent diffusion dithered balloon at 64 colors 85% dithered 23% lossy
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.

Further Reading

Graphics: Choose the Right Image Format
Choosing the right image format is the first step in optimizing web graphics. Learn how to choose between the GIF, PNG, and JPEG formats for different image types.
Graphics: Minimize Bit-Depth
Minimize the number of colors in GIFs and PNGs to optimize file size. Lower bit-depths mean smaller palettes and code widths, which makes for smaller images.
Graphics: Use Lossy Compression for Smaller GIFs and PNGs
Lossy compression lets you squeeze more bytes out of your GIFs and PNGs. Lossy compression increases identical pixel patterns to improve compression in indexed-color images.
Graphics: Use Weighted Optimization
Weighted optimization or regional compression applies different degrees of compression to different areas of your image. By varying the quality within images you can improve file size.
Optimizing Web Graphics
Chapter summary from Speed Up Your Site, shows how to correct, optimize, and compress images for minimum file size and maximum quality.

2 thoughts on “Graphics: Minimize Dithering – reduce banding diffusion dithering in gif png for smaller optimized images”

  1. I can not seem to get the white edge off graphics when I create a logo that has just text not pictures. I want to create a logo that I can use on any background and have not been able to find a way to get rid of the white stuff around the edge of the letters..any suggestions.
    d

    Reply
  2. Dan,
    The white edge you see around your text is from anti-aliased text. There are two ways around that:
    1. Use a background the same color of your header (so the text anti-aliases to the same background color)
    2. Use aliased text (i.e., turn off anti-aliasing or use a font like courier)
    hope this helps,
    – Andy

    Reply

Leave a Comment