Vector and Raster Images: The Differences

Whether you’re designing for print or the web, choosing how you draw your images can make a huge difference in how you’re able to distribute your designs. Digital drawings can be classified in two different ways: vector or raster. This article goes into the differences between the two and how it affects you as a designer.

Vector:

A vector image is an algorithm based drawing method, which in layman’s terms means it’s drawn with math. The official definition via Wikipedia is, “… the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics.” It has many different uses across several industries, including architecture, engineering, and graphic design.

Vector images have a couple very strong advantages in design. For instance, since a vector file doesn’t need to save the color and location of every pixel in an image, the files as a whole are generally smaller than other kinds of images. This is because a vector image only needs to remember specific details about an image, such as the position of points, lines, and fill.

Secondly, since vector drawings are created using algorithms, it is possible to scale images without losing any resolution. It’s possible because the only things changing when you make a picture bigger or smaller are the numerical values that give your image its shape and color. So, no pixelation!

Sounds pretty good, right? Well, there are some downsides. For instance, vector images need to remain relatively simple to work properly. You won’t be making the Mona Lisa using vector! So if you want any of your designs to have vast amounts of detail that use many different color values, vector isn’t a good choice.

So what is it good for?

Very important things. For instance, if you want to do any branding, merchandising, or advertising, your company or personal logo will be printed on many different media in many different sizes. To make sure that it looks exactly the same on everything, whether it’s the size of a quarter or the size of a house, you need to make sure that it’s drawn in a way that printing companies can scale your image efficiently.

Some of the most common file extensions for vector images are .ai (Adobe Illustrator), .eps (Encapsulated PostScript), and .pdf (Portable Document Format). Some popular file types, such as .ai or .pdf, require specific software to view, while others are more forgiving. For a comprehensive look at all the extensions and their uses, click here.

Raster:

Raster images are very different from vector images. Most of the pictures you find on your computer and the web are raster images. From the photos your camera takes, to the doodles you make in MS Paint, they’re all produced and saved as raster images. So, what are they?

Raster images are produced by blocks (pixels) of color. You’ve seen it before. If you zoom in on an image, chances are you’ll see that individual squares of color make up the picture as a whole. It’s an effective way to make very detailed images, because it allows an impressively high resolution with any combination of the thousands of colors your monitor is able to display.

All that detail needs to be recorded somehow, however. Raster images can make for very, very large files. Every pixel can have a different value, and those values add to the size of the file overall. Without using compression on big, detailed pictures (Or even with it!), it can be difficult to store and send your high resolution images to clients, printing companies, or even the computer next door.

So, what is it good for?

For any purpose where your images do not need to be resized, first off. They are optimal for web design, concept art, digital paintings, and more. As long as you create your image at the correct scale, they can and will print beautifully. Another thing that’s a huge plus is that they’re easy to create. If you have an artist’s eye, you can paint a picture or edit a photograph far faster than it would take to meticulously recreate an image in vector. There are many popular programs designed for just this purpose, such as Adobe Photoshop.

Some of the most common raster image extensions include .jpeg (Joint Photographic Experts Group), .bmp (Windows Bitmap), and .png (Portable Network Graphics). Most are forgiving and are able to be opened by many different programs.

This is all just a very brief overview on vector and raster images. There are many good sources of information to help you learn more, including communities such as the Graphic Design Forum that can aid you in anything that you need. Remember, the best way to learn anything is to experiment. You might not know the right questions to ask until you play around and stumble upon a problem that needs solving! When you do, myself and countless other designers are always around to help.