Wednesday, October 30, 2013

Vector graphics vs. Raster graphics

Vector Graphics vs. Raster Graphics


What are they?
A vector graphic is composed of points connected by curves or lines (called “paths”) determined by angles. They can be colored within the closed shapes formed by paths.

(Image credit:
The heart is formed by connecting points with paths, and once it is a closed shape, it is filled with a single color.

Pros: The best thing about vectors is that because they rely on angles and ratios of distance between points which can be consistently applied, no matter how big or small you resize your vector image to be, it will always maintain that same perfect degree of crispness, clarity, and smoothness. This makes vectors the ideal choice for logos, which often must be repurposed at a range of sizes and which tend to be smooth and simple, with fine detail less of a stylistic imperative. Vectors also take up smaller file sizes than your “regular” (raster) image, as the computer only has to remember the endpoints which form lines, not all the data actually in between them. In programs that support vectors, vectors are easily edited by moving around the points that determine the paths, and the image’s colors (which are solid colors within closed shapes) can be easily changed.

Prime example: Text!
a a
Many people are unaware that text is made up of vectors—thus, the smooth lines at any size.

Cons: Because vector images are essentially lines and the solid colors in between them, they lend themselves better to more simplistic designs and color schemes. Solid colors can only be used within the defined spaces of closed shapes, so minute detail and rich shading are better left to another medium (that of raster images). Image manipulations of the awesome, exquisite Photoshop sort are curtailed by the more restrained palette and scope of the vector. Vectors are also compatible with fewer programs (in non-compatible programs they must first be rasterized).

Program of choice: Adobe Illustrator is designed for vectors.

Tip: Aside from text, vectors are most commonly and aptly used for logos: that is, relatively simple designs with smooth lines that will need to be reproduced in a variety of sizes.
(image credit:

Common file formats: AI, PDF, and EPS.


What are they?
Raster graphics, also known as bitmap graphics, are composed of a grid of square pixels of color.

Pros: Most images out there, and certainly types of images like photographs and paintings, are rasters. Images with fine shading, a rich range of colors, and detail that can’t be reduced to simple, smooth lines are characteristic of raster images, since raster images are made up of thousands of individual pixels, each of which can be colored differently. This allows you to have total control in image manipulation to an exquisite degree of detail. Raster graphics are also compatible with the most amount of programs (even all the way down the line to Paint).

Prime example: Photographs!

(Image credit:
This kind of image detail and nuance of shading wouldn’t be possible with vectors.

Cons: Raster images are fine at their original size and smaller, but when enlarged their pixels will become stretched, which translates to a blurry and, well, pixilated image. And because rasters images have to record all the information (the individual pixels) that makes up a line and what is inside of it (vectors memorize just the endpoints of paths, with a solid color inside), they have much larger file sizes than vectors.

Program of choice: Adobe Photoshop.

Tip: When you’re looking for images to use in a project, it’s always a good idea to try to use images that are originally large. (To more easily find these, when running a Google image search, click “Search Tools” and select “Size” à “Large.”) It’s no problem to size raster images down, but sizing a smaller image up will make it blurrier and more pixilated: better to just start with something bigger.  

Common file formats: PSD, PNG, TIFF, JPEG, BMP, and GIF.

A note: While Adobe Illustrator is designed for vectors, and Adobe Photoshop is designed for rasters, you can go between the two programs and formats. It is easier to convert a vector (which is simpler and composed of less data) to a raster in Photoshop, and can be convenient if you want to blend or add special effects to your graphic which aren’t well-supported by vectors. When importing a vector into Photoshop, a pop-up will ask if you want to rasterize the vector; or you always have the option of rasterization (even of text) by right-clicking on the vector layer and selecting “Rasterize layer.”

Less successful, though still quite doable, is converting rasters to vectors, either by drawing paths (via the pen tool) within your image by hand, or selecting within Paths à Make Work Path, which will render the lines of your image as vector paths for you. You will be able to capture the generalities of the image in its basic outlines, but the inner colors and patterning richness will not translate the other way around.

In summary: Vectors are good for lines. Rasters are good for what lies inside those lines. The choice is yours.