What is the Difference Between Vector and Bitmap Images?

There are several differences between vector and bitmap images, but the most important usually concern resolution, shape and movement, and photo-realism, which is the clarity with which photos and other graphics appear on a computer screen. Software engineers and computer coders use both sorts of images fairly regularly, and they each have important purposes. Bitmaps are often considered more “old fashioned,” in part because they were the original building blocks of digital imagery and Internet graphics. Though vector images do a better job at some tasks, there is still an important role for bitmaps. In general, vectors are better suited for moving images since they aren’t restricted to a rectangular shape field the way bitmaps are, and they also can have moving parts, while bitmaps tend to be static. At the same time, though, bitmaps are often considered superior for presenting photos and other graphic images on the screen. Most computer engineers and digital graphic designers know and use both on a very regular basis.

The most elementary kind of image in any discussion of computer design is the bitmap image, which sounds like something from the early days of computing — a “map of bits,” and to some extend this definition holds. A bitmap image is quite literally a collection of squares that, taken together, make up a recognizable picture. The squares might be of different colors, but they are all the same size.

The other half of the equation is the vector image. This kind of image is much more sophisticated because it has moving parts and components that can adjust to user commands. Each graphic of this type is made up of a handful of smaller pieces, just like the bitmap, except that the vector image's parts are scalable. This means that designers can change the resolution of a vector image in both directions, making a “high-res” image lower or, conversely, making a “low-res” image higher.

Resolution is one of the most important differences, and can be described basically as how many dots per inch (or per cm) an image has. The higher the concentration of dots, the sharper and the clearer the image will look. Another way of looking at this is that high resolution pictures tend to have a better level of detail do those with lower resolutions.

Bitmap images often look really sharp in their original size, but the minute people try to expand or enlarge them they begin to look more like a collection of colored squares than a recognizable image. Reductions can also pose problems, since in most cases shrinking things down means that some blocks much actually be eliminated; this can lower the overall sharpness. Vector images don’t usually have these problems since their “building blocks” typically grow and expand as the picture does, at least to an extent.

Another important distinction between vector and bitmap relates to shape relativity. Vector images are not restricted to a rectangular shape, but bitmaps are. A designer who places a vector image on top of another image won't cover up any of the detail of whatever’s on the bottom. This won’t happen where a bitmap is concerned, though, because bitmaps are entirely made up of square pixels. Even the background of a bitmap is pixilated, though this isn’t usually noticeable. Vectors can also contain curved shapes like lines or polygons, whereas bitmaps present as squares. This impacts things like detail and flexibility.

Another key difference comes in terms of imbedded graphics and photo images, which is perhaps most commonly discussed in the context of web design. In most cases, the most commonly used graphics file formats are actually bitmap images — GIFs, JPGs, PICTs, and TIFFs are all good examples. In the web page context, vector images lack the consistency of bitmap images in terms of photo-realism. When trying to decide between image types for digital photos or photo-like images on a web page, the better choice for a more photo-realistic image is almost always the bitmap.

Vector images are commonly converted to bitmap format for use in web design. One of the most important exceptions to this rule applies to pictures that are attached to or imbedded in documents that are in portable document format (PDF). Most PDF files are actually made of vector images, and many of these will maintain their integrity and resolution when unconverted and used online.