Web Design: Understanding Bitmaps and Vector Graphics
All the graphics you encounter on the web are either bitmap or vector graphics. The basic difference between the two is how they’re drawn on your screen. This simple detail affects everything from image resolution to file size and format.
Bitmaps: A fabric of pixels
When explaining bitmap images, think of the Lite Brite. Those of you who were pampered enough as children to play with this toy remember that you plugged little colored pegs into a grid and then flipped the switch to light them up.
Bitmaps work pretty much the same way. In simplistic terms, a bitmap graphic is a grid filled with tiny colored pixels. To draw a bitmap graphic onscreen, the computer lays out a grid, say 100 by 100 pixels, and then maps a color to each individual pixel. That’s 10,000 pixels to draw! Remember, a pixel is 1/72 inch across. Therefore, if an image has a resolution of 72 dpi and is 100 pixels wide, it appears just over an inch wide on the computer screen. The following figure is typical of a bitmap.
Vector images on the Internet
If you don’t remember the Lite Brite, then surely you remember Connect the Dots. Vector graphics employ a similar strategy. A mathematical formula places points on the screen and then connects them with paths. For example, to draw a triangle-shaped vector graphic onscreen, the computer simply lays down three points, connects them, and then fills them with a color. In the second example, you can see a handful of points — some with handles coming off of them. These handles control the curve of the path between two points — known as a Bézier curve to those in the know. The following figure would work fine as a vector.
If you’re thinking that vectors can draw graphics onscreen far more efficiently than bitmaps, you’re right. Vector graphics have extremely small file sizes, making them ideal for online delivery. Both vector and bitmap graphics, however, have their pros and cons.
The vector-bitmap showdown
As a web designer, you should know a few things about the ups and downs of vectors and bitmaps before you push your first pixel:
Bitmaps are highly prevalent on the web. All JPEG, GIF, and PNG graphics that you encounter on the web are bitmaps. Ironically, many of these graphics began life as vectors before they were converted into bitmaps. Why design with vectors? Because drawing graphics and interesting effects with vectors is often faster and easier than creating the same effect with bitmap graphics. It’s also much easier to make changes to vectors because you just move a point and the line follows. And if you need to scale the graphic up or down, vector graphics can do so without losing image quality. To make changes to bitmaps, you often need to redraw parts of them.
Bitmaps can’t maintain quality if they are resized. Bitmap graphics have fixed resolutions. Bitmap graphics are laid out on a grid of pixels. Like half-inch-grade chicken wire, this grid is a fixed size. And like chicken wire, if you stretch the image, you end up with a contorted mess. While it’s possible to use HTML code to enter new heights and widths for an image, all this does is stretch and distort your image. Better to make your images the correct size in the first place.
Vector graphics can easily be resized. Vector graphics, on the other hand, are resolution-independent. Because they’re drawn according to a mathematical formula of placing points on the screen, the grid size (resolution) doesn’t matter. This means you can infinitely squish and stretch vector graphics up, down, and side to side without losing image quality: They are the Play-Doh® of the web. See the following two figures.It’s easy to change the colors, or change the shape of this vector-drawn image by moving its points without any loss of quality.If you stretch and squish a bitmap image, it begins to lose image quality and can look blurry.