Raster vs. Vector

Raster-vs-Vector-Title.png

This week I'm going to be talking about one of the basic concepts of design: raster vs. vector, and the related file types.

Knowing the difference will help you ensure that all of your graphics are at their highest quality, and when working with designers and printers, you'll be able to communicate clearly what files are needed for the project.

Raster

Definition

The dictionary definition of raster is "a rectangular pattern of parallel scanning lines followed by the electron beam on a television screen or computer monitor." Let's be honest, that's a bit confusing. Simply put, it's how screens interpret images.

Screens transmit information by pixels; squares of colors. Everything you see on your computer or phone screen is made up by these tiny squares of color. Raster images are files containing information regarding how many pixels an image contains, and what color each pixel is.

Use

Raster images are used for photos (cameras store information as raster images), and graphics used on the web. Raster images can be used for print, but the amount of pixels you need to create a clear image on print is much higher than on the web. Most screens (all but retina) display pixels at 72/inch, while high quality printers print at 300 pixels/in (although then, it's called dots per inch or dpi).

Common File Types

JPEG, PNG, and GIF are all strictly raster images. This is why they're the file types most commonly able to be uploaded.

Vector

Definition

The dictionary definition of vector is "denoting a type of graphical representation using straight lines to construct the outlines of objects." It's based on mathematical concepts. If you remember graphing equations in school, you'll get a rough idea of how vectors work. 

Instead of storing images as collections of pixels, vectors store shapes as mathematical equations. Because of this, you can resize the image as much as you like without losing the integrity of the image. No matter how big you make your graph, the curve comes out the same, right?

Use

Being able to resize a design makes vectors very useful in design, because you're not limited by size constraints. The design standard is to create as many as possible of your designs as vectors and only convert to raster when exporting for use in web or print. Having the original file as a vector means you can recreate the design at any size.

Common File Types

There are no file types that are purely vector-based, but these formats can contain both vector and raster images: AI, PSD, PDF, and EPS.

Talk to Me

Do you have your logo as a vector file? You definitely should! If you don't, you can hire a designer to recreate your logo as a vector, usually at a fairly low cost.