Tip of the Month: Vector vs Raster

Why cant I use my logo off our website to print a banner, poster or advert?

First, we need to understand a bit about file formats…

Ever seen a logo or image print really low resolution (fuzzy) and wonder what went wrong? or you’ve sent your logo to a designer or printer and had them tell you that it’s “not high res. enough”?

There are two basic formats that images can exist in – vector (geometric) or raster (also called bitmap). Bitmap speaks the language of pixels (also referred to as dots).

Pixels are like bricks, but square in shape. They are only one colour per pixel. A red brick wall can be defined as a red shape that starts at the bottom left point (coordinate) and finishes at the top right point (coordinate). Only 3 pieces of information are needed: start point, end point and colour.

A photograph, on the other hand, is like a brick wall where every brick is a different colour and hence every brick needs a co-ordinate and colour description.

Where clumps of the same colour exist, vector is the best file format. Where there are lots of different colours everywhere, like a photo, then raster is the best method.

Vector is a mathematical system that says ‘between these two or more points on the map please fill it with this colour, like dot to dot or the brick wall described above. Think of a puzzle where every piece within a certain body is exactly the same – a blue square would be the simplest example.

Raster, on the other hand, gives a colour and co-ordinate definition of each dot (otherwise known as pixel).

A logo is best created as a vector because there are, in majority of cases, blocks of colour and letters – H&R Block is a good example.A photo is best created as raster or bitmap image as each dot, or pixel, is different. ie there is a co-ordinate and colour description for every dot in the image.

Perhaps another way to think of it is organising a 1000 people into a shape on a football field. A vector organisation would say “everybody with blue scarves on stand in the goal square and stay within the white lines. A raster organisation would go around and individually place each person with blue scarves on in a particular spot within the same goal square. So as you can imagine it takes a lot less effort, and hence less information, to use the vector method. You may have even received a vector logo before and thought “this cant be right, its too small in file size to be high quality”.

When you stretch or scale up a photo or raster logo, it looks ‘pixely’ or ‘jagged’ because there is a limited amount of information now being stretched over a larger area so you are effectively zooming in on the pixels and making the limit of resolution/quality more obvious.

When you scale up a vector logo, the quality stays high because between those coordinates used for the information is still the same – a blue square is a blue square no matter what size it is.


Raster Vs Vector

If you are still lost, then simply look at the examples above. Figure 1 shows a vector version of our logo and figure 2 shows a raster version. It’s hard to pick the difference between the two, until you zoom in (or blow them up as you might for a banner or print advertisement). Figure 3 shows the vector version and figure 4 shows the raster version. So, zoom in or scale up a bitmap image and figure 4 shows the result.

Web Versus Print

Images intended for the web are optimised for the web, to be as small a file as possible to facilitate fast page load and download. Optimum resolution for the web is 72ppi (pixels per inch), referred to as dpi (dots per inch) in print. Optimum resolution for print is 300dpi, which means an image or logo pulled from the web can only be printed at 24% (72/300) full size. Hence what seems to be a big image on the web can only print small before its starts getting fuzzy.

Dragging images from the web – tsk tsk.

We often receive images and logos sourced from the web and sent to us to use in a flyer or banner. Dragging your logo off of your website is a no no. As described above, it will only print at approximately 25% of the size that you see it on screen. It will most-likely be a JPEG or GIF and optimised for the web. If somebody else has sent this to you, then ask them for one that has CMYK in the file name and EPS or AI as the file name extension.

Examples would be:

CMYK stands for Cyan Magenta Yellow Black
RGB stands for Red Green Blue (hence they didn’t use B for Black in CMYK)
SPOT stands for Spot Colour and refers to the corporate colours chosen for your brand / logo. Our orange, for example, is Pantone 021. Think of spot colour as a tin of paint specifically for that colour, rather than a combination of Cyan, Magenta, Yellow and Black to make the colour. Orange and green are really hard to reproduce well in CMYK- often looking a tad dirty.

Part of our Corporate Identity design process is to accompany the set of logos with a One Page Style Guide that illustrates and explains the different file formats and their purposes.

File formats

Common vector formats are EPS (encapsulated postscript) and ai (Adobe Illustrator). Common raster formats are TIFF, PNG, BMP, JPG and GIF.

The bottom line

1. Always try to supply logos in vector format, especially for print. Your company should have a vector version of your logo on file, perhaps even part of a style guide. It will probably have .eps or .ai at the end of the file name.
2. Drag anything from the internet and intend to use it for print and expect a poor result. Sure you can still use it, but really only at 25% of the size you see it on the web, and that will have little impact on the viewer.

So, to answer the question at the start of my long blah – sure you could actually use your logo from your website to print on a banner but it would look something like below.

This has been my take on the whole resolution syndrome – there is a wealth of information, perhaps more comprehendible than my attempt, on the web – just try googling vector v raster.