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

Zoom In on the Best Image: Know Thine Resolution

Of course, this title is a play on the old saying, "Know Thine Enemy." It is a good comparison. If you always feel like you are just along for the ride when it comes to image resolution, I can guarantee you are not making the best of your image presentation. Misunderstanding resolution can hold you hostage to uninspired images, or worse, images with poor quality. Understanding resolution is the one tool you always need in order to decide what you can do with an image.

The first rule to know is that a pixel is a pixel is a pixel. That pixel may be tiny, minuscule, but it is still one pixel. Monitors have large pixels, but each one is still a pixel. You cannot divide a pixel. A pixel can only be one color. Period ... the law of graphics. A pixel is the only measurement that counts for Web images.

Image saved as 150 ppi, 17k file size.

Image saved at 72 ppi, 8 k file size.

While this has huge implications for everything that is displayed on the Web, we are only interested in how it affects image composition for this article, and I will keep my focus there. The trouble with so many deep topics like this, is that it is so easy to become distracted by a vast subject, that your brain never gets to settle on the practical pieces that can help in your day-to-day work.

Creating an image at a higher resolution than 72 pixels per inch for monitor display is a waste of download time. The images at the left look exactly the same, and they are, except for one characteristic. The top image was saved at 150 pixels per inch (ppi), and the lower image at 72 ppi. There may be minor variations in where the JPG compression occurred as the images were saved using different methods, but for the most part, they are identical on this page.

As an aside: If you print this page, the top image will have marginally better quality – a printer can use the extra resolution information. However, please do not sacrifice download time to make a printed Web page look better. If you must have printable images, link the low resolution image to a printing image with higher resolution.

The image at the right is two times the resolution of the image at the left. Note how the right sample has much finer detail.

Resizing Images
Let's think about what happens when resolution is dramatically reduced in a graphics program. The illustration at the left shows how the options increase when the resolution goes up. In the right sample, which has twice the resolution of the left, there are simply more options to create smooth lines. Notice how the antialiasing color (the pixels that mix the background color with the main color) in the right sample blends to present a smoother line, even at this close magnification.

The difference between the two illustrations also explains why an image will usually need to be sharpened when the resolution is reduced (see Sharpening Images). Imagine in the right sample, that you must remove half the pixels. In the solid color area, there will be no difference, but along the edge where color changes, and four pixels must become two (remember each pixel can only be one color) obviously, some detail must go. Graphics programs are very good at choosing which pixels to discard, but some contrasting edge pixels are always lost, making the resulting image less sharp than the original.

Increasing the size of an image simply makes the pixels bigger, not adding any new information for clear display.

You can make an image smaller, and correct sharpening to come out with a very good image. However, the same does not hold true for increasing image size or resolution. You only have as much information as is contained in the original image. Simply specifying a higher resolution does nothing but increase the file size. Sure, you have twice as many pixels, but where one pixel once carried one color, now you have a twin for that pixel. Some programs can make a good attempt at increasing resolution, but for the most part, you are not doing a thing.

What if you just make the image bigger? In that case, you will have exactly the same number of pixels, but now they are very big pixels (see the magnified view of the left image above with an increased size). Once again, you have gained nothing. Increasing the size of an image is very difficult. If you start with a high resolution image, always keep a copy of that original. If you accidentally reduce the resolution too much, reduce or crop the image too aggressively, you can return to the original image to start again.

Carry on to find how you can use resolution to zoom in on the portion of any image that you require.

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