Digital Images: Under the Hood

As mentioned earlier, digital images are made of thousands of little squares called pixels. Each pixel can display one color at a time; this color information is stored in one of a number of different ways.

In general, there are two parts to a modern digital image: 1) the picture itself, and 2) the palette of colors available to the picture.

In the olden days of computing, there was only 1-bit color, which consisted of black and white (or black and gold, or black and green, depending on the color of the monitor). Each pixel could be either black OR white, off (black) or on (white) (no grays). A 1-bit palette (as such), therefore, has only two colors. The picture was made up of these black and white pixels and was usually rather primitive looking.

Example:

Elizabeth 1-Bit Color

As computing technology improved, 8-bit color (and the color palette system) was eventually developed. 8-bit color gave a color palette with 256 possible color choices; each pixel of a picture, therefore, used one of those 256 possible colors. Each pixel of the image would be linked, or "indexed", to one of the 256 colors on the palette. This color palette would be stored in the digital image file along with the pixel-based picture information.

Example:

Elizabeth Indexed Color

With this "indexed" color, it is possible to save a picture with an 8-bit (256 colors), a 7-bit (128 colors), a 6-bit (64 colors), a 5-bit (32 colors), a 4-bit (16 colors), a 3-bit (8 colors), a 2-bit (4 colors), or a 1-bit (2 colors) color palette. The lower the bit-depth of color palette you use, the smaller the file size for the final picture will be. Of course, the more colors you have in your color palette, the greater the fidelity your picture will have to the original.

Grayscale images use an 8-bit palette of 256 possible shades of gray to color their pictures; again, each pixel in the image is indexed to one of these 256 shades of gray. Believe it or not, 256 shades of gray make for a very finely-detailed rendering of a black-and-white photograph.

Example:

Elizabeth Grayscale

Of course, color photographs can use a lot more than 256 colors. To fully represent such pictures, 24-bit color was developed.

24-bit color, or "millions of colors", takes grayscale indexing a step further. 24-bit color uses the RGB (red-green-blue) color space, which is the basis of the modern computer display. If you take a photograph and make three grayscale renderings of it, one depicting the 256 possible shades of red, one depicting the 256 possible shades of green, and one depicting the 256 possible shades of blue, then combine those three renderings together, you get a picture with very accurate color reproduction utilizing millions of colors. Each pixel in the picture will be one of 256 possible shades of red, 256 possible shades of green, and 256 possible shades of blue.

24-bit color, however, makes digital images with very large file sizes since there is a lot of color information to store for every pixel. Even 8-bit, or 256 color, images can have fairly large file sizes. Large file sizes are not necessarily a problem if one is simply storing digital images on one's hard drive, or pulling digital images from a Photo CD. File transfer speeds over the Internet, however, are often quite slow, and file size becomes a critical issue when creating images for display via the Web. As a consequence, file compression schemes for digital images were developed to deal with this problem. There are two digital image compression schemes which are universally adopted on the Internet: GIF and JPEG.

Before we discuss GIF and JPEG compression schemes, however, we should talk about pixel resolution of an image. The density of pixels in an image can also affect image quality, just as the depth of colors in an image can affect image quality. The more pixels per inch you use, the finer the detail and the greater the resolution of the image becomes. For print purposes, pixel resolutions can vary anywhere from 300 to 1200 pixels per inch; again, the more pixels per inch you have, the better looking the image will be when printed out. More pixels per inch mean smoother lines, finer details, and higher image quality; fewer pixels per inch mean more jagged lines, less detail, and lower image quality. The more pixels per inch you have, however, the greater the final file size for your image. At 1200 pixels per inch in 24-bit color, a 1 inch by 1 inch image will take up 4.32MB of storage space; a 5 inch by 7 inch image (an ordinary photographic print size) would then take up over 151MB of storage space! A modem connection to the Internet can only transfer 3-4KB of data per second, which means that a 151MB image would take somewhere between 10.5 and 14 hours to download, an unreasonable amount of time for a single photograph!

The universal resolution for web-delivered graphics, however, is 72 pixels per inch, the same pixel resolution that was once standard for computer monitors. Uncompressed 24-bit color images at 72 pixels per inch, however, are still fairly sizeable: a 5 inch by 7 inch photograph at that resolution would still be over 545KB of data uncompressed, requiring several minutes to download over a modem connection. To make graphics-rich websites a practical reality, then, some sort of image compression is required to make the pictures smaller in file size; that's why GIF and JPEG compression schemes are so important on the Internet.

Main Menu