Graphic Underworld pg 2: Production Graphics with Wendy Peck at webreference.com

Graphic Underworld: Vector vs. Raster

Raster Programs
Photoshop
PaintShop Pro
Corel PhotoPaint

Vector Programs
Illustrator
Freehand
CorelDraw
Fireworks
Flash

Note: Fireworks is an interesting hybrid of raster and vector types. Both Photoshop and PaintShop Pro have some vector capabilities, but since the saved files are raster format, they really should be considered raster-only programs.

Raster File Types
GIF
JPG
PNG *
TIFF
BMP
PSD (Photoshop)
PSP (Paint Shop Pro)

PNG is technically a raster format, but when saved as the native Fireworks format, vector information is retained.

Vector File Types
AI (Adobe Illustrator)
FH* (Freehand * = version)
CDR (CorelDraw)
EPS (Encapsulated PostScript)
WMF

Many of you have come to graphic design through Web development, and you probably are at least slightly confused when you hear the word vector. People who have spent career time with print graphics are familiar with vector images, since we do almost all of our non-photo graphics in a vector program. To level the field, let's start with a basic comparison of the two formats. I have included a list of the programs we feature regularly in this column divided by program type.

So what is a vector? What the heck is a raster?
The difference between vector and raster is a fundamental one. In raster format files, like our familiar GIF and JPG, the information is stored pixel by pixel. In the samples shown below, I have used very simple illustrations to show what is happening with each file type to place a blue rectangle on the page.

The first example shows what is happening as raster file information is saved. Color information is give for each pixel in the image. Each square in the gray grid represents one pixel.

Vector images, however, save information in a totally different way. In the sample and chart below, I have used severely simplified language to illustrate how the exact same image would be described if it was a vector image.

Vector Image	File information
	Draw a rectangular shape with coordinates at a, b, c, d and fill with blue.

And that is the fundamental difference between raster and vector files. Simple, eh? (I am a Canadian, after all, and some situations just call for that expression.)

Easy editing is one of the reasons many designers love working with vector images.

Vector images can be scaled to any size with no quality loss.

Raster images cannot be scaled to a larger size without losing quality.

Why use vectors if the Web only sees raster?
Those of us who have a history of working with vectors love them a lot. They produce much smaller file sizes for most graphics (not photographs, but we will look at that in a minute). They are also very easy to edit, reshape and change color, since each object can be treated separately, even without using layers. In the sample shown here, one click selects the object, no matter how complex the fill or shape, and another click and drag will change the color (new color shown ready to fill object on mouse release).

The true power of a vector shows up when you wish to change the size of an image. In the sample shown here, an original circle is shows beside a copy that has been enlarged by a factor of hundreds. Note how the edges of each object are the same quality.

In contrast, look at the results when the same action takes place in a raster program. In the orange sample shown here, I created the smaller circle. I duplicated the layer and then scaled the circle to a large size. Note how the edges are blurred and jaggy. Unlike the vector image, which simply changes the information on the coordinates to create the larger size, a raster file cannot create more information to fill in. It can get larger in only one way, and that is to make the pixels bigger. The result is usually pretty ugly.

That is why we vector fans are ... well, vector fans. When we design an image in vector format, we can make it larger, smaller, separate individual objects and move them around at will, all without the hassle of layers. Have you ever had a client tell you that they loved the logo you created, but they simply must have it twice that size? When you have created the image in a vector program, you can smile instead of grinding your teeth as you say, "sure."

This magnified view of the eye, shown embedded in the close-up view, shows the number of color changes that create a photo. Vector files cannot display this level of color change in an efficient manner.

Why is raster still around if vector is so great?
Vectors are not the answer to all graphic questions. Picture a photograph with all the subtle color changes that creates such a rich look. Since vectors must map out a new container for each color change ... I'm sure you can see where this is going. There is a point, not far into any image texture or tonal changes, where the way that raster files store information becomes much more efficient. Technically, you can save a photograph as a vector image, but the file size is much larger than the equivalent raster file for the same image.

Take a look at the sample at the left. I have a picture of an eye embedded into the same image viewed at 1600% magnification. Notice how almost every pixel is a different color. Vector files cannot efficiently describe this level of color change. A raster file simply has to state the color that will appear in which pixel.

Carry on to find out where vector images fit in Web design.

Next page

Graphic Underworld Tutorial Index

Graphic Underworld Start
Vector vs Raster
Vector to Raster for the Web
Vector/Raster When and Why?
Optimize is Not Passé
How Compression Works
Image Optimizer