Design Vocab: Image Resolution

There’s an old joke among graphic designers: My New Year’s resolution is 300 dpi. Yes, designers are a hilarious bunch, but when it comes to printing crisp and artifact-free images, we’re dead serious. If you want the images in your book to look professional and convey their information clearly (even if it’s just your all-important author photo), a basic understanding of image resolution is imperative.

What Is Resolution?

In essence, resolution is a measure of the amount of information (or pixels) contained within an image, relative to its physical dimensions. It’s most commonly measured in “dpi,” or dots per inch (“ppi,” or pixels per inch, means the same thing but sounds weirder).

The most straightforward method of describing an image’s actual size is to look at its total pixel dimensions. Let’s use an 8 × 10–inch image at 300 dpi as an example. To find the total pixel dimensions, multiply 8 by 300 and 10 by 300. Our example image weighs in at 2,400 × 3,000 total pixels. Obviously, an 8 × 10–inch image at 300 dpi (2,400 × 3,000 total pixels) is larger than an 8 × 10–inch image at 72 dpi (576 × 720 pixels). While the images are the same “size” when measured in inches, the first contains much more information. On the other hand, a 5 × 7–inch image may be “smaller” than our 8 × 10–inch example, but what if the resolution of the 5 × 7–inch image is 600 dpi? Then its total pixel dimensions are 3,000 × 4,200, the greatest of the bunch. All of this is to say it’s not enough to have “big” images. Their physical dimensions must match the size at which you wish to print them, but their resolution needs to be sufficient as well. For nearly all print purposes, 300 dpi is sufficient resolution.

Screen vs. Print (or: Huh?)

Because the majority of images we encounter today are displayed on screens, it may be difficult to understand why any of this is necessary. It’s easy for an image to look great on a screen because most monitors operate at the relatively low resolution of 72 dpi. (Of course, this is rapidly changing: Apple’s new “Retina” technology approximately doubles screen resolution, and many of our mobile devices as much as triple the old-school standard.) But the resolution required for a crisp print (300 dpi, remember) is still about four times that of a traditional monitor. That 8 × 10–inch shot you pulled from Google Images may look great in your browser, but it still needs about four times as much information to be ready for print. And unfortunately, there’s no way to make an image larger without seriously degrading its quality.

Image Formats and File Compression

So you’ve got your hi-res image—it’s 8 × 10 inches at 300 dpi (2,400 × 3,000 total pixels), it looks great, and it’s ready to go. What format should you use to save it? Today’s most common image formats are TIFF (pronounced the way it looks), PNG (pronounced “pee-en-gee”), and JPEG (“JAY-peg”), and all three involve some sort of compression. To avoid another wonkfest, let’s just say that image compression is a method of reducing file size (applied automatically by your graphics program as part of the Save As function) for easier transmittal via web, e-mail, etc.

There are two types of image compression algorithms: lossy and lossless. A lossless compression algorithm makes the file smaller without reducing image quality (i.e., without changing the appearance of the image). How this is accomplished is pretty fascinating but also definitely beyond the scope of this discussion. Lossy compression is performed at the expense of the image quality. The JPEG, king of the web graphics, uses lossy compression, while PNG and TIFF are examples of lossless compression. Are you pulling your hair out yet? Have I told you the one about the graphic designer’s New Year’s resolution?

 

Because JPEG compression degrades image quality, it’s best to avoid the format completely. Great for a website, not OK for print. (Yes, a high-resolution JPEG with minimal compression might look OK on the printed page, but why risk it?) Similarly, though the PNG format uses lossless compression, it was built specifically for the web (PNG stands for portable network graphic), so it’s best not to send one to a printer and assume she’ll know what to do with it. (A designer, of course, would know: convert it to a TIFF.) For printed images, you can’t go wrong with a TIFF. It was built for print and is almost completely universal.

Raster vs. Vector

Up until now, we’ve been discussing raster images. A raster image is one that is built out of pixels (whose name, I can’t not mention, comes from “picture-element”). Vector images, on the other hand, are built, essentially, out of math. The benefit of a vector image is that it doesn’t degrade when you resize it. The under-the-hood formulas that describe the image work independently of physical size, meaning resolution does not apply. A vector image, by its very nature, contains literally infinity dpi. Unfortunately, vector images can’t accomplish the level of detail that a raster image can. There’s no such thing, really, as a vector photograph. Vectors are best used for images featuring crisp hard-edged lines and geometric shapes. The most common example is a logo. Text can be said to be vector-based as well, since a font can be displayed sixteen feet tall and still maintain its sharp edges.

This is a lot to take in, and we’ve only scratched the surface. But if you can remember to set your image resolution to at least 300 dpi and your image dimensions to at least the size at which you’re hoping to print, and to use a file format with lossless compression (e.g., TIFF), your images will look as crisp as a freshly ironed oxford. Your designer may even thank you.