“Yikes, why does that photo look so crappy?”

niagra-falls-steam-rising low res

Raster vs Vector. Why can’t this be simpler?

Maybe you have seen crappy images before, on a social network feed, or website, or even printed. Or maybe some of your own images didn’t look so hot when you enlarged them. Either way, if you want to have a presence on the web or in print, it is probably best to know the difference. Understanding the advantages and limitations of how images are created on a computer will improve your final product. And save your sanity.

Raster Images and Scaling

Sometimes we end up with a photo or artwork image that looks fine as a thumbnail. But at larger sizes, suddenly our cool little pic is so rough-looking the edges almost seem embroidered! The poor quality is not because it is a “raster” image. It’s because it is a “low resolution” raster image. There in lies the biggest limitation of raster images: scaling.

You could think of a raster image as having a “fixed” amount of pixels. Moreover, the amount is “fixed” at a particular ratio when the image is shot or the artwork created. And that size is displayed in “width [number of pixels horizontally] x height [number of pixels vertically].

A coffee cup also has a fixed size and shape. Until you knock it off your desk. Then it becomes something else altogether.

Pixel Width and Pixel Height affect size and quality

Pixel width and pixel height affect how an image displays at a particular size. Suffice to say that with a raster image, the “amount” of pixels making up the width and height are “fixed” at time of creation. Much like a coffee cup. A coffee cup also has a fixed size and shape. Until you knock it off your desk. Then it becomes something else altogether.

Aren’t we going to talk about resolution?

We have not touched on resolution, and for our purposes, it really isn’t necessary right now. Everything you need to know about an image’s size and quality is revealed in the pixel width by the pixel height.

That’s right! Pretty straightforward. So, what does this mean? Well, if you have an image that is, say, “35 pixels x 60 pixels,” you have a very “lo res” image, or small image. Conversely, if you had one that was, say, “2500 pixels x 3600 pixels,” that is huge, a very “hi res” image that may even need to be scaled down for certain uses, especially the web. And “scaling down” an image is usually not a problem with raster images, because there are plenty of pixels to work with.

…create “new” pixels out of thin air.

Okay, but what about scaling up raster images?

That is a very different and often troubling issue. Why? Well, remember those “fixed pixels” we talked about? Those “fixed” pixels are the problem, because the software you use to “scale up” your images will need to create “new” pixels out of thin air. Consequently, those new pixels will be guessed at based on the “fixed” pixels of your original image. That’s where things like quality and sharpness begin to fall apart.

Vector Images must be the answer to sharper media

At first look, it would seem that way. Computers treat Vector images in an entirely different way than Raster images. Vector images, unlike their raster cousins, depend upon vectors, which consist of “paths,” and lots of math! Don’t worry, you won’t have to do the math. Your software does that for you.

Vector images are like those guys who can never commit to a relationship

But what does that mean. Well, if we use the idea of “fixed” pixels for raster images, then we could say that vector images never commit to a “fixed” amount of pixels. They are like those guys who can never commit to a relationship. So what does that mean? Generally, it means a vector image can be scaled to any size, resolution, etc, without any loss of image quality, sharpness, color, etc! (Except in some cases of extreme reduction in size)

Wow! So why use anything else? To heck with Raster Images!

Okay, I get the protest, but vector images are not as common as raster images. Your phone, for example (at this point in time) only knows how to take raster photos. That goes for your camera as well. Vectors can be used on the web, though not as common, but most websites are photo driven, heavy in raster content.

Vectors are smaller in file size than most of its raster counterparts, but not always. I once converted a photo of an outdoor scene into a vector image. (Yes, raster images can be converted into vector, but the vector image will only be as good as your original raster image). But I was shocked by how large the file had become. It was also very hard to open and handle in Illustrator, which is vector based software.

Are Vectors Elitist?

Not really. But one drawback to certain vector files is that they often require vector based software to open and modify them, but not always. And not everyone has this software on their computer, so that can be limiting.

So to sum up, raster images are most commonly photographic in nature, yet can also be artwork and typography. But most importantly, have a great limitation in scaling. Vector images, usually reserved for logos, graphical artwork, typography, etc, can be scaled infinitely without image quality degradation. Though scaling down can sometimes cause problems. And while vector images can be converted into raster images very easily, the reverse of that is not always desirable.

Below are some common file formats for raster and vector media.

Common Raster file types: .jpg, .gif, .png, .tif

Common Vector file types: .ai, .eps, .pdf

if you would like to reach me, contact me here.