How Digital Images Works?

Think of a bitmapped image as a mosaic made from square tiles of various colors. When you view the mosaic up close, it looks like something you might use to decorate your bathroom. You see the individual tiles, not the image itself.

But if you back up a few feet, the tiles lose their definition and merge to create a recognizable work of art, presumably Medusa getting her head whacked off or some equally appetizing thematic classic. The colored pixels that make up an image work much like the tiles in a mosaic.

If you enlarge the pixels, they look like an unrelated collection of colored squares. Reduce the size of the pixels, and they blend together to form an image that looks to all the world like a standard photograph. Photoshop deceives the eye by borrowing from an artistic technique older than Mycenae or Pompeii.

Of course, there are differences between pixels and ancient mosaic tiles. Pixels come in 16 million distinct colors. Mosaic tiles of antiquity came in your basic granite and sandstone varieties, with an occasional chunk of lapis lazuli thrown in for good measure. Also, you can resample, color separate, and crop electronic images.

We know from the timeworn scribblings of Dionysius of Halicarnassus that these processes were beyond the means of classical artisans. But I’m getting ahead of myself. I won’t be discussing resampling, cropping, or Halicarnassus. First I address the inverse relationship between image size and resolution.

Size versus Resolution

If you haven’t already guessed, the term image size describes the physical dimensions of an image. Resolution is the number of pixels per linear inch in the final printed image. I say linear because you measure pixels in a straight line. If the resolution of an image is 72 ppi that is, pixels per inch you get 5,184 pixels per square inch (72 pixels wide × 72 pixels tall = 5,184).

Assuming the number of pixels in an image is fixed, increasing the size of an image decreases its resolution and vice versa. An image that looks good when printed on a postage stamp, therefore, probably looks jagged when printed as an 11 × 17-inch poster. Figure below shows a single image printed at three different sizes and resolutions.

These three images contain the same number of pixels, but are printed at different resolutions. Doubling the resolution of an image reduces it to 25 percent of its original size.

The smallest image is printed at twice the resolution of the medium-sized image; the medium-sized image is printed at twice the resolution of the largest image. One inch in the smallest image includes twice as many pixels vertically and twice as many pixels horizontally as an inch in the medium-sized image, for a total of four times as many pixels per square inch.

Therefore, the smallest image covers one-fourth the area of the medium-sized image. The same relationships exist between the medium-sized image and the largest image. An inch in the medium-sized image comprises four times as many pixels as an inch in the largest image. Consequently, the medium-sized image consumes one-fourth the area of the largest image.

Changing Printing Resolution

When printing an image, a higher resolution translates to a sharper image with greater clarity. Photoshop lets you change the resolution of a printed image in one of two ways:

  • Choose Image>Image Size to access the controls that enable you to change the pixel dimensions and resolution of an image. Then enter a value into the Resolution option box, either in pixels per inch or pixels per centimeter. A good idea (although not essential) is to turn off the Resample Image check box, as demonstrated in Figure below.

Turn off the Resample Image check box to maintain a constant number of pixels in an image and to change only the printed resolution.

If you leave it on, Photoshop may add or subtract pixels. By turning it off, you instruct Photoshop to leave the pixels intact but merely change how many of them print per inch.

  • Alternatively, you can ask Photoshop to scale an image during the print cycle. In Version 6, you hand down this edict in the new Print Options dialog box. Choose File>Print Options or press Ctrl+Alt+P to open the dialog box.

You can enter specific Width and Height values or enter a percentage value into the Scale option box. Lower values reduce the size of the printed image and thereby increase the resolution; higher values lower the resolution.

Photoshop saves the Resolution setting with the image; the scale settings in the Print Options box affect the current print job only. Together, the two determine the printed resolution. Photoshop divides the Resolution value in the Image Size dialog box by the Scale percentage from the Page Options dialog box.

For example, if the image resolution is set to 72 ppi and you reduce the image to 48 percent, the final printed image has a resolution of 150 ppi (72 divided by 0.48). At the risk of boring some of you, I briefly remind the math haters in the audience that whenever you use a percentage in an equation, you first convert it to a decimal.

For example, 100 percent is 1.0, 64 percent is 0.64, and 5 percent is 0.05. To avoid confusion, most folks rely exclusively on the Resolution value and leave the Page Options dialog box Scale value set to 100 percent. The only exception is when printing tests and proofs.

Because ink-jet and other consumer printers offer lower-resolution output than high-end commercial devices, you may find it helpful to proof images larger so you can see more pixels. Raising the Scale value lets you accomplish this without upsetting the Resolution value. Just be sure to restore the value to 100 percent after you make your test print.

Changing Page-Layout Resolution

The Scale value in the Print Options dialog box value has no effect on the size and resolution of an image imported into an object-oriented application, such as QuarkXPress or Illustrator. But these same applications do observe the Resolution setting from the Image Size dialog box.

Specifying the resolution in Photoshop is a handy way to avoid resizing operations and printing complications in your page-layout program. Always remember: Photoshop is as good or better at adjusting pixels than any other program with which you work.

So prepare an image as completely as possible in Photoshop before importing the image into another program. Ideally, you should never have to resize, rotate, or crop an image in any other program.

That tip is so important I’m going to repeat it: Never resize, rotate, or crop an image in Illustrator, FreeHand, CorelDraw, PageMaker, InDesign, or QuarkXPress. Get your image fully ready to go in Photoshop and then place it in the drawing or page-layout program, position it on the page, and leave it alone.

So What’s The Perfect Resolution?

After all this explanation of pixels and resolution, you might be thinking, “Okay, this is all very interesting, but what’s my bottom line? What Resolution value should I use?” The answer is frustrating to some and freeing to others: Any darn resolution you like. It’s true there is no right answer, there is no wrong answer.

The images in this article vary from 100 ppi for screen shots to 300 ppi for color plates. I’ve seen low-resolution art that looks great and high-resolution art that looks horrible. As with all things, quality counts for more than quantity. You take the pixels you’re dealt and make the best of them.

That said, I’ll share a few guidelines, but only if you promise to take them with a grain of salt:

  • Most experts recommend that you set the Resolution value to somewhere between 150 percent and 200 percent of the screen frequency of the final output device.

The screen frequency is the number of halftone dots per linear inch, measured in lpi (short for lines per inch). So ask your commercial printer what screen frequency he uses generally 120 lpi to 150 lpi and multiply that times 1.5 or 2.

  • Want to be more specific? For high-end photographic print work, it’s hard to go wrong with a Resolution value of 267 ppi. That’s 200 percent of 133 lpi, arguably the most popular screen frequency. When in doubt, most professionals aim for 267 ppi.
  • If you’re printing on a home or small-office printer, the rules change slightly. Different manufacturers recommend different optimum resolutions for their various models, but the average is 250 to 300 ppi.

Experiment to see how low you can go, though sometimes you can get by with fewer pixels than the manufacturer suggests. And don’t forget that the quality of the paper you use may be more to blame than a lack of pixels for a lousy print.

  • What if you don’t have enough pixels for 267 ppi? Say that you shoot a digital snapshot that measures 768 × 1024 pixels and you want to print it at 6 × 8 inches. That works out to a relatively scant 128 ppi.

Won’t that look grainy? Probably. Should you add pixels with Image Size or some other command? No, that typically won’t help. You have a finite number of pixels to work with, so you can print the image large and a little grainy, or sharp and small. The choice is yours.

  • What if you have a photograph or slide and you can scan it at any resolution you want? Flat-bed scanners typically offer two maximum resolutions, a true optical maximum and an interpolated digital enhancement.

The lower of the two values is invariably the true optical resolution. Scan at this lower maximum setting. Then use Image>Image Size to resample the image down to the desired size and resolution.

Orson Welles claimed that he relied on his inexperience when creating Citizen Kane. He didn’t know the rules of filmmaking, so they couldn’t hamper him. When his assistants and technicians told him, “You can’t do that,” he ignored them because he didn’t know any better.

I feel the same about resolution. Take the pixels you have and try to make them look the best you can. Then print the image at the size you want it to appear. If you focus on the function of your image first and fret about resolution and other technical issues second, you’ll produce better art.

Resolution of Screen Images

Regardless of the Resolution and Scale values, Photoshop displays each pixel on screen according to the zoom ratio. If the zoom ratio is 100 percent, for example, each image pixel takes up a single screen pixel. Zoom ratio and printer output are unrelated.

This same rule applies outside Photoshop as well. Other programs that display screen images—including multimedia development applications, presentation programs, and Web browsers—default to showing one image pixel for every screen pixel.

This means that when you’re creating an image for the screen, the Resolution value has no effect whatsoever. I’ve seen some very bright people recommend that screen images should be set to 72 ppi on the Mac or 96 ppi for Windows, and while there’s nothing wrong with doing this, there’s no benefit either.

When publishing for the screen, the Resolution value is ignored. So all that counts is the 100-percent view. That means you want the image to fit inside the prospective monitor when you choose View>Actual Pixels (Ctrl+Alt+zero) inside Photoshop.

I say prospective monitor because although you may use a 17-inch monitor when you create the image, you most likely need the final image to fit on a 13-inch display. So even though your monitor probably displays as many as 1,024 × 768 pixels, most Web and screen artists prepare for the worst-case scenario, 640 × 480 pixels.

This is the 13-inch VGA standard, shared by some of the first color Macs and PCs, most laptops, an endless array of defunct computers, and even televisions. Of course, a 640 × 480-pixel image would consume an entire 13-inch screen.

If you want the image to share the page with text and other elements, the image needs to be smaller than that. A typical screen image varies from as small as 16 × 16 pixels for icons and buttons to 320 × 240 pixels for a stand-alone photograph. Naturally, these are merely guidelines. You can create images at any size you like.