|
Pro Secrets:
Preparing Photos for the Web using Photoshop
by
Ian Plant
Of all the image
processing problems I have faced over the years,
none have vexed me more than the question of
preparing and saving images for the web. The problem
is simple: of all the thousands of computer monitors
used by viewers of your work worldwide, not a single
one will be calibrated in an identical fashion to
yours. So, no
matter what you do, it is impossible to ensure that
viewers see your images exactly as you do on your
own computer. Don’t give up yet,
however: even though monitors
aren’t all calibrated to a universal standard, they
end up being—for the most part—close enough. And,
there is a (mostly) standard way that web browsers
view images—they use what is known as the sRGB color
space (more about that later)—which helps make up
for the variability of monitors. Besides,
successfully preparing images for the web does not
just involve the semi-quixotic pursuit of color
management. You also need to ensure that your files
are sized and sharpened appropriately for web
viewing. So, despite monitor calibration
variability, there is a lot you can do to ensure a
positive experience from viewers worldwide of your
photos—which, hopefully, can translate into an
increase in exposure and incoming cash resulting
from a growing photography business!
Proper preparation
of image files can ensure that color, sharpness, and
file size are optimum for web viewing.
I've tried many
methods of preparing and saving photos to the web
over the years,
with mixed results. During that time, I have refined my workflow, and tested it on multiple
computers to ensure accuracy and consistency. Before
writing this article I also consulted with several
of my
Mountain Trail Photo team
members (Richard Bernabe, Jerry Greer, George Stocking, Guy Tal, and Joseph Rossbach). So I'm reasonably confident that the
resulting workflow represents current best practices. I've tried to keep this simple, and
I avoid a lot of the high-brow tech stuff, so for
those web experts out there, please pardon my rather
glib explanation of how all this works.
My workflow is easy
to learn and even easier to implement—once you get
the hang of it, you should be able to prepare a
photo for the web within a matter of minutes,
perhaps even seconds. Please
note that the workflow I provide below is shown
using Photoshop CS4, which is my current version of
Photoshop. Previous and subsequent versions of
Photoshop might have some variations, and users of
other image editing platforms will have to figure
out how to accomplish the same things within the
parameters of their programs.
So, without further
ado, here it is!
Step One: Resize
When resizing a
photo for the web, you have to keep two things in
mind. On the one hand, you want your photo to be
large enough for people to notice and enjoy. On the other hand, you want to make
sure that the photo is not too big; large
files take longer to download and cannot be easily
viewed on standard sized monitors. The
“size” of your photo can actually be measured
several ways:
∙ By dimension,
usually expressed in pixels, for example 750
pixels x 525 pixels.
∙ By resolution,
expressed in ppi (pixels per inch). Sometimes
the somewhat archaic dpi is used instead
(dots per inch), which is a holdover from the days
of printing. The
“standard” resolution for web viewing is 72ppi.
∙ By file size,
expressed in kilobytes (KB)—or if large enough,
megabytes (MB), gigabytes (GB), etc. File size is
affected not only by the dimensions and resolution
of the image, but also by the amount of detail and
colors in an image.
If posting to a photo
sharing website or forum, check the site’s rules and
regulations concerning image size limits. Most will
specify a maximum dimension as well as file size.
For example, one of the sites I use to share my
nature and wildlife photographs,
Nature Photographers Network, specifies a
maximum image size of 720 pixels on its longest
side, with file sizes no larger than 200KB.
As a general rule of
thumb, you want to avoid sizing your image too large
for the “average” viewer to see at once without
scrolling. What is the “average” viewer? It’s a fair
bet that many, if not most, of your viewers will be
using a 17” screen, which doesn’t leave a lot of
room. Any image larger than 800 pixels wide will
force many viewers to scroll horizontally to see the
entire image, which you want to avoid. It is usually
best to size your image to avoid vertical
scrolling as well, but since websites are
typically designed to scroll vertically, it isn’t as
much of an issue as horizontal scrolling. If it
helps any,
for my personal website, I size
horizontal images no wider than 750 pixels, and
vertical images no taller than 600 pixels.
When I resize images, here’s how I do it. From the toolbar,
I select Image, and then Image Size
(Figure 1-1).
Figure 1-1
This pulls up the
Image Size window (Figure 1-2).
Figure 1-2
First, I make sure
that the “Constrain Proportions” and “Resample Image” boxes
are checked. I usually select Bicubic or Bicubic
Sharper as the rendering engine for shrinking my
images. Bicubic Sharper actually does a pretty good
job at sharpening an image during the reduction
process, so for most uses it will work best. I then
set “Resolution” at 72 pixels/inch. Last, I set the
image dimensions—for this example, I
sized the image at 750px wide. Because the "Constrain
Proportions" box is checked, Photoshop
automatically chooses the corresponding height.
Press OK and you've resized your image!
When you resize your
image for the web, you will notice that your file
size shrinks considerably. We’ll shrink it even more
later, without affecting the image’s dimensions. But
first, we need to sharpen the image for proper web
viewing.
A properly sized
image: not too big, not too small, just right for
web viewing.
Step Two: Sharpen
Because web files
are very small, you want to apply sharpening lightly
to avoid over-sharpening the image. What you want to
achieve by sharpening is an image that looks crisp,
without building up any noticeable artifacts (the
dreaded "jaggies" that make your image look like it
was run through a cheese shredder). Jaggies and
other sharpening artifacts such as halos typically
show up most in areas of the image with sharp and
distinct edges, such as dark trees sticking up into
a bright sky.
To avoid the jaggies, I
sharpen using very small incremental amounts. Here’s
my method. First, make sure you are viewing the
image at 100%. Then, from the toolbar, select Filter,
then Sharpen, then Unsharp Mask
(Figure 2-1).
Figure 2-1
This pulls up the
Unsharp Mask window (Figure 2-2). I set “Amount” to
200%, “Radius” to 0.2 pixels, and “Threshold” to 0
levels. Basically, this applies a very small amount
of sharpening to the image. Typically, I
apply Unsharp Mask more than once, gradually
sharpening the image until I feel I’ve found the
desired result. On average, I apply Unsharp Mask twice
to an image that I am posting to the web. On rare occasions,
I apply Unsharp Mask only once, or up to three or four times,
depending on how sharp or soft the native file
appears when resized.
Figure 2-2
As I mentioned
above, you want to achieve a look that is crisp, but
not jaggy. My personal
preference is to err on the side of soft—too much
sharpening just doesn't look very professional, in
my opinion. Figures
2-3 through 2-5 below shows some examples of under,
over, and "just right" sharpening.
Figure
2-3 below shows an image before sharpening. It actually
doesn’t look all that bad, just a little fuzzy—although,
to be fair, part of the fuzziness comes from the
egret itself! This file would actually look fairly
good on the web, reinforcing my point that you want
to sharpen lightly.
Figure 2-3
Figure 2-4
shows an image with a "proper" amount of sharpening.
The image has been Unsharp Masked twice, using the settings above. The
sharpening effect is very subtle. Some detail has
been pulled out nicely, without creating too many
unsightly sharpening
artifacts.
Figure 2-4
Figure 2-5 has been
blasted with Unsharp Mask six times. Everything
looks crisp, but there are a lot of
sharpening artifacts that detract from the image's
quality, mainly on the edges of the feathers.
Figure 2-5
Advanced Tip: If you are comfortable working with layer masking,
then here’s an easy method for fine tuning your
sharpening to avoid unsightly artifacts (if you
don't know anything about layer masking, skip this
part and go on—or
learn about layer masking and come back). Before
sharpening, create a duplicate layer. Apply Unsharp
Mask to the duplicate layer. Sharpen to taste, and
don’t worry about artifacts that might appear here
and there. Then, create a layer mask, and using the
paintbrush tool, mask out areas that show
significant over-sharpening, either using the
paintbrush tool at reduced opacity to reduce the
sharpening effect to an acceptable level, or at 100%
opacity to remove the sharpening effect completely
from the problem areas. By using a layer mask, you
can fine tune the amount of sharpening you wish to
deliver to each part of the image, ensuring optimum
image quality every time.
Step Three: Save for
Web
Finally, we’re ready
to save for web! This is the easy part. From the
toolbar, select File and then Save for Web
& Devices (Figure 3-1).
Figure 3-1
Now we enter into the Save
for Web window (Figure 3-2).
Figure 3-2
The Save for Web window
allows you to do all sorts of stuff, such as select what
type of file you want to create, alter the quality of the
image to reduce file size, and a whole other bunch of
interesting things.
First, the easy stuff:
select JPEG as your file type, and click the “Optimized” button.
Now, the trickier stuff: you
need to select the output image’s “Quality.” Any number you
select less than 100 will reduce the quality of the image.
Why, you ask, would you want to do that? Because by lowering the
quality, you also reduce the file size, making the file
quicker to download, and accordingly making the viewing experience more
pleasant. Here’s the cool thing: most of the time, you won’t
notice much or any visible reduction of quality, so long as
you keep the
quality setting in the 60 or higher range. When saving images to my
website, I usually leave the quality at 80. Don't worry
about selecting "Maximum," "Very High," etc., as these
setting will change automatically based on the quality
number you select. The quality
feature can really come in handy when posting images to
photo sharing sites that have file size limits.
The Save for
Web window allows you to preview your quality settings. To
get a snap-shot preview of some pre-set quality settings,
select “4-Up” which displays previews of quality set to 100,
80, 40, and 20. Make sure you preview your images at 100% so
you know exactly how your chosen quality setting will affect
final image quality.
Photoshop's Save for Web
window can help you optimize image quality, file size, and
color.
Now, for the even
trickier stuff! Most internet browsers use as their default color space “sRGB,” which is a variation
of the industry standard Adobe RGB color space. To
optimize your chances that your images will be
viewed by others as close to the way you view them,
you need to convert your image to sRGB. Many digital
cameras automatically (or at the option of the user)
output their images using the sRGB color space. Most
serious photographers, however, edit their image on
the computer using the Adobe RBG space, so conversion is necessary
before posting images to the web.
The Save for Web
window makes sRGB conversion easy. So—AND THIS MIGHT
BE THE
MOST IMPORTANT PART OF THIS TUTORIAL—when using the
Save for Web window, MAKE SURE TO CHECK THE "CONVERT
TO sRGB" BUTTON. This will ensure optimum
compatibility with the most number of browsers.
Choose "No Color Management" under Preview to see
how your image will look to most viewers. [Note: CS5
users should select “Internet Standard RGB: No Color
Management.” If you are using an older version of
Photoshop it will say “Windows: No Color
Management.”] Why? Because most viewers use Windows-based
computers (and most newer Macs now use the Windows
standard gamma settings), so this will show you how your image will
look on the vast majority of systems.
You can also click the "Embed Color
Profile" box. This allows browsers that are capable
of color managing tagged photos to properly render
the colors of your image. Most browsers do not color
manage (and instead default to SRGB), but it doesn't
hurt to also optimize your files for those browsers
that can.
An important note
about converting to sRGB: some users, when they view
the final saved jpeg file on the web, may notice a
color shift in the final image when viewed on their
own monitor using, for example, Internet Explorer. This color shift may
also be apparent if you select "Monitor" as your Preview
setting, or if you browse for the jpeg file on your
computer using Windows. Internet Explorer and
Windows aren't "color aware," so in effect you are
seeing a color mismatch because your monitor
profile is being re-applied to the image. The image may look weird on your
computer, but should look fine on everyone else's.
So, just ignore the color shift you see on your own
system. If you are nervous about it, try viewing
your images on someone else's computer—they should
look more or less "right," although how they look
will in some part depend on the quality and settings
of their monitor. Or, you can download a browser
such as the most recent version of
Firefox which is color aware; i.e., it color
manages images with embedded profiles. You should
see the right result when using a color managed
browser—or, for that matter, if you open the jpeg
file in Photoshop.
Figure 3-3 below
shows you the optimal settings to use, as discussed
above. "Quality," of
course, should be set based on your desired final
file size and image quality.
Figure 3-3
You can pretty much
leave everything else in the Save for Web window at its
default settings. The "Metadata" setting allows
you to decide whether to embed any of your image's metadata,
to allow curious members of the public access to it if they
so desire. Metadata contains information about what type of
camera and lens you used, and camera settings such as
aperture and ISO. Digital cameras automatically tag an
image with this information when the digital file is
created. You can later also add additional information such
as a description of the image, and copyright and contact
information. If you have taken the time to enter this
metadata, you might want to embed it into
the image. If you are like me—I personally don't want my
camera settings available for the public to access, nor do I
ever take the time to enter additional metadata—then select
"None."
When everything is to
your satisfaction, hit Save and save the file to
your computer. Choose a folder or destination that
you can easily find later.
Step Four: Enjoy
Fame and Fortune!
When you are ready,
upload the file to the web, whether it be to a photo
sharing site, your blog, or your website. Sit back and receive the
acclaim of your peers, and wait for those lucrative
endorsements to come your way!
|
