|
 |
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
  
|
|
|
|
|
