Raster & Vector, Explained.
It can quickly become overwhelming to pick images for a project with all the available options. So we wanted to put together this quick guide for you because knowing the difference between raster and vector before you start a project means a lot of saved time and money down the line. If you pick the right media type to start out with, that means happy designers, printers, and customers.
Raster
What it is
Let’s start with what we know. A “raster file” means that the image or file is made up of pixels. Unless a photograph is developed by hand from film (vs printed from a computer) it is a raster image. All of these tiny little pixels represent one small square of color, and they all come together to create the larger image. The more pixels there are in a given area of space, say a square inch, the higher quality the image will be. This explains why you see some images that look blurry and pixelated: because there are limited “pixels per inch” on it. So next time you're browsing stock images online and see the term “ppi,” you’ll know that you’re seeing how sharp the image will look.
The bottom line is that a raster image will only be able to go so big before the quality starts to go down. The more you stretch it beyond its limits, the uglier it will look. By bigger/smaller, I’m referring to the literal dimensions of the image.
Pro Tip
If you start with an image that is 10 inches wide and 100 ppi, and resize it to 20 inches, the image will print at 20 inches wide but the resolution (ppi) will become 50. Which means VERY pixelated. But that’s for another post.
Standard PPI’s
Print- 300 ppi
Hi resolution screen - 150 ppi
Standard resolution screen - 72 ppi. (The less the ppi = the smaller the file, which means quicker load time.)
When to Use it
Raster images are best used for— you guessed it: photos. Any situation where you have an image with continuous transitions in color, just like a photo does. This being said, raster images work wonderfully for both print and screen applications.
Raster File Types
.tiff (Tagged Image File Format)
.psd (Adobe Photoshop Document)
.pdf (Portable Document Format)
.jpg (Joint Photographics Expert Group)
.png (Portable Network Graphic)
.gif (Graphics Interchange Format)
.bmp (Bitmap Image File)
Vector
What it is
A vector image is made up of pathways and curves that are determined by mathematical formulas. When it comes to math with a vector image, all you ever need to know is that there IS math… because you’ll never have to worry about doing any. It’s all happening behind the scenes so that your computer knows where the lines are and what the curves will look like. The wonderful and amazing thing about vector files is that they are infinitely scalable. You can size it to 8,000 feet wide if you want to, and the lines will be just as crisp as they are at .25 inches wide. No pixels.
The blue lines and dots above are the outlines, anchor points, and handles of the vector shapes.
When to Use it
So you say, “that’s cool, but when do I use vectors?” Well, here’s my answer: Think about the last time you saw a logo, icon, or a computer-created illustration. Those were most likely all examples of vector files. Printers and designers love vector files because we just need one file to put the same logo at any size on any document. We don’t need to keep outputting tons of images that will be just the right size and ppi for one specific project at one specific size. Also, editing vector files can be quite a bit easier once you get the hang of editing paths and curves. (Again, another post.)
The short answer:
Company logos and insignia,
“Clip-art”
Flat icons
There are many more but those would be the most common day-to-day applications. If you want to add to the list, you can write suggestions in the comment section below.
Pro Tip
Sometimes you’ll find vector files that look like photographs. Usually when you zoom in, you’ll see that they are actually made up of many tiny shapes. That is because vector files are made up of lines or planes of color and don’t smoothly transition from one color to another. Gradients are possible, but beyond that it’s usually better to just use a raster image.
Vector File Types
.ai (Adobe Illustrator document)
.eps (Encapsulated PostScript)
.svg (Scalable Vector Graphic)
.pdf (Portable Document Format; only when saved from vector programs)
IN CONCLUSION (as they say)— this can all be a bit overwhelming when you first start learning about it. It’s like learning how to read and write: As soon as you think you have all the rules figured out, you’ll start finding exceptions to them. But the more exposure you have to using different file types, the more comfortable you get with it all. Eventually when your printer, designer, or client asks you to send over the vector version of your logo, you’ll be able to handle that like a pro.