Color Palettes, Bit Depth,
and Dithering Web graphics must both load quickly and look good. You want the image you post to the Internet to look just like the one on your screen, but you also want it to be small enough so that the viewer will wait for it to load. In order for our images to load quickly, we need to minimize (compress) their file size as much as possible without overly compromising its visual quality. Image formats are frequently referred to by the extension that is added to the file when it is saved in that format, e.g., GIF, PNG, JPG, BMP, TIF, etc. You can achieve optimum image compression by first understanding the similarities and differences of popular image types and formats. Raster images -- those created with digital cameras, or scanned from photographs, or created with paint programs -- are known as bitmap images. Bitmap images are either indexed images or RGB images, depending upon their bit depth (the number of colors used to display them).
Color depth
As you can see from the example shown below, the bit-depth greatly effects how an image looks.
Figure A: One image scanned four different ways. So the higher the bit-depth of an image, the better the color. But this additional color comes at a price—file size.
Indexed Images and Color PalettesIndexed images have only an 8-bit color depth. They are composed from a color palette that contains a maximum of only 256 colors. Grayscale images are a 8-bit files that have 256 increments between black and white. The first way that we can minimize the file size of indexed images is by cropping them. The second way is by resizing them to the dimensions at which we will want to display them in our web page. It makes no sense to make visitors to your web site wait while a 800x600 image downloads if you only plan to display it at 400x300, so always use a paint program, such as Adobe Photoshop or Microsoft Photo Editor, to resize your images before inserting them into your web pages. The third way that we can minimize the file size of indexed images is by reducing the number of colors in their palette from the maximum number of 256 colors, leaving in only enough colors to accurately display the images without detracting from their quality. GIF and PNG files are the two most common indexed image formats. When you save or export an indexed file, you can often specify the image’s color depth. Photoshop allows you to specify an exact number of colors or to choose from standard GIF compression increments of 256, 128, 64, 32, 16, 8, 4, or 2 colors. The table below shows what effects color reduction has on image quality and file size.
With only a 256-color palette to work with, indexed images seldom look as realistic as RGB images. For example, compare the quality of the orignal JPEG image in the top left cell of the table above to the 256-color GIF image in the top right cell. This is why indexed images are not true color. For palette-based indexed formats, such as GIF and PNG, the lower the bit depth, the smaller the file, as shown in the table above. However, lossy, full color RGB formats like JPEG, do not benefit from bit depth reduction because their file size is primarily related to quality. RGB Image Compression RGB images are derived from the 3 primary colors of red, green and blue. The RGB format, also known as true color, uses a 24-bit palette. Hence, RGB images are 24-bit images and can contain up to 16.7 million colors. A full-screen 640x480 24-bit color image requires 900K of disk space, enough to discourage even the most bandwidth-enabled Web surfer. As with indexed images, we can minimize the file size of RGB images by cropping them and by resizing them to the dimensions at which we will display them in our web pages. But unlike indexed images, RGB file sizes can't be lowered by removing colors from their palettes. RGB images can only be compressed through removing some of the image data. That's why RGB formats like JPEG are called lossy compression formats. Such lossy compression reduces file size at the expense of the quality of the image. Hence, the art of image compression is finding the right balance between file size and image quality. A Word About DitheringDithering is the process of making an 8-bit image with a 256-color palette simulate a 24-bit image with a full-color palette. For example, dithering is required to display a full-color image on older computers that have only a 256-color graphics card because those computers must simulate colors they can't actually display. Dithering has two drawbacks, however. First, although at a distance the human eye merges dithered patterns into another color, up close the image appears speckled. Notice the speckled leaves in the dithered butterfly images in the table above. Second, dithering slightly increases the images' file size. |
||||||||||||||||||||||||||||||||||
