Vector vs. Raster: What’s the Difference and Why Should You Care?

When it comes to graphic design, quality is super important. Not just the quality of the designs, but the quality of the images themselves.

You want the lines to be nice and crisp, not blown out and pixelated.

So, how the heck do you do that? With vectors!

What is a vector?

Simply speaking, a vector is a line or shape created using math. Don’t worry, you don’t have to do any crazy equations to create a vector! Anytime you type in Microsoft Word (or any other program, really!), you’re creating vectors!

Vectors are pretty unrestricted. They can be straight lines, curved lines, circles, ovals, text, you name it. The biggest indicator of a vector is that it can be scaled however big or small you want it without losing any quality.

So, think about typing up a document in Microsoft Word. You can type all of your text up at 8pt, then increase it to 54pt without losing any of the quality.

Because it’s created using math, a vector is always going to have a crisp edge. So feel free to make that tiny circle 24 inches across and it’s going to still be great quality!

[clickToTweet tweet=”What is a vector? @caitlinhonard has the lowdown” quote=”What is a vector? @caitlinhonard has the lowdown”]

How to Create  Vector

Typically, you need some sort of design program to create a vector. Think: Adobe Illlustrator, Adobe InDesign. These will give you the most freedom, because you can really mess around with the shapes and make them look exactly how you want them.

However, you can still create vectors in other programs like Word and PowerPoint. Have you ever played around with Shapes in Microsoft programs? Those are vectors!

The downside of those programs is that you can’t really use them outside of Microsoft programs. So if you build a logo in Powerpoint, you’ll have a hard time getting your logo into Canva or Photoshop when you’re creating your blog graphics.

However, you’re still able to make them as big or as small as you want without losing any of the quality.

PS Want to learn how to create your own vector images in InDesign? (It’s way easier than you think!) Sign up for the InDesign Adventure Guide, and I’ll walk you through the process!

Sign up for the InDesign Adventure Guide!

What is a pixel?

A pixel, on the other hand, is a unit of measurement in computer graphics. It’s always a square, and its size depends on your image’s resolution. For example, if your resolution is 72, there are 72 pixels in an inch. If your resolution is 300, there are 300 pixels in one inch.

Unlike vectors, pixels are very restrictive. If you draw a shape with a pixel-based tool (like Photoshop), you’re going to be stuck at the resolution you created it at. If you try increasing the size, it’s going to look pretty bad. Rather than taking the original shape, increasing the size of a pixel-based image just increases the size of the pixels.

So, the edges are going to get a ton of squares around them and, in general, look terrible.

Let’s look at some examples, shall we?

Because these images are being uploaded to the internet, they’re all pixel-based. So, if you try zooming into these images in your browser (or if you download them to your computer), they’re going to get pixelated (also called rasterized). But if you keep your browser at 100% zoom, you should still be able to see the difference.

Let’s look at my dinosaur logo.

Isn’t he cute?!

So let’s say I open two of these guys into a document in InDesign. One is a pixel-based JPEG, and the other is a vector-based image I created using the pen tool.

When we’re zoomed out, both seem to be normal.

The dino on the left has a box around it because it’s a pixel-based image. The one on the right is the vector-based one, so it doesn’t have a box around it. (That’s just how InDesign does it.) But overall, they look the same.

It’s a totally different story, though, when we zoom in. First, the pixel-based dino:

See all of the weird colors and lots of squares around the edge of the shape? Bleh! That’s because it’s a low-quality pixel-based image.

On the other hand, let’s look at the vector-based dino:

Much better! Everything is one solid color, there aren’t any weird boxes around it, and it’s nice and crisp. Again, this screen-captured image is pixel based, but you get the idea.

When to use pixel-based images

So… if vectors are so much better, why do we bother with pixel-based images at all?

Well, because you can’t upload vectors online. You could upload an InDesign file, sure, but you’d have to download it to your computer to actually be able to use it.

So, whenever we want to upload an image to the internet, it’s got to be pixel-based. Yes, even if it started out as a vector.

To do this, you simply save your image as a PNG, JPEG, BMP, or GIF. Then they can be uploaded to your website and viewed!

In addition, no matter what, photos will be pixel-based. Vectors are only for illustrations or shapes, not photographs. That’s why you always want to make sure your images are the highest-quality possible, because that’s as big as they get—they can’t get any bigger!

Why use vectors?

Okay, so now that you understand the difference, let’s talk about why you should be using them.

1 | You’re never sacrificing quality.

Nothing degrades a brand more than pixelated images.

Okay, maybe that’s not the only thing, but you get the idea.

If you want to have a top-notch brand, pixelation just can’t happen. Your logo, text, illustrations… they should all be nice and crisp in any images you’re uploading.

With vectors, you’re not at risk of pixelated illustrations. Sure, you could get a pixelated image based on the size you upload to your site, but that’s something that’s easily fixed. If the elements of that graphic were pixel-based to begin with, you’re SOL.

PS Want to create your own vector-based images for your blog or business? I can help! Sign up for the InDesign Adventure Guide!

Sign up for the InDesign Adventure Guide!

2 | You only need one file type.

Because you can resize a vector to any size you want without losing quality, you only need one file. Sure, if there are common sizes you need of your logo, you could save pixel-based images of those files. But you don’t have to! You could create a pixel-based image of your logo, upload it, and then delete it from your computer or the cloud.

If you only had a pixel-based image, you’d need a ton of different files of your graphic in different sizes. Seems like an organization nightmare to me.

I’d much rather have on InDesign or Illustrator file, copy a vector graphic into whatever file I needed it, and not have to deal with it again. Seems much easier, no?

3 | It’s way easier to change the color and style.

Say you’ve got a shape you want to change the color of. Maybe it’s your logo, maybe it’s your favicon, or maybe it’s a random triangle on an image you’ve created. If that shape were pixel-based, you’d have a really hard time changing the color. You might actually be better off re-creating it in the new color.

Sure, if it had a transparent background and you’re using Photoshop, you could create a color overlay. But what if you’re not? You just might be SOL.

With a vector, on the other hand, you can change the color, stroke, pattern, gradient, and more just by clicking on it! It takes roughly 2 seconds, depending on how well you know the program you’re using and what effect you want to apply.

It’s a lot simpler, and a much better use of your time.

If you’re going to be using any sort of shape (whether it’s your logo, an illustration, etc.) more than once, you’re going to want to use a vector.

Interested in learning how to create your own vector-based images in InDesign (and create a simple guide that has all of your vectors in one place)? Sign up for the InDesign Adventure Guide today!

Sign up for the InDesign Adventure Guide!