What Is Dithering In Digital Imaging ?

The four-up view in Photoshops Save For Web panel shows the effect of dithering on a colour image.
Dithering is a necessary evil when it comes to digital imaging and can actually work to your advantage.

Dithering is the result of a computer attempting to match a color from a mixture of other colors. It is commonly seen in GIF files that use a color the browser doesn’t support. This is commonly due to the color palette- sometimes referred to as “Bit Depth or Color Depth”-  from which the color is being called.

The computer you are using mostly likely can display colors found in a 24-bit color palette.

What this simply means is each pixel on your screen can display one of 16.8 million colors. How does that number arise? In the earliest days of computing a monitor could display a single color pixel which meant the pixel was either On or Off. The color palette therefore was limited to two colors which was commonly referred to as 1-bit color expressed as 21..

When colour arrived on computers displays were able to show 256 colors per pixel. This was referred to as 8-bit colour or 28. As computers became more powerful they were able to display over 66,000 colours per pixel or 16-bit colour (216). Today, computers are able to display 16.8 million colours which is known as 24-bit (224) colour.

So where does dithering come into play?

Let’s assume you have an image with a red pixel that is one of the colours in the 16-bit palette but it is being displayed on a monitor that can only render 8-bit colour.

What happens is the computer will replace that 16-bit red with its closest approximation in the 8-bit palette. The result is “banding” or those bands of colour seen in a gradient in a GIF image. In today’s graphics workflow this is rarely an issue but, with the rise of the web, the GIF image is making a comeback.

In the above image you can see dithering “at play” when you open Save For Web in Photoshop's  Export options. The original image, in the upper left, is a 24-bit JPG image and it looks great. The image to its right has been converted to a GIF image and the colours in the image reduced from a palette of millions of colours to one containing only 64 colours. You can see the banding in the sky and in the sides and bottom of the building. The Color Table shows the 64 colours in the image which means any colours in the original image that aren’t in those 64 colours are replaced with colours that are in that Color Table. The bottom two images have tables containing 32 and 16 colours and the result is as expected. You may be wondering why the image with 16 colours looks better than the other two. It is simply because the blue of the sky has been replaced with the blue in the 16 colours in the Colour Table.

You also could assume from this that GIF images are “evil”. Not even close. Notice how the image’s file size drops from 1.79M to 131k in the 16 colour image? This is because the computer only has to remember 16 colours which means the file has a ton less colour information resulting in that steep drop in file size.

This explains why GIF images and GIF animations are making a comeback. They load really fast in the browser because they are so small.

There is another way of introducing dithering or “banding” to an image without converting it to a GIF image. All you have to do is to keep compressing and recompressing a jpg image. Remember, jpg compression is a lossy compression method. That means the image is compressed by tossing out colour information. If you compress an already-compressed jpg image, you are tossing out even more colour information and, eventually, banding will appear. In fact areas where colour will completely be removed appear as white which is commonly referred to as a ‘halo”. Even if you don’t recompress a .jpg image you can still introduce banding into the image.

This occurs when you save the image and you are asked to choose a quality value.

The scale usually runs from 0% to 100%. If you choose a quality value of, say, 10 you are applying maximum compression to the image which means colour information is lost and dithering appears. A best practice when working with .jpg images is to use a quality setting of around 80% though, if the image is physically small and destined for the web, a setting of 60% might work.

mla apa chicago
Your Citation
Green, Tom. "What Is Dithering In Digital Imaging ?" ThoughtCo, Feb. 25, 2016, thoughtco.com/what-is-dithering-in-digital-imaging-3892483. Green, Tom. (2016, February 25). What Is Dithering In Digital Imaging ? Retrieved from https://www.thoughtco.com/what-is-dithering-in-digital-imaging-3892483 Green, Tom. "What Is Dithering In Digital Imaging ?" ThoughtCo. https://www.thoughtco.com/what-is-dithering-in-digital-imaging-3892483 (accessed October 17, 2017).