Vector and Raster image formats — Explained

Explain­ing the dif­fer­ence between Vec­tor and Ras­ter image file formats is some­thing we get asked quite often by our cli­ents, so we thought an art­icle on the sub­ject might be use­ful to refer back to !

What is a Ras­ter graphic?

A ras­ter (or bit­map) graphic is any image that uses pixels (tiny squares each cap­able of stor­ing col­our value and opa­city) to col­lect­ively make up the image.

When you zoom in closely to a ras­ter graphic you can see how those tiny square pixels come together to make up the pic­ture. Ras­ter graph­ics are most com­monly pho­to­graphs or scans and are very often saved in .jpg format, but they could be .png, .tif, .bmp, .gif etc.

Res­ol­u­tion

Ras­ter graph­ics depend upon hav­ing a res­ol­u­tion, which is coun­ted in .dpi (dots per inch). The lower the res­ol­u­tion the smal­ler the file size.

Low-resolution ras­ter graph­ics would nor­mally be set to 72 dpi and are used very often for web sites and present­a­tions that are inten­ded to only be viewed on a com­puter screen.

High-resolution ras­ter graph­ics would nor­mally be set to 300 dpi and are mostly used when the image is inten­ded to be printed.

Scal­ing

Because 300 dots are in every inch of a high-resolution ras­ter graphic this res­ults in a good, crisp, detailed image when prin­ted. A low-resolution ras­ter with only 72 dots per inch when prin­ted would look inferior to a high-resolution ver­sion. The prin­ted out­put could look blocky or jagged — this is because with only 72 dots in every inch you are start­ing to be able to see the pixels that make up the image.

High-resolution ras­ter graph­ics wouldn’t be a good choice for web or screen use as the higher dpi wouldn’t be not­ic­able at all (and so of no bene­fit) and the higher file size would mean the image takes longer to load into the webpage.

It’s worth remem­ber­ing that a high-resolution graphic (300 dpi) can be res­ized and saved down to being a low-resolution ver­sion (72 dpi) — but you CANNOT scale up a low-resolution graphic to becom­ing high-res. If you try and do that, you will get a blocky, blurred and jagged image. So, when gath­er­ing assets for a pro­ject it’s advant­age­ous to try and get hold of as high a res­ol­u­tion ras­ter image as pos­sible — as hav­ing too small an image is frus­trat­ing to find out that it doesn’t fit an inten­ded purpose.

Ras­ter graph­ics are often pro­duced by using photo-editing such as Photoshop.

What is a Vec­tor graphic?

‘Scal­able line art­work’ is a good way to try an define vec­tor graphics.

A Vec­tor graphic uses paths (which can be a line, a square, a tri­angle, or a curvy shape) to make up the image. These paths can be used to cre­ate simple draw­ings, logos, maps or com­plex dia­grams and are very often saved in .EPS format.

Vec­tor paths are math­em­at­ic­ally cre­ated and have indi­vidual prop­er­ties assigned to them such as col­our, fill, and outline.

If you zoom in on the paths (or lines) of vec­tor graph­ics 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 repro­duced by the same math­em­at­ical for­mula each time you zoom in, and so you do not get any block­i­ness asso­ci­ated with ras­ter graph­ics as pixels are not used by vec­tor graphics.

Res­ol­u­tion

Vec­tor graph­ics are res­ol­u­tion inde­pend­ent, they do not have a .dpi and so are not high or low resolution.

The file size of vec­tor graph­ics is usu­ally very small com­pared to ras­ter graph­ics — this is because they do not carry the mil­lions of indi­vidual pieces of pixel data inform­a­tion that ras­ter graph­ics have to hold.

Scal­ing

A Vec­tor graphic can be scaled up to the size of a bill­board or down to the size of a busi­ness card all from the same file.

Vec­tor graph­ics are often pro­duced by using object-based edit­ing soft­ware such as Illustrator.

Put­ting the two formats together

You might pro­duce Vec­tor art­work inten­ded for print such as a poster or leaf­let that needs pho­to­graphs (ras­ter graph­ics) — that’s OK, a ras­ter graphic can sit inside your vec­tor art­work, just remem­ber to use high-resolution ras­ter graph­ics suit­able for print qual­ity output.

Bare in mind that this will bump up your vec­tor art­work in file size.