Raster vs Vector Graphics

Blog Contributor Laura Stopa

What they are and when to use them


Laura Stopa, Graphic Designer
08.16.2017

Digital graphics can be divided into two categories: raster and vector. Never heard of them? Here’s how — and when — each should be used.

Raster graphics are composed of pixels, which are tiny squares that make up an image. These little squares of different colors join together to form an image when viewed at normal size. Depending on the media output you plan to use the graphic in, there are standards for how many pixels (or dots) per inch (dpi) there should be to see a crisp, clean picture. For example, most onscreen graphics work well at 72 dpi, but printed graphics should typically have 300 dpi.

Raster Graphic Example

Raster graphics lose quality as they are scaled up (or down!).

Vector graphics are composed of points and lines generated by mathematical formulas. These points and lines are used to compose the final graphic. The computer uses math to determine the shape of the object based on placement of the points and lines. Unlike raster graphics, there are no pixels, which means you do not need to worry about the size of the graphic, it will look crisp at any size regardless of media.

Vector Graphic Example

Vector graphics do not lose quality whether you scale them up or down.

When to use raster and vector graphics

Whether you use raster or vector graphics depends on the type of graphic you’re looking for.

If you’re going to create or use a photograph, graphics with many different effects, or a highly detailed image, you should use a raster graphic. This will give you maximum control over the image and allow for better gradient/color blending. Depending on the use, you can only scale the image up to 100% before you start to see some quality loss. Even resizing a raster image smaller can cause loss of quality, so be sure that whoever is handling the files knows how to properly edit and save the file to avoid loss of quality.

If you’re going to create or use logos, illustrations, graphics with minimal (preferably no) effects, graphics with little detail, line drawings or artwork with clearly discernable shapes, you should use vector images. This will maximize your editing capability, allow you to reshape the artwork endlessly without loss of quality, and resize smaller or larger without quality distortion.

Some common file formats give you a clue as to the type of graphic you have:

  • Common raster formats: JPG, PNG, GIF, TIFF, BMP
  • Common vector formats: PDF, EPS, AI, SVG

The trick with vector formats is that they can also contain raster graphics alone or in conjunction with vector graphics. Try opening the file in an application like Adobe Acrobat and see what happens when you scale the graphic up past 100%. If all parts stay in focus and clear, then it’s most likely a vector graphic. If things start to get fuzzy and pixelated as you zoom in, the file likely contains raster images, and will not work if scaled too large.

Make sure to use the correct format for the needs of your graphics. One of the biggest mistakes many companies make is creating something like a logo with a photo in it, or making the logo in Adobe Photoshop and saving it in a raster format rather than a vector. This results in distorted or pixelated images, which is never good for your brand.

When in doubt, contact us and we’ll make sure you have the right format for your graphic needs.

Categorized in:

,