So what’s the difference, and why should we care?
A raster (or bitmap) image is made of thousands of little squares, or pixels. The best example of this is a photograph. Because each pixel has been assigned it’s own colour value, and there are millions of them in an image, raster images are rich in detail, which mimics realism. They are also large in file size.
You might not realize it, but a program such as Photoshop edits the colour of each individual pixel in your design.
Raster images have a maximum size and do not enlarge well. Increasing the number of pixels, or making the pixels bigger, results in the original data being spread over a larger area. This makes the image appear distorted and chunky, or grainy. The word resolution applies to raster images, and refers to the number of pixels or dots that make up the image. A high-res image will have 300+ dots per square inch, and be appropriate for print. A low-res image will have less than that, although computer screens only require an image to have 72 pixels per square inch to be clear. Printers print in dots, and print many more dots per square inch, than a computer displays pixels. The terms dots and pixels can be used interchangeably when referring to image resolution.
Websites are designed as raster images, because they don’t need to be enlarged, and because they are being viewed with a computer screen, which sees things in pixels. Photographs are raster images because at this time, the technology doesn’t really exist to make them vectors.
So what happens if you have a photograph, and you want to place it on the side of a bus? Camera companies charge thousands of dollars for cameras that shoot in high pixel density, or megapixels, which enables people to blow up their images. While some software claims to offer tricks to enlarge raster images, if your photo isn’t high-res to begin with, it’s just not possible to make it so.
The idea of a vector graphic is a little more difficult to grasp, since it involves some math, and a computer program that specializes in making them, such as Illustrator. In actuality, many programs create vectors, even Microsoft Word. Have you ever enlarged a Word document and noticed that the type remains clear and non-pixelated? That’s because Word is actually using math, and rendering that type as a vector graphic, even though you’re viewing it with pixels.
Note: Consider Type as a special vector, because not only is it being created with vectors, the program knows which letters you’ve chosen, allowing you to change the font. You can actually ask programs such as Illustrator to make vector shapes out of your type, which means the words cannot be edited any further, and will always remain the same. This is a good thing to do before sending a file to a printer, in case they don’t have your chosen font on hand.
A vector graphic is essentially created by playing a fancy game of connect the dots. Although Illustrator is a computer program, it does not think in pixels, the way Photoshop does. Using certain tools, a graphic designer places points onto a grid, and Illustrator connects them with lines. A complicated vector can even take on the resemblance of a raster image, although it will always remain noticeably unrealistic.
Vectors can only be viewed in vector-creating programs such as Illustrator, and in a pdf. In order to place them on the web, they must first be rendered as raster images, at the correct size. A printer automatically prints vector graphics at it’s highest possible resolution, which for most, is 300 dots per square inch.
Ok, so why use vectors? That’s a great question, and there is a good answer. Remember that photograph we wanted to place on the side of a bus?
If that image was actually someone’s logo, and it had been designed as a raster image, the original design would have to be big enough to suit it’s largest possible use, and therefor gigabytes in size. That isn’t very useful, and would only become problematic, not to mention pixelated, when the client decided they wanted it even larger, for the side of a building.
Creating a logo design as a vector graphic allows the image to be scaled to any size imaginable, without losing clarity. This is extremely important, because of the variety of uses a logo has.
I am often asked which format is ‘better’, and the answer is, neither. Each has it’s own uses. Designing in the wrong format can potentially lead to disaster, which is why it is vitally important for a graphic designer to be skilled in both.