|
|
|
| Reference Series |
Table of Contents For This Issue
|
|
| |
| How Computers Work, Part I | |
|
August 2001• Vol.5 Issue 3 Page(s) 116-119 in print issue | |
Picking Apart Bit-Mapped Graphics We Take You Down To The Pixels & Bits |
One way to draw a large picture is to break it into smaller pieces. To do this, you place a large grid over the picture you want to reproduce, and then draw the portion of the image inside each of the small squares. Once you combine your drawings in each of
the small squares, you’ve created the overall picture. This
technique is similar to
bit mapping, a common process used to create graphics in computing. Bit By Bit.
Every bit-mapped image is composed of a collection of small squares or rectangles known as
pixels (picture elements). Each pixel has one color and is stored in a computer’s memory. Individually, the pixels don’t have much usefulness, but they form an image when they are combined. You can think of a bit-mapped graphic, which is sometimes called a raster graphic, as the ceramic tile in your kitchen or bathroom. The tile is made up of hundreds of individual squares, each containing an individual color. Taken one at a time, the squares don’t seem to yield any pattern or picture. But when the tile is viewed as a whole, the pattern of the tile becomes clear. Each of the individual squares contributes its individual color to the pattern. The individual pixels are nearly always square in shape, but they are sometimes slightly stretched either vertically or horizontally to create a rectangle. In bit-map terminology, however, pixels are almost always referred to as squares. Parts Of A Pixel.
The values in the bit-mapped file specify both the actual color of each pixel and the color depth of each pixel.
Color depth, also called bit depth, determines the number of colors each pixel could have, ranging from two colors to more than 16.7 million. All pixels within an individual bit-mapped graphic will have the same color depth, no matter what actual color they have. Here
are some of the more common color depths used in bit-mapped files.1 bit. Pixels that have two possible color values, usually black or white, have 1-bit color depth. A bit-mapped graphic consisting only of text might contain 1-bit pixels. So, while black and white are the typical color values for a 1-bit pixel, the two color values of the pixel could be for any two colors, as long as the colors were consistent throughout the graphic. And specifying the value of each pixel requires 1 bit of storage space, the smallest unit of information a computer uses. 8 bit. Pixels with 256 possible color values have an 8-bit color depth, which is often referred to as grayscale color. Value zero is usually set to black, and value 255 is usually set to white. Any values in between are a mixture of black and white, yielding a shade of gray. Even though black and white are the typical base colors for an 8-bit pixel, any two-base colors could be used for values zero and 255, and a mixture of the two colors would yield the in-between values. Specifying the value of each pixel requires 8 bits of storage space, or 1 byte. (Each bit can hold two color values, and two to the eighth power yields 256 colors.) 24 bit. Most bit-mapped graphics consist of 24-bit color depth, yielding more than 16.7 million possible colors. Computer monitors display colors as a mixture of RGB (red-green-blue) values. In a 24-bit pixel, red, green, and blue each have their own values from 0 to 255, with 255 being full intensity and 0 being no intensity. Any number in between is a percentage intensity of red or green or blue for the color value. For example, a value of 255 for red yields a pixel with full (100%) red intensity. A value of 0 for red yields a pixel with no (0%) red intensity. Values in between yield varying intensity measurements of red. Values closer to 255 are darker red, and values closer to 0 are lighter red. Each pixel also has values for green and blue, and the mixture of values yields the color for the pixel. You can think of the color values as percentages of intensity. For the red value, 128 yields a 50% red intensity, a color about half as dark as the full intensity red. To compute the percentage of intensity, divide the color value by 256 and then multiply by 100. For example, a color value of 32 yields a 12.5% intensity (32 ÷ 256 = .125 x 100 = 12.5%). Here are some more examples: •Black is listed as (0, 0, 0) in RGB. (intensity: 0%, 0%, 0%) •White is listed as (255, 255, 255) in RGB. (intensity: 100%, 100%, 100%) •Red, at full intensity, is (255, 0, 0). (intensity: 100%, 0%, 0%) •Green, at full intensity, is (0, 255, 0). (intensity: 0%, 100%, 0%) When listed in printed material, the color values are in base-10 (numbers 0 to 9) form, but a computer works with them in binary form (base-2; as 0s and 1s). Each color value requires eight placeholders for 0s and 1s to yield 256 possible results. Each of the three color values requires 8 bits of storage space. Specifying the color value of each pixel requires 24 bits of storage space, or 3 bytes. (Each bit can hold two color values, and two to the 24th power yields 16,777,216 colors.) Because using 3 bytes of storage space for each pixel could yield some extremely large bit-mapped files, such graphics often use palettes to specify the color values. A palette is like a code, where one palette value is used to represent each RGB value used in the bit-mapped file. By using palettes, each pixel requires only 1 byte of storage space. (We will discuss palettes in detail later.) The File.
Although graphics-viewing programs can organize bit-mapped files in any of several methods, most follow a basic pattern, starting with the file header, moving to the color palette, and then on to the bit map’s data.
File header. A file header in a bit-mapped file contains information about the overall image, including its height and width and the color depth for the pixels. A graphics-viewing program uses the file header to determine whether it can read the data in the file. The file header tells the graphics-viewing program what type of file it is. (You can see the type of file through the file extension. Bit-mapped file extensions are discussed in the “File Formats” sidebar.) All bit-mapped files contain a header, unlike some other graphics file formats.
When you open the file in a text editor, you’ll probably see string after string of unreadable characters. You may, however, see a few letters at the beginning of the file that will provide a clue to the format with which you’re working. For instance, the first two characters in a BMP (bit map) file will usually be BM. A GIF (Graphics Interchange Format) file nearly always starts with GIF characters. For JPEG (Joint Photographic Experts Group) files, the character string JFIF near the top of the file signifies this file format. Color palette. You can think of a color palette like a key used on navigational maps to mark certain areas. By using a map key, each section of the map doesn’t need specific labels, thereby saving space. Color palettes in bit-mapped files are also used to save space because they limit the number of bits needed to describe each pixel. Each pixel in the file uses its palette number rather than using each RGB value number. The palette portion of the file is the key to breaking the code because each palette number is listed with the color value numbers needed to create the color. For example, to create the color white in a 24-bit pixel, you would need to list the color value number 255 for red, 255 for green, and 255 for blue. By using a color palette, though, you could assign the RGB value number for white (255,255,255) as the palette number 1, which saves storage space. (Some bit-mapped files don’t contain palettes, especially files that are fairly small or that only use a few colors.) Bit map’s data. The bit map’s data contains the information used to create each pixel, specifying either its RGB value or its color palette value. The traditional method for listing bit-map data is simply listing each pixel, one after the other in the file. Working With Bit Maps.
If you’ve worked at all with bit-mapped files, you probably already know this: Not every graphics-viewing program can decipher and open every type of bit-mapped file or every type of graphics file. Each graphics-viewing program can read only certain types
of bit-mapped files because each type of file stores the graphics data in a slightly different method.
Despite the technical differences, most graphics-viewing programs work with bit-mapped files in a similar manner. They first scan the header, looking for the definitions of the various fields in the file. The header and palette areas tell the graphics-viewing program the type of bit-mapped file with which it is dealing and define the size of the bit-mapped image and the colors involved. Once the boundaries are established and all the definitions are read, the graphics-viewing program moves on to the bit map’s data. No matter what type of bit-mapped file you have, the bit map’s data is read in almost exactly the same manner—1 byte at a time, from left to right. As the graphics-viewing program reads and deciphers each pixel of the bit map’s data area in the file, it sends the color, size, and location of the pixel to the computer’s video card. The video card then translates the data into a signal that it sends to the monitor, which displays the pixel on your computer screen. Even though the data translation occurs fairly quickly, extremely large bit-mapped files, which may contain thousands of pixels, could take a long time to display, depending on the speed of your computer’s components. While working on the Internet, you’ll often notice problems with speed regarding bit-mapped graphics. Why are the bit-mapped files so large? Each individual pixel in the graphic must be listed in the file, and each pixel’s file data can occupy several bits, especially if the pixels use 24-bit color and no color palette. Compression.
Because bit-mapped graphics files occupy a large amount of storage space, creators of the files usually use any or all of the following three methods to shrink the size of the files: palettes, less color depth, and file compression. Palettes are common because, as we discussed earlier, they save a large amount of storage space, especially for files with a large number of colors, with minimal quality sacrifices. Bit-map creators will only sacrifice color depth in circumstances when perfect graphics aren’t required. Sometimes, creators will also attempt to preserve storage space by using fewer pixels in a large graphic, although this causes curved lines to look like stacked blocks. Even though this practice was common with older software programs made for computers that didn’t have much storage space available, it’s fairly rare today. Most of the time, bit-mapped files are compressed to save storage space, especially with GIF and JPEG files used on the Internet. And sometimes the file information itself is altered to save space. For instance, in a GIF file, a horizontal line consisting entirely of a line of hundreds of white pixels might be compressed with a single code that signifies them as a line of identical pixels rather than listing them individually in the bit-mapped file. As a result, instead of using hundreds of codes that occupy hundreds of bytes of storage space, the file uses only one code. No matter what method is used, complex bit-mapped graphics containing numerous different colors of pixels typically don’t compress well, which is one of the major drawbacks of bit maps. Bit Maps vs. Vectors.
Another drawback for bit-mapped files is the problems encountered when trying to resize, or
scale them. Bit maps usually lose some of their
definition when scaled. That’s why a different type of graphic, known as a vector
graphic, is often used in instances where scaling
is required.Graphics programs use two processes to scale bit-mapped graphics. During the first process, each individual pixel must stretch or constrict to yield the new size. The number of pixels in the bit-mapped graphic doesn’t change. This causes the bit-mapped graphic to have ragged edges, known as jaggies. This loss of definition is known as aliasing. In the second method, which is used less often, graphics programs remove pixels from the bit map to scale it down. This process, called decimation, usually yields poor-quality images. Vector graphics, however, maintain their look when resized because vector files store the information needed to re-create the image rather than storing the information about each pixel. A bit-mapped file contains data that spells out the position and color of each pixel in the graphic; a vector file contains mathematical descriptions of each portion of the graphic, which the graphics program uses to re-create the graphic. Because bit-mapped and vector graphics are created by different methods, different programming is required to create and display them. Vector graphics are normally used with spreadsheet programs or with CAD (computer-aided design) programs. Bit-mapped graphics work well for complex images, such as photographs; vector graphics work well for images that you need to scale, such as fonts. Bit maps remain more popular because the pixel design works well in a computing environment, whether you’re printing an image on an inkjet printer or displaying it on a monitor screen. Both devices create images using a series of dots, similar to the series of pixels used to create bit-mapped graphics. Vector graphics, on the other hand, create images using lines and other objects rather than dots or pixels. For the most part, bit maps are the format of choice when creating graphics. No matter what type of bit map you use, a collection of pixels provides the highest quality image for common uses. Bit maps are easy to print, display, and, best of all, they’re easy to use in several applications to create images, whether it’s on the Internet or on your bathroom tile.  by Kyle Schurman View the graphics that accompany this article. (NOTE: These pages are PDF (Portable Document Format) files. You will need Adobe Acrobat Reader to view these pages. Download Adobe Acrobat Reader)
|
