Vector Versus Raster

What is the difference between vector graphics and raster images? This question is often asked by newbie illustrators, vector artists, graphic designers and web developers. In this article we explore the characteristics of bitmap and vector image file types, and when it’s appropriate to use each file format.

Computer graphics can be created as both raster as well as vector images. Raster or bitmap images are made up of pixels in a grid. Pixels are little dots of an individual color which come together to make up the images that you see on your screen. Each pixel is coded in a specific shade or hue. Individually these pixels are of no significance, but when combined together, they reveal a lot.

Raster graphics are best suited for non-line art images like scanned artwork, digital photographs or detailed graphics. These images can be best represented in raster format since they usually include fine chromatic gradations, complex compositions, and undefined lines and shapes. Since raster images are pixel based, they suffer from a problem called as “image degradation”. Just like photographic images, raster images too get jagged and rough when they are enlarged. When you look closely you can actually see the individual pixels that make up the image. Raster images can be scaled down easily, but the smaller versions often appear less soft than the original ones.

While maximizing the quality of a raster image you should remember that raster format is resolution specific, which means that these images are defined and displayed at one particular resolution. The resolution of raster images is measured in dots per inch or dpi; the higher the dpi, the better the resolution. The resolution of the image you get on any output device is not a function of the file’s own internal specifications, but the output capacity of the device itself. This means that high resolution images should be used only if the equipment is capable of displaying them at high resolution.

Raster files are considerably larger as compared to the vector files, and high resolution raster files are larger than the raster files with a lower resolution. Overall raster graphics are less economical than vector graphics since they are slower to display and print, less versatile and more hectic to work with. However some images like photographs are still best displayed in raster format. Common formats of raster images include JPG, GIF, TIFF, EPS, BMP, PCX, and PNG files. Although raster format has a few limitations it is still the Web standard, but within a few years vector graphics are likely to surpass raster graphics in terms of prevalence and popularity. "Bitmap or Raster Image"

Bitmap images (also known as raster images) are made up of pixels in a grid. Pixels are picture elements; tiny dots of individual color that make up what you see on your screen. All these tiny dots of color come together to form the images you see. Most computer monitors display approximately 70 to 100 pixels per inch--the actual number depends on your monitor and screen settings.

To illustrate this, let's take a look at a typical desktop icon such as the one shown in the image here. The icons on your desktop are typically 32 by 32 pixels. In other words, there are 32 dots of color going in each direction. When combined, these tiny dots form an image. The icon shown in the upper right corner of this example is a typical desktop icon at screen resolution. As you can see, when you enlarge the icon, as I have in this example, you can clearly see each individual square dot of color. Note the that white areas of the background are still individual pixels, even though they appear to be one solid color.

Bitmap images are resolution dependent. Resolution refers to the number of pixels in an image and is usually stated as dpi (dots per inch) or ppi (pixels per inch). Bitmap images are displayed on your computer screen at screen resolution: approximately 100 ppi. However, when printing bitmaps, your printer needs much more image data than a monitor. In order to render a bitmap image accurately, the typical desktop printer needs 150-300 ppi. If you've ever wondered why your 300 dpi scanned image appears so much larger on your monitor, this is why. For more in-depth information about resolution, scanning, and printing bitmap images, refer to my article Getting Started Scanning.

Because bitmaps are resolution dependent, it's difficult to increase or decrease their size without sacrificing a degree of image quality. When you reduce the size of a bitmap image through your software's resample or resize command, you must throw away pixels. When you increase the size of a bitmap image through your software's resample or resize command, the software has to create new pixels. When creating pixels, the software must estimate the color values of the new pixels based on the surrounding pixels. This process is called interpolation.

Did you notice in the paragraph above, I specifically talked about resizing images "through your software's resample or resize command"? I want to make the distinction between this method of resizing versus zooming in and out, or dragging the edges of your images in a page layout program to resize it. This type of resizing is more accurately called scaling. Scaling an image does not effect the image permanently. In other words, it does not change the number of pixels in the image. However, if you scale a bitmap image to a larger size in your page layout software, you are going to see a definite jagged appearance. Even if you don't see it on your screen, it will be very apparent in the printed image. Scaling a bitmap image to a smaller size doesn't have any effect; in fact, when you do this you are effectively increasing the ppi of the image so that it will print clearer. Popular raster editing programs are Adobe Photoshop, Corel Photo-Paint and Paint Shop Pro, MS Paint and GIMP.

Vector graphics are naturally more flexible than raster graphics, making them more versatile and easy to use. One of the biggest advantages of vector graphics is that they can be scaled quickly and perfectly, since there is no upper or lower limit for sizing vector images. We all know that the rules of mathematics are same for a single digit or a thousand digits’ calculation. Similarly the formulas that shape up vector images are same for graphics of any size.

Vector graphics are based on mathematical formulas that define geometric elements like circles, polygons, lines, curves and rectangles. Since vector graphics consist of geometrical elements they are best suited to represent more structured images like line art graphics with flat and uniform colours. Most created images including logos, fonts and letterheads meet these specifications.

Unlike raster graphics vector images do not depend on resolution. Vector images do not have a fixed resolution, and are displayed according to the resolution capability of their output devices. The vector files are much smaller than their raster counterparts since they do not need to memorize the contents of millions of tiny pixels. To sum up we can say that vector graphics are more versatile and efficient. Common vector formats include Illustrator AI, EPS, CorelDraw formats CDR and CMX, SVG, PDF, CGM, WMF and AutoCad’s DXF. Popular vector art programs are Adobe Illustrator, Flash, CorelDraw and FreeHand.

The main thing to remember is that raster images are made from pixels with a set resolution that will become blurry and pixelated when enlarged, while vector graphics are math based, so they can be re-scaled to any size and still keep their sharpness. But no matter if you are a vector addict or pixel lover, we wish you a great time exploring the magical universe of creativity and self-expression.