Thursday, January 31, 2008

Raster vs. Vector

Here are two basic terms that designers should, but don't always, know. If you are an expert with photoshop or other similar programs you intuitively understand raster graphics. If on the other hand you are familiar with illustrator or autocad, you should understand vector graphics.


The basis for raster graphics is the pixel. A pixel is basically a dot with color properties. Raster images are just rectangles composed of pixels, arranged in a grid. Pretty much all graphics you see on websites - jpegs, gifs - are raster images.


The basis for vector graphics is the point. Between two points you can draw a line or a curve, and from those you can draw polygons. Basically it's graphics based on math. As such you can perform transformations such as rotation and scaling on vector graphics with no loss of information.

The difference in nature

One difference is file size. For example, if you want to draw a raster circle, you would need an image with dimensions that can at least circumscribe the circle. Then you need to define each pixel in that image. In a vector image all you need to define the circle is the coordinate of the center point and the radius.

Unless the vector image is inordinately complex, it would have a smaller file size than its rasterized counterpart.

Another difference, which has already touched upon, are the various transformations that can be performed with no loss to vector graphics. Vector objects can be rotated arbitrarily, then rotated back by the same degree and end up the same object. You can also shrink a vector object, then blow it up again, with no loss of detail. Perform these operations on a raster image, however, and you would lose detail. For example, if you shrink an image by 50%, you are basically shoving what used to four pixels worth of information into one pixel per pixel; something is going to be lost. So even if you expand that shrunken image by 200% what you get back would not be the same image as you had originally.

Therefore vector graphics is resolution independent, whereas raster graphics is not - a most important consideration for printing. One common term used in regards to resolution is "dots per inch" or "dpi". Dots in this case would just be pixels. So if you have a raster image measuring 1050 x 600 pixels, and you want to print it as a 3.5 x 2 inches image, the resolution of said image is 300 dpi. If you take the same image and print it as a 7 x 4 inches image, the resolution becomes 15o dpi.

One common mistake people make is thinking an image designed for the web would look just as good printed. Web designers want their graphics to look as good as possible, while being as small as possible, so they try to minimize the number of pixels used. Since many monitors are set to a resolution of 72 dpi, that has become the de facto resolution of web graphics. However, 72 dpi is too low a resolution for printing.

Look at the following image:

The left image is a vector version, while the right one is a 72 dpi raster version. Looks the same, right? If you zoom in at 400%, however:

You can see that the raster image looks pixelated, which is closer to how it would look printed. Notice that the resolution-independent vector version remains just as crisp.

Practical considerations
  • Make sure your raster art is at least 300 dpi; commercials printers should be able to print at this quality at least. In fact modern laser printers can probably print better than that.
  • Logos are best designed as vector art, so it can be used in a variety of pieces of varying dimensions while remaining at maximum quality.
  • Fonts are have both a raster (bitmap) and vector component. If you save a photoshop file in its native .psd format, live type displays as bitmap only, even if importing the file into other programs like indesign. Save it as a .jpg or .gif, all layers (and therefore live text) become flattened and uneditable. Save your photoshop image as a .pdf or .eps and the live text will be vector objects.