Color Palettes and Dithering

Before you can understand how to manipulate graphics, it is important to know a little bit about how the computer stores images internally, and how they are received by the person viewing your Web page.

When a computer works with an image, it deals with individual dots, or pixels of color. It does not think of a row of twenty red pixels next to each other as a straight line. When you look at all of these pixels next to each other in a large group, they form a (hopefully) recognizable picture.

There are two basic ways a computer deals with pixels. The first, more intuitive method is called true color mode. Photoshop uses versions of true color when the Image->Mode menu reads either RGB or CMYK. In this mode, the computer stores a unique color value for each pixel, so every pixel can look different from all the others. The disadvantage of true color is that it takes up a lot of memory, and manipulating large images can take a long time.

The other method uses a color palette as a sort of intermediate step. For instance, if you had an image that was just six red pixels followed by ten white pixels, the computer makes an arbitrary decision to assign an index number to all red pixels (let's say 0) and another number (let's say 1) to all white pixels. It then has a separate translation table (palette) which says "each pixel represented by a 0 should be red and each pixel represented by a 1 should be white". This mode is called Indexed Color in Photoshop.

The advantage of using a color palette is that if the image is uncomplicated (like the example above), it saves a lot of memory compared to using true color mode. For this example, a true color version might take 32 bytes, whereas an indexed color version would be only 6. The disadvantage is that it can be difficult to produce a good representation of a complicated, real world image using just a limited number of colors.

Using the palette from the example above, what if you wanted to have a row of pixels which was pink instead of white? One way would be to add another entry to the table which says "map all 2's to pink". But could you do it without adding another entry to the table, that is, using only the red and white colors already present?

What if you were to alternate between red and white pixels? When viewed from a distance, that might look a little like pink.

In fact, that is similar to what Photoshop does when you turn an RGB image into a paletted image by changing its mode to Indexed Color. If there are not enough palette entries to adequately represent all of the colors in the original image, it approximates some of the colors by using dot patterns which, when viewed all at once, look a lot like the original. This is called dithering.

Of course, you will usually want to use more than just two colors in your images. In fact, the more you use, the more like the original a saved image will look. The cost for better appearance, though, is storage space. And the larger a file is, the longer it takes for a computer to download, which can be a very significant factor when considering people who browse your pages with a modem instead of a direct connection.

Here are various versions of an image, along with the corresponding file sizes. You can see how the size decreases along with the quality:

Top | Next Page