Vector and Raster Images: What Are They and How Do I Know Which to Use?

Vector

• Vector images are mathematically-based on the relations between one point and another. A vector file is like a set of instructions describing how the points are connected.

• Illustrator files are vector images.

• Vector file types include: SVG, AI, and sometimes EPS.*

Raster

• Raster images are formed of pixels that comprise a grid, each defined by an x and y coordinate. Each coordinate has a color value assigned to it.

• Photoshop files are raster images. Images acquired from a scanner or digital camera are also raster.

• Raster file types include: JPEG, GIF, PNG, TIFF, BMP, PSD and sometimes EPS.

*Illustrator EPS files are vector, while Photoshop EPS files are raster.

(Click image for a larger view.)

Depending on what you are designing and how your design is going to be used, you need at some point to decide whether to use art that's in vector or raster format. Not knowing the ramifications of each type of image could result in ugly, pixelated art and costly reprints.

The most important difference to remember is that vector graphics are infinitely scalable, while raster graphics are not. Because raster images are defined not pixel by pixel, but in mathematical terms, a vector logo that’s two inches tall on your monitor can be printed on a billboard with no loss in quality.

Vector images also result in very small files, while raster images are much, much larger. A vector file might be 100k in size, while a raster file might be 100Mb. Everything in a vector file remains editable, even text (unless you purposely turn it into outlines), whereas any non-native raster file (JPEG, GIF, PNG, TIFF, BMP) will never contain editable text.

As seen in the example above, logos, because they are used so often in so many different environments, should always be vector format. Any art that needs to be easily resized should be vector.

Vector art is suitable for any image that uses flat swaths of color. Maps, icons, cartoon-style drawings — they’re all usually in vector format. If the Simpsons were drawn on computer (I don’t know if it is or not), Homer would be a vector file.

It’s difficult to create photorealistic images, like a natural-looking face with all its shades and contours, using vector art. In fact, the few examples I’ve seen of such work resulted in a vector file as large as its raster counterpart would have been.

Which brings us to raster images. They’re used for highly-detailed images, like photographs — images with complex and subtle variations in color, light, and line. While the thousands of pixels in raster images makes them highly detailed, it’s also constraining. Enlarging a raster image beyond its 100% size will result in pixelation: that blocky, fuzzy look.

• Use raster images for photos.
• Anything that looks like it could be hand-drawn should probably be in vector format. Logos should always be vector, unless you’re some web company that never prints any identity materials…but even then it’s a tough call, and I’d still lean towards vector, shiny web 2.0 aesthetic be damned.
• Anything with text should be vector, unless the text absolutely needs to be in Photoshop for special manipulation.
• Logos should always be vector.
• Images that need to look good at any size should be vector whenever possible. This is another loose rule, as we’ve all seen raster photos on billboards and at trade shows and so forth, but also know that taking photos that large requires adhering to very precise specifications provided by the printer. Vectors have no such worries.

I love designing and helping people with their Macs. If you have any questions you’d like to see answered, please click my name up top and then “send a message” or e-mail me at amy@greenspeardesign.com.