“V” is for Vector

Pretty as a Pixel

When most people think of images, they think of photographs. Photographs are bitmap (also called raster) graphics that are made up of pixels. A pixel is a little square of color and is the tiniest element in a photo.

An image’s resolution (how crisp and clear it is) is determined by the amount of pixels it contains. The more pixels in an inch, the better the resolution. This is why when you have print projects, your designer will request a 300 ppi (pixels per inch) image. You will also hear the term dpi (dots per inch). The two terms are often used interchangeably (but are not actually the same thing since dpi refers to printed pieces only).

Bitmap graphics are the familiar .jpg, .png, .gif, .tiff format files we tend to see online. Image editors such as Adobe Photoshop work primarily with bitmap graphics.

Photographs aren’t the only kind of images out there, though. What about logos, illustrations, and icons? These images are generally vector graphics, made using control points to draw lines and curves.

Vector graphics tend to be made and manipulated in Adobe Illustrator, and are saved into file formats such as .eps, .ai, .svg, and .pdf.

When to Use a Vector and When to Use a Bitmap

All of these terms may sound confusing, but here are two simple bits of advice to make your life easier:

• When your image is an illustration or can be easily reproduced as one using areas of solid color, it should be a vector graphic.
• When your image is photorealistic, meaning that it is either an actual photograph or uses a lot of 3-D effects, it should be a bitmap graphic.

What are the Benefits of Vector Graphics?

Glad you asked! Just like everything in life, there are pros and cons to consider when using vector graphics.

Let’s take a look at the pros first:

• Scalability. Vector graphics are made with control points, which create mathematical relationships between different points, lines, and curves to draw an image. Without getting too technical, this means that with vector graphics, computers can easily manipulate those mathematical relationships when changing the size of an image so that there is no loss of quality.
• Multimedia usage. Ease of scalability means vector graphics are ideal when creating a design meant to be displayed at various sizes or on different media because you can use the same design many different ways and resize easily each time. This includes printing on paper (stationery, business cards, programs); fabric (for embroidered clothing, tote bags and the like); or metal or plastic (pens, paperweights, keychains). It also translates well in digital media, such as video. If you need to use a single graphic in various ways, you’ll want to have it as a vector file. A vector can also be easily converted into a bitmap, while the opposite is not true.
• Sharper web graphics. Although your cell phone screen displays images in pixels, it is quite capable of rendering vector-based graphics. In fact, in web development there has been a huge shift in recent years away from using bitmap images whenever possible, particularly as mobile development has become important. Vector graphics provide improved clarity, faster loading time, and are easier to implement than a bitmap equivalent. If it’s not a photographic image, use vector graphics on the web.
• Smaller file size. Storing information in points, lines, and curves takes up a lot less memory than storing hundreds of individual pixels.

And now, the cons:

• Less precise color detail. The downside to building images from polygons is that photorealistic color and detail become much more difficult and time-consuming to create. That’s one reason why most logos are not photorealistic, particularly when built by non-experts. You’ll also find special effects a little harder to include.
• Difficult for non-experts to work with. Many non-industry people don’t have (or don’t know) the software necessary to manipulate vector graphics. Or they find it difficult to work with points, lines, and curves to create images — it’s a methodology that takes practice.

When Are Bitmap Graphics the Best Choice?

Now that we have addressed the pros and cons for using vector graphics, let’s do the same for using bitmap graphics.

First, the pros:

• More robust color data. The good thing about all those pixels that make up a bitmap graphic is that each holds a specific piece of an image, which, in high-resolution images, allows for a richly complex array of subtlety and detail.
• Easy to work with. As mentioned above, bitmap graphics cover a lot of different file formats, and most people have access to ways to manipulate – or at least open – several of these formats at any given time. And with programs like Pixlr or Photoshop so readily available, it’s easy to jump in and start playing around with bitmap graphics.

And now the cons…

• Larger file size. All those pixels take up a lot of memory, and the more detail, the more memory! That can make it hard to attach or send certain files, although there are more options than ever for data storage.
• Loss of image quality when resizing. You know how in NCIS/CSI/every crime drama ever made, whenever there’s a tiny blur in a photograph they’re able to “isolate” and “enhance” it to magically make it more detailed?
  
  Yeah, that doesn’t exist.
  
  If you’ve ever found or taken The Perfect Image, only to enlarge it to your desired dimensions and find that it looks grainy or blocky, you know what I mean. Remember, bitmap graphics are made out of pixels. While this does mean they hold more image data, it also means that once you zoom into pixel-to-pixel range, you don’t necessarily see a bigger picture—just bigger pixels.

Give It to Me Straight

The type of image you need for a project will depend on its use. Since your company’s logo is going to be used in a variety of ways and at a variety of sizes, you should ALWAYS have a vector file of your logo. If you don’t, contact your original designer and ask for it. A professional designer should be able to provide you with this. If you can’t get your hands on the vector file, your only option is to have a designer redraw your logo as a vector.

If you need to have a 20-foot banner created and all you have for photos are the 72 ppi images you saved from your website, you are in for a big disappointment. For large format pieces, if you don’t have bitmap graphics that are high quality enough, you will need to consider how you can use vector graphics instead.

A graphic designer will consult with you to figure out the best option for your needs. When working with a professional, whether for web, printing, or design, be sure to always ask about the image requirements for your project.