Bit depth refers to the color information stored in an image. The higher the bit depth of an image, the more colors it can store. The simplest image, a 1 bit image, can only show two colors, black and white. That is because the 1 bit can only store one of two values, 0 (white) and 1 (black). An 8 bit image can store 256 possible colors, while a 24 bit image can display over 16 million colors. As the bit depth increases, the file size of the image also increases because more color information has to be stored for each pixel in the image.
When you save (or export) an image as a GIF or a PNG, you can select the bit depth of the resulting file. With certain types of images that naturally have few colors such as logos or simple designs, you may be able to drastically reduce the size of the image file without degrading the quality of the image. With other images (especially those with gradients) reducing the number of colors in an image will severly degrade the image quality.
The examples below demonstrate the relationship between bit depth and image quality. We’ve taken a small detail of our favorite robot juggler illustration and exported it out at various color depths. The changes will be most obvious in the color gradations of the hat.
24-bit color: 224 = 16,777,216 colors, 45 KB
8-bit color: 28 = 256 colors, 17 KB
7-bit color: 27 = 128 colors, 13 KB
6-bit color: 26 = 64 colors, 10 KB
5-bit color: 25 = 32 colors, 8 KB
4-bit color: 24 = 16 colors, 6 KB
3-bit color: 23 = 8 colors, 5 KB
2-bit color: 22 = 4 colors, 4 KB
1-bit color: 21 = 2 colors, 3 KB
Sample graphic from FCIT’s collection of robot illustrations on the TIM website.
