Vector Images vs Raster Images: When + Where to Use Them

 

Pinterest
Facebook
Twitter
Google+
https://blakelymedia.com/2018/10/14/vector-images-raster-images-when-where-to-use-them">
LinkedIn
Follow by Email
RSS

If you’re dealing with graphics and print files, it’s important to know the difference between vector and raster graphics. Understanding the difference will help you avoid printing pixelated artwork or uploading web files that take forever to load or don’t load at all. I’ll walk you through all you need to know so you can throw the terms “vector” and “raster” around like a pro.

Vector vs Raster Images

 

First Things First

First things first, there is no such thing as a “high-res vector”.

“High-res” (high resolution) is a term used to describe a raster graphic that is high quality and will print well without looking pixelated.

Vector graphics can be scaled to any size without losing quality so they will always print well no matter how large you scale them. By nature they’re always high quality so you don’t need to add the descriptor “high-res” to it. It would be like saying “assless chaps”. By nature they’re assless so you can just say “chaps”.

Vector Graphics

As mentioned above, vector graphics can be scaled to any size without losing quality. They will look great small on a business card and large on a billboard. They’re built using mathematical equations, points, lines and shapes.

When a vector graphic is scaled up in size, all the lines stay nice and clean. Vector graphics will never appear pixelated because they’re not created using pixels. Resolution is measured in dots per inch (dots being pixels). Because vector graphics use math rather than pixels, they don’t have a resolution.

Below is an image of our logo in vector format. You can see when it’s scaled up in size the lines stay clean. There is no pixelation or blurriness around the edges.

 

Vector Graphic Example

 

(While this logo was originally a vector format, it was scaled up and then converted to a raster format to put on the web. We’re just trying to show you the difference between scaling up vector and raster image.)

Adobe InDesign and Illustrator generate vector artwork. There are other programs that create vector graphics, such as Corel Draw, but personally I don’t suggest using those programs. Adobe is the standard for graphic designers and Corel and Adobe files don’t always work well together. If you work with a designer who uses Corel and then later you work with a designer who uses Adobe, they may not be able to fully edit the Corel files.

Vector file formats: .ai, .eps, .svg, .pdf (.pdf can be vector or raster)

Vector vs Raster Graphics Cheat Sheet

 

Raster Graphics

As mentioned above, raster graphics are made up of tiny little dots called pixels. Raster graphics are where the term “high-resolution” comes in. A high-resolution graphic of print quality is typically 300 dpi (dots per inch, dots=pixels). So in a one-inch square, there are 300 dots making up the image. A low resolution, web quality graphic is 72 dpi.

If a raster graphic is created with a low resolution, you can not make the graphic a higher resolution. This is really important, and many people don’t realize it so I’ll repeat it. If you create a raster graphic with a low resolution, you can not make the graphic a higher resolution.

This can happen with photos or any graphic created in Adobe Photoshop. You can’t add more pixels than what you started with. For graphics, you need to remake the artwork and for photos, there isn’t a very good solution besides taking a new picture at a higher resolution.

Often times if someone needs their artwork to be a higher resolution they’ll pull it into Photoshop and change the resolution from 72 dpi to 300 dpi. Aha! Magic! A higher quality image!

Unfortunately, this won’t make the artwork any clearer.

When you have a raster graphic, you only have the dots per inch (dpi) that you start with. If you change the resolution from 72 dpi to 300 dpi, you’re adding more dots, but that won’t make the photo any clearer. The original 72 dots per inch could only capture a certain amount of detail so changing to to 300 dots later will only break up that limited detail into more dots. It won’t add more detail.

The picture below is a raster version of our logo. You can see when it gets bigger it gets pixelated and blurry around the edges. You don’t want that.

 

Raster Graphic Example

 

Raster file formats: .jpg, .png, .gif, .pdf (.pdf can be vector or raster)

A One Way Train

Graphics that are created as vectors can be saved as raster graphics. But graphics that are created as raster graphics cannot be saved as vector graphics. In order to make a raster graphic into a vector graphic, you’ll need to re-create it. Depending on how complex your graphic is, it can take 30 minutes to multiple hours to recreate.

Raster graphics are sometimes needed for printing and always needed for web use (on your social media accounts and websites). It’s best to have your logo designed as a vector graphic and then a raster version of it can be saved from the original vector graphic.

Why can’t we use vector graphics instead of raster graphics for web use? Because most browsers don’t support it and they take longer to load. SVG vector files can be used on the web, but for simplicity, let’s just remember vector for print, raster for web.

Web/Digital Images

If you’re uploading graphics to social media or to your website, you’ll want to use raster images (a .jpg, .png, or .gif file) with a low resolution of 72 dpi because it’s the take longer to load.

Print Images

Raster images can be printed, they just need to be high-resolution (I always use 300 dpi but sometimes 240 dpi will be high enough—it depends on the quality the printer is able to print). It’s typically best to use vector graphics for print materials because you know they’ll print clearly and they’re usually a smaller file size. Photos are raster images so if you’re printing photos, make sure they’re high resolution.

I hope that cleared up any confusion you may have had with raster and vector graphics. If you have any questions please let us know in the comments.

Free Resource Library

Pinterest
Facebook
Twitter
Google+
https://blakelymedia.com/2018/10/14/vector-images-raster-images-when-where-to-use-them">
LinkedIn
Follow by Email
RSS

 

Leave a Reply

Your email address will not be published. Required fields are marked *