There are two basic types of compute-generated imagery - raster and vector images. Each type of image has its own unique benefits and limitations. This article will discuss these attributes and the most appropriate time to use each when creating images for use in a web site.

Raster Images
Raster images consist of a series of pixels and are often referred to as bitmaps. A "bit" is the simplest of digital elements and has two states - 1 or 0. In binary terms that is either on or off. This is also referred to as the bit depth. A purely black and white image has a bit depth of 1 (2 states or 2 to the first power). As advancements were made in computing technology color was introduce. This was accomplished by increasing the bit depth mathematically. Sixteen colors were initially introduced (4 states or 2 to the fourth power). Today it is possible to represent 16.8 million colors on most computer monitors (32 states or 2 to the 32nd power). The diagram on the right illustrates the development of bit depth and its relationship to color.

Bitmaps or raster images are created in a variety of ways and then manipulated in programs like Photoshop, Photopaint, and Fireworks. For instance, if you have a photograph that you want to put to use in a design you can scan it. As soon as you scan it, it becomes a raster image. When you scan an image it turns the image into a series of pixels (bits). The number of pixels per inch is its resolution. The pixels can be changed in size and quantity, but this can affect the quality. Let’s say that you have an image that is 2” x 3”. You import it into a design and need it to be bigger. Most programs will let you click on the image and then drag to make it larger. After making it bigger though you notice that it doesn't’t look as clean anymore. This is because when you enlarge a raster image in that manner, you are making the pixels that create the image bigger also, affecting the quality of the image.

Resizing a raster image can be a tricky procedure. If you are going smaller it is generally not a problem. This will actually make the pixels smaller causing the picture to look sharper. Making an image larger however will almost always distort the overall image quality. As you increase the size of the image you are creating more pixels of the same color therefore decreasing its clarity. In short - never scale up your images!

Vector Images
Vector images are created using a series of paths. These paths are generated using programmatic algorithms that connect points on the path to create shapes. They are different from raster images in several ways, yet the primary difference is a vector image can be resized without affecting the image's visual quality. For example, you take a vector image and increase its size, it will look exactly the same as its smaller version. Another advantage of vector images is they are almost always smaller than a raster image in file size, which means it requires less storage space. Only very complex vector images are larger in file size than a raster with the same dimensions.

Vector images are created in programs like Adobe Illustrator®, CorelDRAW®, Macromedia Freehand®, and Macromedia Flash®.