Raster vs Vector Graphics

Today we shall discuss about this as continuation of yesterday's post

Raster Graphics vs. Vector Graphics

There are two kinds of computer graphics - Raster (composed of pixels) and Vector (composed of paths). Raster images are more commonly 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.

The image to the left below is representative of a bitmap and the image to the right is representative of a vector graphic. They are shown at four times actual size to exaggerate the fact that the edges of a bitmap become jagged as it is scaled up:





Vector Graphic:

With Adobe® Systems' introduction of the PostScript® page-description language computers could display fonts and images using point-to-point math rather than by pixels alone. The advantage to using a page-description language such as PostScript becomes clear when you scale an image up. The larger you display a bitmap, the more jagged it appears, while 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 (below left). A scalable vector image will always appear smooth (below right):

Anti-Aliased Bitmap Image:



Smooth Vector Image:



Bitmap images require higher resolutions and anti-aliasing for a smooth appearance. Vector-based graphics on the other hand 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.

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


Regards
NikiJackson