All About Dithering In GIF Images

Image shows the 4-Up view of Photoshop's Save for web
Photoshop's Save for Web feature let's you preview the results of a dithering method.

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 , like the image, produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
  • The Colour 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 the millions of colours in the original image have been reduced to 32 colours with greys, greens and reds predominating. 

    Select the image in the upper right corner, reduce the number of colours 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 wash of colour. This option generate 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 to 111 1k. 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 colour 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 colours in the Colour Table have increased.

    You may have noticed the 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 to choose? This is where I step aside and don't answer that question. When it comes to those decisions they are subjective, not objective. You make the final call.