Tips For Choosing Vector vs. Raster Images For Your Marketing Materials

When developing marketing materials for your sales staff or working on company branding, it is important to understand the mechanics (of the types) of images you should use. There are two types of images in the graphic design/printing industry: Vector Images and Raster Images. The key differences are broken down below:

Vector Image

• Mathematically placed dots with straight/curved lines to connect them
• Commonly used for print or illustrations
• Simple in detail, minimal color palette
• Very small file size
• Scalable without sacrificing quality (loss-less format)

Raster Image

• Composed of thousands of little color dots/pixels in a grid
• Commonly used for the web or photography
• Complex in detail, millions of colors
• Can be heavy in file size
• Can only be made smaller without sacrificing quality (lossy format)

Vector vs. Raster Up-scaling Comparison:
Say “hello” to our buddy, Tribey. We will be using him for this scaling example.

The original image is on the left side of each graphic. On the right side, notice when we scaled both images up, the vector image keeps its lines and details very crisp. The raster image, on the other hand, tries its best to simulate the up-scale, resulting in a boxy jagged edge blob (pixelation).

Example 1

Vector Graphic:

Raster Graphic:

Why is this important to your marketing materials?
This is a very important issue when graphic designers work with clients and marketing directors. Many times, they are not aware of the limitations of scalability of the images they own. For instance, let’s say their company wants to get a promotional poster made and wants to use the existing graphics from their corporate website. Usually, web-based graphics are created at a high compression rate – meaning it’s the lowest possible quality. This is because the higher the quality of web graphics, the longer it will take to load on the web page.

If you tried to copy and paste these graphics into a poster-sized file, the graphics will be microscopic. You can try to up-scale it but the result will be like Example 1, not a very pleasant sight.

So how do brand identity get around this?
One solution is to have a graphic designer “recreate” the graphics from the website into a usable vector format. These graphics can then be used over and over again for different print applications such as t-shirt designs, flyers, signage, billboards, etc.

Another possible solution is to take a look at the native website design files (in most cases, the file is .psd – an Adobe Photoshop native file). Depending on its contents, these files may or may not contain elements that can be up-scaled. Some web designers use vector images while creating the websites, some don’t.

After all this talk, what exactly are Raster Images good for?
There are actually many places where Raster Images are used. Besides the world wide web, digital photography is another major source. Although it is possible to “vectorize” a photo, it is not a practical method of reproduction. We have seen attempts where the graphic designer would vectorize photos in order to up-scale them for larger displays such as posters, tradeshow backdrops, billboards, etc., but doing this may cause undesired results, like Example 2.

Example 2

Vectorized Photo:

Raster Photo:

Here is what Tribe Design recommends:
The first step is to identify the type of project and what its contents are. If a print project needs photography then it calls for high resolution raster photos (print uses 300dpi). If your website needs photography, you CAN use the images used in the print project. Remember, you can always down-scale raster images for web (web uses 72dpi), not up-scale.

If a project needs simple graphics such as logos, icons, typographic fonts, symbols, etc., then they should be vector based. You can use vectors interchangeably for your website and print projects.

If you have further questions or need help developing marketing materials for your visual brand, contact Tribe Design today.