Articles: Vector and Raster

Vector and Raster by Ginger Rosenkrans

Above: raster image.

There are two kinds of computer graphics: raster (composed of pixels) and vector (composed of paths).

Raster images are usually called bitmap images.

A bitmap image uses a grid of individual pixels where each pixel can be a different color or shade. Bitmaps are composed of pixels.

Vector graphics use mathematical relationships between points and the paths connecting them to describe an image. Vector graphics are composed of paths.

Vector

Vector: line art. Within vector application, you can make a vector graphic larger or smaller without losing quality

Vector is composed of Bezier curves, which define shapes or objects

Vector-based illustration software (e.g., Photoshop’s pen tool and type tool, Illustrator, Freehand, Corel Draw) are sometimes referred to as object-oriented software.

Vector software is good for creation of logos, charts, maps, cartoons, highly detailed technical illustrations, and images that require hard-edges, smooth blends, dazzling colors.

For a vector graphic on the Web, it must first be converted by saving or exporting it to a Web-compatible format, like JPEG or GIF

Raster

Raster graphics are bitmapped files

Include TIFs, BMPs. GIFs, and JPEGs

You can make raster graphics smaller without losing too much quality, but when you make them larger, you force each bit to stretch out, resulting in blurry graphics

Raster uses bitmaps

Bitmaps: Pixels

Pixels are the basic physical unit of a digital image. Pixels, or picture elements, are tiny dots that make up the characters or images on the computer screen. They are continuous tone images converted into a series of small squares/dots or picture elements. Each pixel has a specific intensity level and color. They are units of measurement for computers. The most common design for screen size of a Web page is 640 pixels by 480 pixels. The average screen resolution is 72 pixels per inch (ppi) compared to the higher resolution of 1,200 to 3,000 ppi or dpi (dots per inch) for printed materials. Pixel-based graphics are also known as bitmapped images.

Pixels: individual tiles of colored light that are set up on a grid and create an image

An advantage to using a page-description language, such as PostScript, isevident when you scale up an image. The larger you display a bitmap, the more jagged it appears. A vector image remains smooth at any size. That is why PostScript and TrueType® fonts always appear smooth -- they are vector-based.

The jagged appearance of bitmap images can be partially overcome with the use of "anti-aliasing." Anti-aliasing is the application of subtle transitions in the pixels along the edges of images to minimize the jagged effect . A scalable vector image will always appear smooth.

Bitmap images require higher resolutions and anti-aliasing for a smooth appearance. Vector-based graphics are mathematically described and appear smooth at any size or resolution.

Bitmaps are best used for photographs and images with subtle shading. Graphics best suited for the vector format are page layout, type, line art, or illustrations.

Use the vector format for your type, line art, and illustrations and use bitmaps for photos or images with complex or non-uniform shading.