One of the most common misunderstandings among both clients, and unfortunately many designers, is the difference between Vector and Bitmap (also known as Raster) graphics.

This post should serve as a reference to both client and designer; an attempt to articulate, in an understandable manner, the primary differences between these two graphic types and explore the areas where usage of each is most appropriate. A graphic design background is not required for understanding this post; technical terminology is defined; however, an elementary understanding of computers and graphics is assumed.

Bitmap Graphics

Bitmap graphics are the most common graphic format in use on the web and, indeed, on the computer. With the exception of Flash and the still relatively unsupported .svg (scalable vector graphic) format, every single graphic seen on the web is a Bitmap.

Bitmap graphics are composed of pixels, each of which contains specific color information. A pixel is minutely small; a single image may be composed of hundreds of thousands of individual pixels. Much like cells revealed from a piece of tissue when seen under a microscope, these pixels are only clearly and individually visible when the image is magnified (fig 1).

A graphic composed entirely of pixels each with its own color properties is ideal for photographic images where there are thousands, even millions of different colors. Complex fills, shading and gradient effects can easily be rendered. The Bitmap image offers as much freedom as an empty canvas.

Vector Graphics

If we consider Bitmap graphics as being stored in a literal fashion, then Vector Graphics, stored representatively, are their opposites.

Rather than being composed of pixels, Vector graphics consist of points, lines, and curves which, when combined, can form complex objects (fig 2). These objects can be filled with solid colors, gradients, and even patterns.

Vector graphics are mathematical creations. For this reason, the programs that are used to create them save instructions on how the image should be drawn, rather than how it looks. This is the key difference between the two types of graphics. Because the computer has a description of how the image should look, it can be redrawn at any size, in any position, without losing any quality. A vector graphic re-sized to 5 times its original dimensions is simply reproduced, exactly, at the new size. It can also be freely manipulated without losing coherence, like a rubber band that can be stretched an infinite number of ways.

The price of this scaling flexibility is that Vector images must remain relatively simple in comparison to Bitmap images. It is impossible to render a photographic image in a vector editor; as a result, illustrative vector graphics have a distinct look and feel, even when produced in detail.

However, Vector graphics are ideal for producing artwork which frequently needs to be presented in different sizes or colors. Logos especially fall into this category. A logo produced with a vector application can be blown up to fit on a billboard or scaled down to adorn a letterhead with no loss of quality.