Explaining the difference between Vector and Raster image file formats is something we get asked quite often by our clients, so we thought an article on the subject might be useful to refer back to !
What is a Raster graphic?
A raster (or bitmap) graphic is any image that uses pixels (tiny squares each capable of storing colour value and opacity) to collectively make up the image.
When you zoom in closely to a raster graphic you can see how those tiny square pixels come together to make up the picture. Raster graphics are most commonly photographs or scans and are very often saved in .jpg format, but they could be .png, .tif, .bmp, .gif etc.
Raster graphics depend upon having a resolution, which is counted in .dpi (dots per inch). The lower the resolution the smaller the file size.
Low-resolution raster graphics would normally be set to 72 dpi and are used very often for web sites and presentations that are intended to only be viewed on a computer screen.
High-resolution raster graphics would normally be set to 300 dpi and are mostly used when the image is intended to be printed.
Because 300 dots are in every inch of a high-resolution raster graphic this results in a good, crisp, detailed image when printed. A low-resolution raster with only 72 dots per inch when printed would look inferior to a high-resolution version. The printed output could look blocky or jagged — this is because with only 72 dots in every inch you are starting to be able to see the pixels that make up the image.
High-resolution raster graphics wouldn’t be a good choice for web or screen use as the higher dpi wouldn’t be noticable at all (and so of no benefit) and the higher file size would mean the image takes longer to load into the webpage.
It’s worth remembering that a high-resolution graphic (300 dpi) can be resized and saved down to being a low-resolution version (72 dpi) — but you CANNOT scale up a low-resolution graphic to becoming high-res. If you try and do that, you will get a blocky, blurred and jagged image. So, when gathering assets for a project it’s advantageous to try and get hold of as high a resolution raster image as possible — as having too small an image is frustrating to find out that it doesn’t fit an intended purpose.
Raster graphics are often produced by using photo-editing such as Photoshop.
What is a Vector graphic?
‘Scalable line artwork’ is a good way to try an define vector graphics.
A Vector graphic uses paths (which can be a line, a square, a triangle, or a curvy shape) to make up the image. These paths can be used to create simple drawings, logos, maps or complex diagrams and are very often saved in .EPS format.
Vector paths are mathematically created and have individual properties assigned to them such as colour, fill, and outline.
If you zoom in on the paths (or lines) of vector graphics the line or curve you zoom in on will always be be sharp, in focus, and have smooth edges, this is because the line is reproduced by the same mathematical formula each time you zoom in, and so you do not get any blockiness associated with raster graphics as pixels are not used by vector graphics.
Vector graphics are resolution independent, they do not have a .dpi and so are not high or low resolution.
The file size of vector graphics is usually very small compared to raster graphics — this is because they do not carry the millions of individual pieces of pixel data information that raster graphics have to hold.
A Vector graphic can be scaled up to the size of a billboard or down to the size of a business card all from the same file.
Vector graphics are often produced by using object-based editing software such as Illustrator.
Putting the two formats together
You might produce Vector artwork intended for print such as a poster or leaflet that needs photographs (raster graphics) — that’s OK, a raster graphic can sit inside your vector artwork, just remember to use high-resolution raster graphics suitable for print quality output.
Bare in mind that this will bump up your vector artwork in file size.