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