Jabberwocky: Communicating with Your Graphic Designer, Part 2

Part 2: Image Size and Resolution

Countless times when asking for a logo file, I have been directed to a ministry’s website where I can right-click on an image and save it onto my hard disk for later use. This seems like a logical progression: here is the logo looking crisp and wonderful on the screen, and how much better it is to get the artwork this way than having to dig through years-old discs to find the original file.

In my endless quest to never print another pixilated image, I am writing in order to take a touch of the mystery away from the issue of image sizing and resolution.

Imagine that you want to construct a 12” tall letter ‘A’ from building blocks. You can choose to create your masterpiece out of Lego blocks or Duplo blocks. (Remember Duplo blocks – the big, chunky building toys too large for toddlers to swallow?) You are limited by size (12”), and you want the edge of the letter to be as detailed as possible. You would definitely use Lego blocks instead of Duplos to form the shape of the letter because they are smaller and allow you to include more detail in the sculpture.

Digital images work in this same way. Each image file has two variables, its dimensions, and its pixel density. Two images may have exactly the same dimensions as each other but would yield drastically different print results if their pixel density values were different.

You may have heard someone mention the terms ‘DPI’ or ‘PPI’ (Dots Per Inch / Pixels Per Inch). Referring to image density, the terms relate to the number of dots (or pixels) that can be found in a horizontal or vertical inch of the file.

Let’s say your church logo is a square that generally prints in a 1” x 1” area. If we prepared the file at 10 DPI, it would mean that 10 dots would form each row of graphic data and 10 dots would form each column of graphic data, for a total of 100 dots. Now imagine if I gave you 100 white and black Lego blocks and asked you to build a version of your logo out of them. The result would be pretty jagged.

The relationship between the dimensions of an image and the image density works like any good old-fashioned ratio. If I have an image that is 1” x 1” at 100 DPI, I can change the size to 2” x 2”, and the DPI to 50, and the image would not change quality at all. There still would be 100 dots forming each row of horizontal and each row of vertical information.

Onto the ‘magic’ numbers. If you are designing a piece intended to print, the minimum DPI you want to use is 300. Many professional printing companies will ask for 350, 600, or in some rare cases 1200 DPI files, but for the most part 300 is adequate.

For web design, all that is needed is 72 DPI. This is a major degradation of the image compared to the resolution of print images that are over 4X the size. Why is this?

The information displayed on computer monitors only displays at 72 dpi (in most cases), which is not all that much. If you snuggle up with your display, you will see that most the letters and shapes on display actually have fuzzy edges. This is called anti-aliasing. An alias is a five-dollar word for a little jagged edge that is created when a shape is produced at a low resolution. This sophisticated anti-aliasing process occurs every time you type a single letter in your email program.

Distance is said to be the great healer when it comes to graphic issues, and when you sit a foot or two away from your monitor, what once was fuzzy appears clean and crisp. Don’t be fooled though, the graphic designer who constructed your website took your nice crisp logo and down-sampled it to 72 DPI which will ONLY look good when displayed on-screen.

Printing presses, and even home inkjet printers are capable of producing a much higher volume of dots per square inch. Our eye is much more accepting of low resolution on our screens than it is with any printed material. There is a lot of mind-bending science as to why, but the important thing is to accept that this is true.

Have you ever tried printing a graphics-heavy web page? What was dramatic and lively on the screen becomes a pixilated, jagged, lifeless mess. The DPI issue is one of the major factors in the disappointing printout.

An image down-sampling is a one-way street. An image with a lot of resolution can always be scaled down further. Once the degradation has occurred, the only way to get a larger version is to return to the original file, make another copy and down-sample it to the new desired size.

So next time you wish to have your logo produced on a brochure, don’t go running for your home page, and whatever you do STAY AWAY from the right-click button. Open up the bottom desk drawer and dig out the original source file. You’ll be glad you did.