Web Design: Reduce Image Size by Limiting Colors

Although a computer’s RGB system is capable of mixing over 16 million different colors, the monitor is not always capable of displaying all these colors. Also, an image that contains all these colors can end up being a larger file size than is practical for web delivery. This leads us to the discussion of image color bit depth, color palettes, and monitor displays, all of which are important to the art of designing websites.

A bit is a tiny segment of computer information. Without getting too technical, a lot of bits are needed to make colors appear in an image. The more colors that an image contains, the more bits of data it has — thus the greater its bit depth.

The web images you produce will ultimately have a bit depth associated with them, and different web file formats require different uses of bit depth. A computer uses 8 bits of data to show 256 colors. Each of the red, green, and blue primary colors has 256 levels. So does this mean that an 8-bit image is monotone, showing all 256 possible levels of red? The answer is no — an 8-bit image simply uses a limited palette of up to 256 colors. These colors are a subset of all 16,777,216 possible colors. The table shows color bit depth and the maximum number of colors that each can have in its palette.

Color Bit Depth

Bit Depth

The Math

Number of Colors in Palette

1 bit

21

2

2 bit

22

4

3 bit

23

8

4 bit

24

16

5 bit

25

32

6 bit

26

64

7 bit

27

128

8 bit

28

256

When you reduce the number of colors in your image to keep the file size small, you can choose any number of colors up to the maximum for the given bit depth. Typically, you’ll choose a set of colors that are best adapted to render the image. For example, you can choose a custom palette of just 200 colors. The image is still 8-bit, but because it uses only 200 colors in its palette, the file is smaller than it would be if you used the maximum number of colors (256) allowed for an 8-bit image.

Here’s how to use a graphics editor such as Adobe Fireworks to experiment with reducing an image’s color palette and compare the differences in quality, file size, and download times:

Launch Fireworks.

Choose File→Open from the menu bar.

Navigate to any photo image you have on your computer and open the file.

At the top of the document window, there are several icons. Click on the 4-Up icon to split the image’s view into four panels.

Fireworks allows you to compare different palette and file format settings side by side so you can compare quality and download speeds.

Click on the top-right quadrant to select it. Open the Optimize panel located in the Window menu.

It may already be open as a collection of panels to the right of the screen.

In the Optimize panel, select the GIF format, Adaptive palette, and the 256-color option (which is an 8-bit color palette).

Click on the lower-left quadrant and, in the Optimize panel, select the GIF format as well as the Adaptive palette, but this time select just 64 colors.

Notice the decline in image quality.

Click the lower-right quadrant and, in the Optimize panel, select the JPEG format and set the Quality to 60%.

In this exercise, the noticeable difference in quality from the original image (top-left quadrant) to the two GIF format quadrants shows what a limited number of colors can achieve. The grainy appearance is called dithering. As with pointillism, different colors from your limited color palette are placed near each other to simulate the effect of the missing color (it’s like visually mixing orange by placing yellow and red dots next to each other).

Note that the JPEG format does not use a reduced color palette. It simply imposes a compression scheme on a 24-bit image. Depending on the image, sometimes the JPEG format yields the best quality and the best download times, and sometimes the GIF format is best. This test in Fireworks is a good way to quickly compare different settings.