Zoom In on the Best Image pg 3: Production Graphics with Wendy Peck at webreference.com

Zoom In on the Best Image: Taking Advantage of Resolution

In the previous pages, I presented resolution as a problem to overcome, and an issue to understand in order to prevent reduced quality. However, differences in resolution can also help you to compose your images. There is one more factor in the resolution equation that is as important as the stated resolution – image size.

Note: I will try to step through this carefully. I have seen this issue confuse some people in every graphics class I have ever taught, so don't think I am being patronizing if I over-explain.

When you make decisions about resolution, you must also be working with the image size information. I have included a picture of a rabbit at the left. This image is 240 px by 298 px, and has been saved at 150 ppi. Of course, you know that 150 ppi is too large a resolution for a monitor view, and so this image can have some information discarded. You could simply specify that the resolution be changed to 72 ppi and it would look exactly the same, even though half of the pixels in this image would be tossed away.

What if you did not want the entire rabbit? Maybe your site needs an up close and personal bunny – because there is extra resolution available, we can do that, yet keep the image just as large.

In the sample at the left, I have cropped the image tighter to the rabbit's face (it does need something to butt up against where it was cut off to look great, but that is not our concern for this discussion). The image size is now 167 px by 188 px. But the resolution is still 150 ppi. Doing a rough math calculation, the new image is approximately 2/3 the size of the original. But the resolution is double what we require for the Web. Put very simply, we have room to move. Because less than half of the pixels will be discarded, and we have room to discard more than half, we can increase the image size to 240 px wide at the same time as we reduce the resolution to 72.

Meet our new, "reach out and touch" rabbit. I did increase the contrast and sharpened this image to bring out the detail in the fur. In addition to the lesson on enlarging images, can you see how the impact of the image increases for the closer look? I don't think anyone would have trouble identifying this image as a rabbit. If you can give the visitor less and reach the same goal, it is my policy to do so. If half a rabbit does the job, look for ways to exploit that fact, like increasing the display size to create a compelling image. Who could resist those eyes? Now look back at the original. Did you even notice the eyes? I bet you did not. They were too small, and there was just too much rabbit to take in to concentrate on one part.

Just to make sure there is no doubt, at the bottom of the page, I have included an enhanced version of the full rabbit, at 72 ppi and 240 px wide. In my opinion, even the high quality full rabbit would not add the same impact to a page as the cropped version that draws you right into the image.

Always keep resolution AND image size in mind when you are working with photos. Many packaged or downloaded images are provided at 300 dpi, which provides plenty of resolution for a Web designer to use only pieces of the image.

Also, having provided the safe way to reduce your resolution ... you can also "fudge it." Web images are prepared on a monitor and viewed on a monitor. If it looks good, even though you have increased the size to a larger size than the numbers allow, use it. Applying the techniques described in Web Photos that Pop can save an image that becomes too fuzzy from over-enlarging.

With the basics of resolution covered, let's take a look at a few techniques to crop effectively, and remove backgrounds.

Next page

Zoom In on the Best Image: Tutorial Index

Photo Composition for the Web
Know Thine Resolution
Taking Advantage of Resolution
Finding the Right Portion of an Image
Removing Backgrounds