Menu

Dever Blog

What Is the Difference Between Vector and Raster Graphics?

Perhaps your designer just asked for a vector file of your logo, or you have a banner ready for output, but the printer insists that the graphics are too “low-res” and asks for high-resolution images. It sounds so complicated when you don’t comprehend the lingo, but it is simple to tell vector and raster graphics apart once they are dissected. Let’s take a closer look at these two graphic formats.

Both vector and raster graphics are used in printed pieces and digitally on screens, but they are built differently.

 

What are vector graphics?

Vector graphics are created from mathematical paths, curves, and points. This produces a sharp, clear edge. Vector graphics are able to scale up or down infinitely without losing quality, so they retain the same crispness when printed on something as small as a business card or as large as a billboard. But, unlike raster graphics, vector graphics usually cannot achieve photo realism.

Fonts are the most commonly used vector graphics, and they demonstrate how well vector graphics scale. Look at the different sized letterforms below to see how the clean edge holds up at all sizes.

 

Where are vector graphics used?

Vector graphics are used in text, logos, illustrations, symbols, infographics, charts, and graphs. They are created and edited in computer programs such as Adobe Illustrator. Typical formats for a vector file are .ai (Adobe Illustrator file), .eps or .pdf. However, not all .eps or .pdf files are automatically vector-based. To understand why, we need to explore raster graphics.

 

What are raster graphics?

Raster graphics are made up of numerous of tiny squares called pixels. Each square represents a different color or lightness. These pixels are arranged in a grid. When zoomed out, this tightly woven grid creates a photograph or image.

The amount of pixels in an image determines its resolution. The more pixels an image contains, the more detail that is captured—and the higher its resolution; likewise, fewer pixels capture less detail and result in lower-resolution images. Resolution is measured by pixel dimension—the number of pixels that makeup the width and height of an image. A 480 x 270 pixel graphic is lower resolution than a 1920 x 1080 pixel graphic. If you’re not sure of your file’s pixel dimension, look at the file size, measured in kilobytes (KB) or megabytes (MB). Generally speaking, if a file is measured in KB, it’s low-res; if it’s 5 MB or more, it’s high-res.

 

Technically Speaking:

DPI and PPI are two terms that are used to reference raster graphic resolution. They are confusing because they have been used interchangeably, but they are not the same.

DPI – Dots Per Inch. DPI is used in the printing process, and it describes the number of dots a printed document has per inch. In a printed image the more dots, the higher quality the printed piece is.

PPI – Pixels Per Inch. PPI is used digitally, and means the number of pixels your digital image has per inch on your screen.

 

Where are raster graphics used?

Photographs and scanned images are the most common examples of raster graphics. Raster graphics often show more subtle changes in color, tone, and value than vector graphics are able to achieve. Unlike a vector graphic, it is impossible to take a small raster graphic and scale it up without losing image quality.

Raster graphics or images are captured by a digital camera or scanned into the computer and edited by programs such as Adobe Photoshop. Typical file formats include .jpg, .psd, .png, .tiff, .bmp, and .gif. However, both raster and vector graphics can be saved as .eps and .pdf.

So, how can you tell if an .eps or .pdf is really a vector graphic? If you don’t have Illustrator or Photoshop, you can zoom in on a file and check to see if the graphic retains a clean edge (vector) or becomes jagged (raster).

So, the next time you are asked to provide a vector logo to your graphic designer or a high-resolution image to your printer, you can relax because you know exactly what to give them.

If you have further questions about these graphic formats contact Dever Designs by email or call us at 301-776-2812.