How Dithering Works in GIF Images

Image shows the 4-Up view of Photoshop's Save for web

Tom Green 

Dithering scatters different colored pixels in an image to make it appear as though there are intermediate colors in images with a limited color palette. This is commonly found with graphics destined for web pages. Your operating system will automatically dither images when your display settings are set to 256 colors or less.

Dithering is often used to reduce banding in GIFs with graduated color transitions. Most software provides options that let you control the appearance of the scattered pixels; for example, the dithering can be a rigid pattern, random noise, or diffusion. Keep in mind that dithering can increase the file size of an image, but in many cases, the improved appearance is worth the trade-off.

A great way of understanding how dithering works is to open a colorful image in Photoshop. From there select File > Export > Save for Web (Legacy). When the panel opens select the 4-Up tab. You will see 4 versions of the image and the one in the upper left corner is the original image. In this case, the image is 1.23 MB in size. Essentially, this panel gives you a preview of the results of image optimization. There are a couple of things to pay attention to in this panel.

  • The first is the Adaptive palette choice. What this does is to create a custom color table by sampling colors from the predominant spectrum in the image. For example, an image with only the colors green and red produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
  • The Color Table is the other thing to look at. This table is formally known as a Color Lookup Table or CLUT. What it does is to take the original colors in an image and remap them to different, specific colors to create a certain look. In our case the millions of colors in the original image have been reduced to 32 colors with greys, greens and reds predominating. 

Select the image in the upper right corner, reduce the number of colors to 32 and push the Dither slider to 0%. Select Diffusion from the Dither method pop down. Notice that the file size has plummeted to 67 k and the green flower looks like a wash of color. This option generates a random pattern of dots that are all the same size but spaced closer or further apart to get the shade that "closely" matches the original image.

Select the image in the bottom left corner and change its diffusion method to Pattern. The first thing to notice is the file size has increased. This is because Photoshop applies a halftone-like square pattern to simulate any colors not in the color table. The pattern is quite noticeable and if you compare the Diffusion image with this one you will see a bit more color and image detail.

Select the image in the bottom right corner and set its diffusion method to Noise. Again there is a marked file size increase along with an increase in color and image detail. What has happened is Photoshop has applied random pattern similar to the Diffusion dither method, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise dither method and the number of colors in the Color Table have increased.

You may have noticed the times for each of the images in the 4-Up view. Don't pay much attention to them because they are average download times and are rarely, if ever, accurate. The pop-down beside the time lets you choose the bandwidth. The choices range from a 9600 bps (Bits Per Second or Baud Rate) dial-up modem to super fast. The problem here is you have no control over how the user is receiving the image.

So which Dither method should you choose? This is where we step aside, as it's subjective. You make the final call.