RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Reference Guide: Graphics Technical Options and Decisions : Page 7

The decisions you make about file format, compression, palette, resolution, and bit depth effect both quality and download speeds

Bit Depth, Color Depth
Bit depth is the number of bits in each pixel. Color depth is the maximum number of colors in an image and is based on the bit depth of the image and of the displaying monitor.

A bit is the smallest unit of information a computer understands. It has two possible states: it can be on or it can be off. All computer information is handled in this way.

A computer monitor is made of pixels (short for "picture element"). Depending on the monitor and the computer system, each pixel will have a specific number of bits assigned to it. These bits effect how the pixel will appear.

A black-and-white monitor has one bit per pixel. This bit has two possible states: it can be on or off. When it is on, the pixel looks white. When it is off, it looks black. Each pixel has a bit depth of one and a color depth of two. One bit produces two possible colors.

If there are 2-bits per pixel, the number of colors each pixel can display rises to four. Two-bits per pixel means each pixel has 2 bits and each bit has two states: on and off. In mathematical terms, 2 bits x 2 states = 4 colors.

This relationship continues as the number of bits increases:

  • A 4-bit pixel can display 2x2x2x2 or 16 colors.
  • A basic color monitor has 8-bit pixels and is capable of displaying 256 colors.
  • These days, most color monitors have 16- or 24-bit capabilities, and display thousands or millions of colors.

Here's a breakdown of bit depth and color depth. Color depth is sometimes called color resolution.

Bit Depth Color Resolution Calculation
1 bit 2 colors 21 (2)
2 bit 4 colors 22 (2x2)
3 bit 8 colors 23 (2x2x2)
4 bit 16 colors 24 (2x2x2x2)
5 bit 32 colors 25 (2x2x2x2x2)
6 bit 64 colors 26 (2x2x2x2x2x2)
7 bit 128 colors 27 (2x2x2x2x2x2x2)
8 bits 256 colors 28 (2x2x2x2x2x2x2x2)
16 bits 65,536 colors 216
24 bits 16,777,215 colors 224

In the same way, bit depth and color depth describe the number of possible colors in a digital image. The number of bits each pixel has is the image's bit depth, and the number of possible colors increases as bit depth increases.

For example: An 8-bit image can have up to 256 colors (8 bits/pixel x 2 states/bit = 256 possible color combinations). Of course, file size also increases a bit depth increases, so you'll always be trying to find the tradeoff between quality and size.

Important reminder! No matter what the bit depth of your image, it can only be displayed at the highest number of colors the monitor supports, regardless of the number of colors in the original image. That means someone uses an 8-bit monitor will see only 256 colors in your image, even if you saved it at higher value.

By defintion, a GIF image cannot have more than 256 colors or an 8-bit depth.

Here is the same image saved in four different color-resolution/bit-depth settings. Remember, if your monitor or display card is set to only display 8- or 16-bit color depth, you won't see a difference in the higher resolution versions of the image in this example. What you see is always limited by your monitor.)

one bit image
2 colors 16 colors 256 colors 16,777,216 colors
1 bit 4 bit 8 bit 24 bits
1,329 bytes 4,407 bytes 8,822 bytes 4,321 bytes

Notes: In a black-and-white image, such as the first GIF above, each pixel is either on (black) or off (white). Thus the image file of the above GIF has a bit depth of 1 bit and a color resolution of 2 colors.

The second GIF image above contains a total of 16 colors, and uses 4 bits to store each pixel's color data. (Remember: 4 bits can store 16 values = 24 (2x2x2x2).) This obviously results in a much larger image file than that of the black-and-white image, 4,407 bytes vs. 1,329 bytes.

The third GIF image uses the maximum GIF color resolution and bit depth: 256 colors and 8 bits. Its file size is proportionally larger than that of the previous two lower-resolution GIFs. The 256 colors go surprisingly far in rendering image color gradation, particularly with an adaptive palette. However, to render the subtler gradations and hues in more complex images, you will need to save these images at a higher bit depth: 24-bit -- a color resolution of millions of colors (16,777,216 colors to be precise). These will have to be JPEGs, since GIFs are limited to 256 colors.

To create a depth greater than 256 colors, we must use a JPEG format. The fourth image, 24-bit JPEG above has a file size smaller than that of the 8-bit GIF. This is due to GIF/JPEG compression differences.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date