Raster and Vector: What’s the Difference?
This article was originally created by Caitlyn Hymer as a YouTube video and was later adapted into a blog format for Absorb Studios.
In the design world, you may hear the words raster or vector and unless you’re already familiar with one or the other, those words probably sound pretty abstract. Today, we’ll be talking about what raster and vector files are and what each one is used for.
The quick overview would be that vector graphics are infinitely scalable without pixelation and raster images are made up of pixels, which means that they can only be scaled to a certain point before they become pixelated.
Vector graphics
Vector graphics are rendered by a computer using a mathematical formula which consists of anchored dots that are connected by lines and curves. These do NOT have pixels! Because vectors are not made with pixels, they are known as resolution independent, which makes them infinitely scalable.
Vector lines are sharp and they won’t have any loss in quality or detail, no matter what size they are. These graphics are also device-independent, which means their quality doesn't depend on the number of dots available on a printer or the number of pixels on a screen. And since vectors don’t really have a resolution, their files are relatively small depending on the elements inside of the file.
So, what are vectors used for? Well, they can be used for a lot of things like logos, billboards, motion graphics for videos, icons, website graphics. Some of the most common file formats for vectors are AI, EPS and SVG.
Raster files
Raster files are made of pixels that use color and tone to produce images. Pixels appear like little squares on graph paper when the image is zoomed in or enlarged. Each raster image can only contain a fixed number of pixels and the amount of pixels determines the quality of the image, which is also known as the resolution.
Generally, more pixels results in a better quality raster image, but this also increases the size of the file and the amount of space it takes to store the file. The lower the number of pixels, the lower the resolution which limits the size the image can be scaled up without becoming pixelated. However, a high resolution image printed at a small size can also cause the pixels to cram or bleed together which can make the image look just as unprofessional as not having enough pixels in a large image.
So, what are raster files used for? Photographs taken from a camera or phone are raster files. Some of the most common file formats for raster images are JPEG, PNG, GIF, TIFF and PSD.
How can you tell if your file is raster or vector?
Well, looking at the file extension like JPEG or EPS may help, but that doesn’t always give you the right answer because it is possible for a raster image to be saved as a vector file without it actually being vectorized. Oooooh, this gets tricky!
So, the only way to tell is zoom all the way in on the file. If you zoom in and see pixels, it's a raster file. If there are no pixels and only smooth lines and colors, it’s a vector file.
How do you know when to use raster or vector files?
Well, a few key things to consider would be:
Raster files are great for photos
Raster files can become pixelated
Raster files have a limited resolution, depending on the file
Vector files are great for graphics
Vector files can not be pixelated
Vector files can easily be rasterized, but raster files (especially photographs) can not easily be vectorized.
So as a recap, for clear images like photos that convey subtle changes of color, shade, and light, raster images are perfect despite their loss of quality at larger scales and occasionally large file sizes. For scalable designs, vector graphics are ideal. To cover all of your bases, have your design in both formats, or in vector form to be converted later….. Unless it’s a photograph.
