Understanding Bitmap and Vector Graphics

Did you ever play with a Lite-Brite as a child? If so, that may have been your first experience with creating bitmap graphics, albeit at very low resolution. Resolution refers to the number of dots of color, or pixels, that are squeezed into a display screen. With a Lite-Brite, the resolution is about 20 dots per square inch. On the other hand, the resolution on a typical high-resolution desktop monitor is 1024 by 768. That's 768 lines of dots, with 1024 dots in each line. Obviously, the resolution on a computer screen is much greater than that of the colored pegs on a Lite-Brite board; however, the concept is much the same. Individual dots of color are arranged on a grid to form an image. On a computer screen, the image is rendered for display as an array of pixels.

There are two main phases in the life of a digital image: how it is displayed and how it is stored. Both vector and bitmap graphics are displayed in the same way on the monitor with the resulting physical screen image rendered pixel by pixel. The difference between "bitmap" and "vector" refers to how the data describing the image is stored. In a bitmap format, the data is saved as a grid of dots, whereas a vector format saves the data as patches of color defined by geometrical formulas.

Each format has its strengths and weaknesses. Bitmap graphics format the information needed to display an image pixel by pixel. As a result, the files can take up a lot of space, but they don't require much processing before output to the monitor's screen. Vector graphics files, on the other hand, are considerably smaller, but can be processing intensive because they have to be converted from a math formula into the grid of colored dots displayed on the screen.

To better understand the difference between bitmaps and vectors, consider an example. Figure 9.1 shows a blue square that is 30 pixels by 30 pixels. Saving that image as a bitmap would require data for each one of the 900 (30x30) pixels that make up the blue square.

Figure 9.1. Diagram of the pixels in a 30x30 square.

On the other hand, vector graphics use lines and curves to describe the areas on the screen where particular colors should be. The only data you need to save for a square is its size and position in the document (as x and y coordinates) and the function that describes it as a square. The graphics rendering program can evaluate the function describing that square and fill in the appropriate pixels. More complex shapes can be described by more complex functions.

In Figure 9.2, the dark blue dots represent how many points of data are required to save the same blue square in bitmap format and in vector format. As you can see, for simple shapes, vector graphics require less memory, so they are ideal where file size is an issue, as in when you have limited disk space or file transfer speed limitations.

Figure 9.2. Bitmap graphics require more information to describe a simple shape than vector graphics require to describe the same shape.

However, as the graphics get more complex, vector formats can take up even more memory than a bitmap version of the same image. More complex vector graphics require more anchor (or key) points to define areas of color (see Figure 9.3), and the more anchor points used to describe a shape, the larger its file size becomes. One of the benefits of the vector graphics file format is that it's a description of a shape rather than a list of all the pixels that fit into that shape; therefore, it takes up less file space. If you add more anchor points to your description of the square, not only does it increase the number of points saved, but it also increases the number of times a formula is used to draw the shape.

Figure 9.3. A simple vector shape uses fewer key points than a complex vector shape.

Why care about file size? The bigger the file, the longer it takes for the end user to download it. Even though Internet download speeds continue to increase, remember that Flash is also used on mobile devices with smaller memory capacity and slower processing speeds than desktop and laptop computers.

In addition to file size, vector graphics have the advantage of scaling well. Bitmaps do not. Bitmapped data describes the image as fixed to a grid of a particular size. In vector graphics, the key anchor points are relative, so the functions can accommodate scaling without losing image clarity. Figure 9.4 shows an enlarged bitmap and an enlarged vector graphic.

Figure 9.4. A bitmap image doesn't scale well, but a vector image enlarges without losing clarity.