Raster vs. Vector

I’ve recently been trying to explain this to a few new clients so thought I would write it down for future reference. As a client having any kind of web or graphic design work done, whether it be a logo or a complete e-commerce shopping cart system, it is important to know a little bit about these two words, what they mean, and how they apply to you. Let’s jump right in.

By Definition:

n. a data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium.
n. geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent images in computer graphics.

But what the heck does that mean, in English?

In a nutshell, raster images are bitmap images that are based on pixels and vector images are based on a mathematical formula.  Still confused?

Rick Yaeger of MacMerc.TV has explained it perfectly:

Think of a Raster image like a picture made of Lego pieces.  Those little dots on the top of each Lego are the Pixels.  So let’s say you have a handful of yellow Legos.  If you put them all down on a board and arrange them to make a picture of a pretty star, it would look fairly nice from far away.  But what would it look like up close?  The edges would be jagged and look like a staircase.  And what if you wanted to blow it up to be a 4′ star? 40′?  How many Lego pieces do you think you’d need?  And do you think it would look crisp?  This is the same principal.  Raster images are great for photos which require large resolutions and millions of colors.

So what would that make a Vector image?  If Raster images are Legos, then Vector images are the Spirographs of the toy world!  Do you remember that fun geometric drawing toy? You’d put your pencil down and through a strange and mythical mathematical equation awesome beautiful images were created simply by dragging the pencil around the page.  Vector based art works the same way.  You plot points and draw lines and curves between each point.

Watch Rick’s video below for an awesome visual!

Enough games, let’s see real world examples!

Let’s take the recent logo I worked on for Lather & Lace soaps.  Logos are best done in Vector format due to their scalability and compatibility for using with other forms of display such as vinyl cutouts and embroidery work.  In the two images below you can see what happens when you scale the image to a larger size.  This effect is dramatically enhanced to help you understand what happens, but even at lesser degradations, why risk your business image having the slightest loss of detail?

There are many other differences in these two formats but I won’t reinvent the wheel.  I urge you to take a few minutes, pour yourself another cup of coffee, and go read up at the following websites.  Some great info out there to help you understand the differences.

Design Battle: Vector vs. Raster

This thread on the Graphic Design Forum explaining (and discussing) vector and raster formats.

About Bitmap Images

And Finally, never forget the Wikipedia!  Vector graphics & Raster graphics.