What’s the difference between vector and raster images

1When working with images, you might have come across the terms “vector” or “raster” when describing an image. When selecting stock art to use for a specific project, it’s critical to know the difference between these two file types. Your file type matters – especially when it comes to posting social media graphics, working with commercial printers, or creating really big graphics, such as a banner or trade show display.

Today I’m working with a vector image from StockUnlimited.com. This is a perfect image to discuss the differences between vector and raster images, as well as how to make both from the same file. We’ll use this file to create a mock-up banner (using vector art) and a social media post (using raster art).

The image we’re using is #1411067. While it looks like a photo, it’s actually a vector image – and that’s an important file-type distinction when it comes to using the art for everyday projects.

2--1411067Here are a few pointers to help you better understand what vector and raster images are, when to use them, as well as how to convert them into either file format.

Did you ever play with a paint-by-number kit? That’s an easy way to think of vector images. Vector graphics are much like the little spaces you paint in to eventually create the illusion that becomes an entire painting. If vectors are the paint-by-number variety, raster images could be explained as being the actual painting – made with a brush or camera.

3 -vector -rasterVector images are shapes that can be colored or shaded, whereas raster images are made of tiny pixels.

What is a vector image?

Vector graphics are created by software such as Adobe Illustrator, CorelDraw, as well as a large number of other freeware and purchased apps (click here for a handy list of non-traditional vector software). Software programs like these provide tools to create shapes, such as lines, points, circles, curves, and rectangles.

WIth vector software, you can shade and color these shapes to create some rather stunning, realistic images, or use them to create simpler images like cartoons, charts and other images. Usually text can also be created with this software. Text can also be turned into points and shapes (this is referred to “converting text to paths” or “changing text to outlines”).

The cool thing about vector artwork is that you can make it any size, no matter how small or large, without sacrificing quality. If you create a vector logo, you can use it on a business card or a building, and it will be precisely the same in terms of clarity. You simply enlarge the shapes. Raster images, on the other hand, can be enlarged, but look bad when made too big.

4

This raster graphic shows the actual pixels that make up the image when enlarged 965%. When a raster graphic is increased in size for commercial printing it will either appear bitmapped or blurry, so it’s best to keep them at 100% and use the appropriate file size that’s best for your medium – whether that’s for the web or printing.

What is a raster image?

Raster images are made of a grid containing pixels. Each pixel represents a tiny, individual square of color. When you zoom out from the pixels far enough, you get see the image. Any photo you take with your phone or digital camera is a raster image. If you enlarge the picture (sometimes 900% or more) you can see each individual pixel. Also, images created in software like Photoshop are raster images. Raster images work with pixels, rather than mathematically-based software that creates lines and colors, as with vectors.

GIF, JPEG, and PNG file formats are the file types used for web graphics. These are all raster image formats. Raster images cannot be enlarged beyond a certain point, because they will appear pixelated.

Why won’t my web graphics work for printing?

Design clients frequently ask why the graphics they use on their web site cannot be used for brochures or catalogs. Technically they can be used, but they will look very bad. This is because websites use raster images, and raster images cannot be enlarged without an obvious decrease in image quality (your image will be blurry or appear bitmapped).

Websites use images that are 72 pixels per inch (72ppi), which means web graphics need to have 72×72 pixels in one inch to appear photographic and clear. Images sized this way for web graphics provide enough clarity for computer monitors, and allow websites to load quickly due to their small file size.

Since raster images get blurry when they’re enlarged, small raster files shouldn’t be used for commercial printing. Commercial printing can and does use raster images all of the time, but they are high quality images (240×240 pixels per inch, or 240ppi). While software like Adobe Photoshop will allow you to increase the pixels per inch to fit these specifications, the image looks really bad. Here’s an example below:

5 - enlarging raster images

Which side has greater clarity? The image on the left is 240 pixels per inch, whereas the image on the left was a 72 pixels per inch image, enlarged to work for commercial printing guidelines. The image on the right is much more blurry. 72 pixels per inch is fine for web graphics, PowerPoint presentations, e-mail and home inkjet printers, but not professional printing.

How can you tell raster images from vector images?

Here’s where things get tricky: without software to open the images, sometimes raster images and vector images look alike. The best way to tell them apart is by the type of file they are, which can be figured out by the extension appearing at the end of the file name. Here’s a little cheat sheet to help:

Common Raster File Extensions:

.BMP

.TIF

.JPG

.GIF

.PNG

.PSD

For a complete list of raster file extensions, click here.

Common Vector File Extensions:.EPS.AI.SVG

For a complete list of vector file extensions, click here.

Working with vector and raster images

The good news is that with the right software, you can change vector images to raster, or vice versa.

First we’ll work with the vector image to create a banner using the stock image above. StockUnlimited.com allows you to download either the .eps (vector) or the .png (raster) version of the file. For the banner, we’ll want to use the eps. version.

  1. Open the .eps file in vector software, such as Adobe Illustrator
  2. Create the banner size you want. Here we’re making a 48” x 36” banner.
  3. Place the illustration into the new file, and enlarge it to fit width-wise

6 - place the vector image in the new file

4. We’ll add a banner to the left that reads “Fresh Apples From Miller’s Orchard”. As a vector file, this can be saved and sent to a printer to print a large banner, without sacrificing any image quality.

7 - Fresh apples

Making a raster image from a vector file

To make a social media graphic, we’ll want to convert this to a raster image (that is, a JPG or PNG file) for posting online.

Since StockUnlimited.com offers both the vector and raster format for each image, we can download the .PNG version of this file and create a custom raster image for socia media using PhotoShop. But, here’s a much faster tip for creating your own raster image from a vector file.

Here’s how to save a raster file from a vector image for making web graphics or social media posts:

  1. Open the vector file you just created above.
  2. Take a screen capture of the image you created. (On a Mac this is done by pressing Command-Shift-4 at the same time; on a PC you simply press the “PrtScn” button.
  3. If using a Mac, the picture will automatically be saved to your desktop as a raster “PNG” file named “Screen Shot” with the date and time. You can rename this photo if you wish, or you can use it as is, for both web and social media.
  4. If using a PC, you have a couple of steps. First, by selecting the “PrtScn” your PC saved your screencapture temporarily. Next, open “Paint” which is a free graphics software that comes with Windows. If you’re not sure where it’s located on your computer, you can do a search for it, as shown below.

5. In Paint, hold the “CTRL” and “V” keys, and the screenshot will automatically paste into Paint. 6. Use the crop tool to crop the image down, and save as a JPEG or PNG file.

This way, your raster image looks exactly like the vector one you just created, and it’s ready for posting to your web site or social media page right away!

Leave a Reply

Next ArticleHow To Make Your Own Trophy Plaque