One of the most confusing aspects of dealing with digital imagery is resolution—specifically, what it really is and how changing it affects an image.

In this article we’re going to talk about the relationship between resolution and pixels and what it means to you. We’ll discuss how to resize an image from your digital camera for print, for email or a web site, and finally, to perfectly fill a presentation slide. We’ll also touch on the best file formats to use for each situation.

Before we get started, let’s chat briefly about resolution in general.

What is resolution?

Simply put, image resolution is the number of pixels displayed per unit of printed length. It’s a measurement used for printing (hence the phrase “of printed length”), and it’s usually stated in pixels per inch (ppi—used when referencing onscreen images) or dots per inch (dpi—used when referencing a printed image because printers print dots).

The way resolution affects an image is thus: For a given number of pixels (width by height), the higher the resolution, the closer the printer will pack those pixels together in order to make a beautifully smooth, sharp print. However, the closer the pixels are packed together, the smaller the image will be printed physically. Conversely, the lower the resolution, the more loosely the pixels are packed together and the larger the image will be physically, though it will print badly.

Since monitors can only display a certain amount of information that our eyeballs/brains can process, resolution really only matters to printing devices (and scanners, but that’s another subject). Resolution doesn’t mean a hill of beans until that image is headed for a printer, for only a printer knows what to do with that number. Your monitor just doesn’t care. A 72 ppi image will look exactly the same as a 3000 ppi image onscreen. Honest.

So how much resolution do you need to make a gorgeous print? It depends on the printer. While the current crop of consumer-level inkjets do a fine job at 225-250 dpi, a professional service bureau may require 300+. A black and white laser printer (think newsletters) will happily produce 150-200 dpi images. If it’s your own printer, run a few tests. If someone else is printing it for you, ask what resolution they need.

What’s a pixel?
I won’t bore you to tears with a dissertation on how the smallest picture element of any digital image is called a pixel and how images are displayed in tiny blocks (also referred to as dots) of color that together form an entire image (or maybe I just did). That’s a pixel, and for the most part creative types have been brainwashed not to pay attention to pixel dimensions, but to pay attention to resolution instead. Again, this is true when it comes to print, but not so much any other time.

But why should you care?

Because any file—the same file—can be measured at 72, 300, or 3000 ppi, its pixel dimensions are what matters, not its resolution. But because you’re going to encounter 72 ppi files that must be printed, you need to understand how to change resolution without changing pixel dimensions, thus altering image quality.

Resizing an image for print
For example, let’s take a photo shot with a high-end digital camera. If I pop open the image in Photoshop (or Photoshop Elements) and take a peek at the Image Size dialog, I can learn its pixels dimensions and resolution. Here’s how:

In Photoshop, choose Image > Image Size, or in Photoshop Elements, choose Image > Resize > Image Size. TIP: In either application, just press Command + Option + I on a Mac, or Alt + Option + I on a PC.

As you can see, this photo weighs in at 3072 x 2048 pixels and 72 ppi. Does that mean it’s low-quality and unsuitable for print? Negative. Here’s why:
1. At the bottom of the document window, you can see that the file itself is indeed large—it’s 18 MB (circled in red).

2. Note the pixel dimensions shown in the upper portion of the Image Size dialog: 3072 x 2048 (also circled in red). Remember those numbers for a second.

3. Note the honking big physical dimensions of the photo. If I were to try printing this thing at its current resolution it’d be over 42 inches by 28 inches.

Watch carefully as I increase the resolution of the image without messing with the number of pixels. Here’s how:

At the bottom of the Image Size dialog, uncheck the Resample Image option. This magical, all-powerful option locks the number of pixels contained in the image, thereby locking image quality. Enter 300 into the resolution box and look what happens:

The image is now 300 ppi and the document (physical) size has decreased to roughly 10 x 6.5 inches. Take a peek at the pixel dimensions toward the top of the dialog. See how the physical dimensions of the image changed but the pixel dimensions didn’t? I have exactly the same number of pixels I started out with: 3072 x 2048; they’ll just be packed more tightly together when they hit the printer. Furthermore, notice how the file size didn’t change at all? It’s still 18 MB, as evidenced in the document window and in the Image Size dialog (another clue that the pixel data didn’t change). I didn’t change the quality (pixels), I just changed the print measurement (resolution), which only affects the printed image.

Admittedly, this is confusing because the onscreen image didn’t change a bit (see earlier paragraph on monitors, eyeballs, and brains). The truth is only revealed by the Image Size dialog.

What you need to remember
As long as you uncheck the Resample Image option, you can tweak the resolution ‘til the cows come home and you won’t alter the image quality, ever. However, if you leave the Resample Image box checked and increase the resolution, you’ll be practicing a dark art called upsampling, wherein you’re adding information (pixel data) to the image that wasn’t originally there. It’s usually a very bad idea; unless, of course, you’re in a real pickle or you’re going for that chunky look in your design.

Continuing on, let’s look at how to resize an image and change its resolution at the same time.

Changing resolution and resizing simultaneously
Back in the land of Photoshop and/or Elements, you can resize an image at the same time you change the resolution by using the Crop tool.

Step 1: Press C to select the Crop tool in either software.

Step 2: In the options toolbar at the top of the screen, enter the dimensions and resolution you desire. For instance, let’s resize an image to fill a 3 x 4 spot in a b/w newsletter. Enter “3 in” by “4 in” and 200 in the resolution box (using the resolution guidelines we discussed earlier, we know we can get away with 200).

Step 3: Draw a box around the important bits of your image and when you get it just right, press Return to accept the crop.

TIP: Be sure to include the unit of measurement in the width and height boxes, as shown above. To exit a Crop altogether, just press the Escape key.
Step 4: Choose File > Save As and pick TIF from the file format pop-up menu. TIFs can be opened in most software and are a high quality file format (also called lossless), which will touch on a bit later. If you need to email the file to someone else to print, you’ll want to compress it so it’s email friendly. On the Mac, Control click (or right click) the document icon, and choose Create Archive from the contextual menu.

Resizing images for email
To resize a large image for email, follow the exact same steps as above though be sure and leave the Resample Image box checked. In this case, we want the number of pixels to be reduced so the file size will be smaller and will transfer over the Internet faster. Either summon the Image Size dialog like we discussed earlier or use the Crop tool, as shown below:

Step 1: Press C to select the Crop tool and enter “240 px” by “320 px” as shown in the screen shot below (this is a nice photo size for email). Leave the resolution box blank. (Remember, in the Onscreen Only Realm resolution doesn’t matter. If you enter pixel width and height and you are not printing the image, leave the resolution box blank.)

Step 2: Draw a box around the important bits of the image and press Return to accept the crop.

Step 3: Choose File > Save for Web and pick JPEG as the file format. The JPEG format compresses the photo so it takes up less hard drive space. As a result, the file is lower in quality (also called lossy). Luckily, you can pick just how “lossy” it gets. If you’ve practiced restraint and sized the photo down to 320 x 240 pixels as suggested, reward yourself by choosing the High quality setting. The file will still be nice and small and you probably won’t see much difference between the compressed version and the original. However, in the dialog shown below, you can see a large difference between the original file size (225K), and that of a high quality JPEG (22.46K).

Step 4: Press OK and give the photo a new name. You’re now ready to fire it off as an email attachment to your entire address book. Kidding.

Resizing images for a web site
The exact same technique applies for resizing images for the web, though choosing file format gets a little more complicated. As far as image sizes, below is a handy table for reference. These sizes aren’t set in stone, they’re merely suggestions (after all, the whole world isn’t yet enjoying broadband speeds).

Resizing images for presentations
What size image do you need to fill a presentation slide completely? It depends on the size of your slides, which depends on the device you’re delivering the presentation upon. Below is a table of guidelines applicable for the current state of projectors.

Before you add images to your slides, you need to make sure they are sized correctly. Adding imagery that exceeds the pixel dimensions mentioned above can result in slower presentation playback, or worse, a software crash.
To resize an image for a slide, we’ll repeat the exact same process we’ve done before, and use either the Image Size dialog or the Crop tool. I like using the crop tool because all images aren’t the right aspect ratio for slides.

Step 1: Open the image in either Photoshop or Photoshop Elements and press C to select the Crop tool.

Step 2: Enter the dimensions in the options toolbar at the top of the screen. For example, let’s pretend we’re presenting on a high-definition projector. Enter “1280 px” by “720 px” and leave the resolution box blank. NOTE: Be sure to enter “px” as the unit of measurement.

Save the file as a JPEG or PNG. Most stock photography is available in JPEG format, which is great. PNG is a relatively new file format, and though you can’t be 100% sure it’ll display properly in a web browser just yet, an onscreen presentation is a prime opportunity to use it. PNG files work better in slide shows for a few of reasons:

1. PNGs support transparencies, you can knock out an image’s background so the slide background shows through, instead of The Dreaded White Box.

2. PNGs support more colors than JPEGs.

3. PNG is a lossless file format, meaning the quality of the image doesn’t degrade when saved, like JPEGs do.

A final word on file formats
We’ve touched on file formats here and there, though let’s nail it down a bit. The images we’ve discussed so far have all been comprised of dots (pixels). These are called raster or bitmap images. Use the table below to find the right file format when saving bitmap images.

Vectors
There is another graphic file format we haven’t talked about, called vector art. Native Adobe Illustrator and Flash animations are vectors. Instead of being made up of millions of pixels, they are made up of a series of points and paths based on mathematical equations which, when interpreted by a computer or printer, form an image. These file types include: Adobe Illustrator files (AI), Encapsulated PostScript (EPS), and Flash animations (SWF).

What makes vector art so cool is that because there are no pixels involved, it’s infinitely scalable with no quality loss. You also don’t have to worry about resolution because, again, there are no pixels to pack together. The process of converting a vector into a bitmap (or pixels) is called rasterizing; however once this is done, the image cannot be increased in size without suffering quality loss.

In conclusion
A picture truly is worth a thousand words and there’s just no better way to communicate than through compelling imagery. Stock photography has finally become affordable, thanks to folks like iStockphoto.com; however, if you don’t understand how to resize images appropriately, they won’t do you much good. Therefore, I hope this article has helped to clear up whatever resolution confusion you might have had. Now, go forth and create beautiful imagery and communicate your message loud and clear!

Peace and love to you all.