Vectors, Bitmaps, and DPIs…oh my!

Bitmaps

A rose by many names: raster files, high-resolution, print-friendly, justgivemetheimagealreadyren.  These are images constructed by pixels and come in a large number of file formats: JPEG, GIF, PDF, PSD, TIFF, PNG.

Because these types of images are made up of pixels, the more you zoom in or resize an image, the more you run into the problem of degrading the quality.  Ever upload a small picture to your Facebook cover and it stretches out and looks all “blurry”?  That’s the problem with raster images; clarity isn’t preserved with resizing.

But what are DPIs and “high-resolution” images?

DPI stands for dots per inch and applies specifically to hard copy prints.  Think about dot matrix printers versus laser printers and the comparison of print quality.  More dots, more clarity.  Thus, when prepping files for printing, we use 300dpi or more.

So why can’t the photo on my website work for the flyer you’re designing?

Web graphics are 72 dpi. Low resolution, lower file size.  Lower file size, faster page loading!  So when we’re asked to make a 72dpi file into not only a larger size physically (make my tiny web ad into a 4’ banner!) but also be print-friendly, it just ain’t happening.

Vectors

Think back to high school geometry and your magical TI-84. With the right equations (and boring lesson plan), you could make some awesome images with enough patience.

Vector images work on a similar principle. They consist of shapes defined entirely of mathematical equations.  As a result, no matter how far you zoom in or resize a vector, the clarity and quality remains sharp.

Vector files are best used for logos due to this very reason.

Note: pasting a photo into Adobe Illustrator and saving it does not make it a vector.

Is this the right file?

Common file formats for vector files can be EPS, AI, and SVG.

The confusion around vector files often lies in many users being unable to open those file extensions (ahem, Windows users) and not getting to see the difference.  Files with the .ai extension are created in Adobe Illustrator the same way .psd files are created with Photoshop.  Not having either of those programs to open files of these types can certainly cause frustration if you’re trying to figure out if a file is the right one or not.

Do your best to request (and if you’re a designer, save) files in EPS or SVG so non-Adobe viewers can preview files. 

Hint: SVG files can be opened with a web browser.  EPS files can be opened in newer versions of Microsoft Word (just never, never save it as a DOC). If you’re on a Mac, don’t complain; you can open all those files in Preview.