How I Prepare Pictures for the Web With Photoshop

Tom Van Vleck

 Adobe Photoshop is an incredible program. It's the tool of choice for many different kinds of image creation. Preparing pictures for the web is just one of its many functions, and for that purpose, most of its hundreds of controls won't help, but will in fact make your picture look worse. To make your picture look better, you need only a few of Photoshop's capabilities.

Here is the path through Photoshop that I follow when putting pictures on the Web, starting from either a scanned image or a digital camera picture. I am sure there are many more things I could do, if I understood Photoshop better, but this procedure is what I have learned so far, by trial and error.

(These notes cover Adobe Photoshop 5.5 or later with ImageReady.)

(If you're a Linux user, you can adapt these instructions to The Gimp. But I like the real Photoshop a lot better.)

Read The Manual

The Photoshop manual has lots of information on scanning and color management. I won't repeat it or try to summarize it here. Chapter 3 describes getting images into Photoshop.

Input

I have used four different ways of getting my pictures into the computer.

• Scanning. It used to be conventional wisdom to scan at twice the target DPI, so 144 DPI given that web display is nominally 72 DPI. Scanner drivers have improved a lot since then, and scanning at 72 DPI is now OK if you are going to shrink the scanned picture. (The basic idea is that you don't want to try to make more pixels in Photoshop than you got from your input source.) Some scanner drivers have built-in sharpening and color correction: again, it used to be best to turn these off and use Photoshop's more sophisticated features, but now drivers have improved and these features may be acceptable. Experiment if you can; otherwise, scan at higher resolution and you can shrink things later.

• PhotoWorks Pictures on Disk. You send your film to this company in Seattle, and they send back your pictures, and they also scan them and either let you download them or send them to you on CD.  PhotoWorks provides a utility that will view their proprietary format and export it to JPG files. I use this tool to batch-extract all the pictures at maximum resolution and quality, and then use Photoshop to fix them up. There are other companies that do the same thing; this is the one I have used.

• PhotoCD. This Kodak-licensed format scans your picture in five different resolutions, color-adjusted to match your film. It takes a professional operator looking at each scan. The results get you many more pixels to work with than PhotoWorks, and I think sharper scans, but it costs a lot more. I use PhotoCD for archiving really good slides and negatives. Photoshop can read PhotoCDs directly: you used to need a special plugin but with version 5.5 and above it seems to be included.

• Digital camera. A digital camera can give you pictures directly to your computer, without a scanning step. Cameras vary widely in optical quality and features. One factor in  choosing a camera is the number of pixels, but there are many others. I can't go into all the factors: do some research. Modern digital cameras do significant adjustment and processing onboard, and may make some kinds of Photoshop adjustment unnecessary. The camera I use produces a pre-sharpened JPG file with more pixels than I need for web pictures, so I read it into Photoshop and adjust the size.

Processing

Target

In order to prepare your pictures for web use, you need to make some decisions about who's going to look at the pictures. The variables are

• Average user's line speed.

• User patience and interest in your page.

• Browsers supported. Microsoft Internet Explorer is by far the most popular: it now comes with most PCs and is included in AOL.

• Average user's graphic setup, especially number of colors and screen resolution.

Decide what image size (in pixels) you want before you start, based on your page design. You may wish to have a small thumbnail that the user can click to see a large image, if you think the user will bother. Notice that while GIF images are sized assuming that your display is 72 DPI, many PCs now use a screen resolution of 96 DPI, which will make your pictures appear smaller on the screen.

Also decide what storage size you want your picture to take up. The size of a picture not only uses up disk storage on your web server account, but also consumes download time. There's a tradeoff between picture size, picture quality, and load time: if your page is too slow, viewers will leave without looking. My rule of thumb is that a picture that's the only thing on a page can be up to 25 or 30K, but small inline pictures should be much smaller. Aim for 4K or less. A 50K picture takes about a minute to load on a slow line: will your site visitors wait that long?

Storage format is the fourth variable in the tradeoff: the practical choices are GIF versus JPG. JPG compresses photographs better than GIF, so I use it for most photographs. (When I'm making a page with many small pictures, intended to be displayed on low-end machines, it may make sense to make GIFs of all the pictures in order to make sure that there isn't a problem with the way the browser selects colors to display. But this is a rare case.)

Steps

Here are the steps I use:

1. Read the picture in. The way you do this depends on your source. Get your image into RGB mode.

   Original image from a PhotoCD. This one is so dark I can't see to crop or straighten.

2. Straighten. I often have trouble keeping the horizon level. There's a trick with the Photoshop ruler tool: use it to draw a horizontal line from left to right, or a vertical line from bottom to top, along a line in the picture you want horizontal or vertical. Then Choose Image/Rotate/Arbitrary. The box will come up with the rotation angle necessary to make your line level.

3. Crop. If you rotated your picture, you have to crop it. Otherwise you may still want to for composition.

4. Adjust levels: many other controls actually do some part of what the Levels control does. e.g. the Contrast and Hue controls, as far as I can tell, adjust certain levels. Anyway, this is the most important control for making your picture look good.

   • Image/Adjust/Auto Contrast. Try this first. Usually it improves the picture noticeably.

   • Image/Adjust/Auto Levels. Try this next. Sometimes it helps, sometimes it makes the picture worse, or shifts colors. Undo if you don't like it.

   • Manual Levels adjustments. Many pictures benefit from bringing up the Image/Adjust/Levels control and moving the center triangle under the histogram to the left a little: this lightens the picture and makes shadow detail visible.

     Levels control panel. For this dark picture, I made a drastic move of the right-hand triangle.

     pictures often look darker in the browser than in Photoshop, and adjusting this knob a little brighter than you think you need to may help. Sometimes, moving the righthand triangle to the left will increase contrast and make the picture crisper. Occasionally, you'll want to operate on individual colors separately instead of working on RGB.

     Pictures are darker on the PC than on the Mac. This is because the default gamma is different on the two platforms. Since most users look at my pages from a PC, I choose a setting that looks best on the PC, and let the Mac images be a little light.

   The picture after levels, straightening, and cropping.

5. Other editing. If you want to remove an unwanted wire, blemish, or background from your picture, using the many tools Photoshop provides, do this now. The Clone tool is especially useful here.

6. Size the picture. Use Image/Adjust/Image Size to resize your picture. Tell it to resample and constrain proportions. I assume you are working with more pixels than you need. Resizing smaller will discard pixels and resample, and Photoshop is far better at this than other picture manipulation tools. You want to have done your Levels work before you do this, so that resampling will have an easier job. (Don't try to take a little picture and resize it bigger.)
   
   

7. Sharpen or Unsharp Mask. After you resize, you will want to sharpen the picture. Filter/Sharpen/Unsharp Mask is what the experts use. Percentage should probably be between 50 and 100 for Web page use. Too much and you get white halos around every edge. Sometimes, the Sharpen control does almost the same thing as Unsharp Mask, especially if your scanner or camera did some sharpening already.

   Unsharp Mask control panel.

8. Save for Web. Here is where Photoshop 5.5 is indispensable. I save my pictures as JPGs, usually 30 quality. But the Save For Web control lets you experiment with various modes and parameters of saving and shows what the size and final appearance will be. Some pictures need higher quality to avoid funny JPG artifacts in large flat areas like sky. Other pictures look just the same at quality 3 as they do at 30, and take much less storage.

9. Check Your Work. Until you've done a bunch of picture conversions, it's important to check your results with both MSIE and Netscape, on both PC and Mac, using various screen resolutions, on LCD and regular video screens, using a dialup line. Sometimes what looked great in Photoshop doesn't look so good in a browser: sometimes when you load your page from the server, you find that it takes too long.

   Final result. Karolyn Martin and Don Widrig at the GE-645, MIT Project MAC, 9th Floor, April 1968.

Automation

I make my standard pattern into two macros, one for landscape pictures and one for portrait, and invoke the macro after rotating and cropping. If I like the result, I'm done. If not, I go back to Open in the history window, and do the steps one at a time, inserting variations and experimenting.

Other Things to Try

Curves

Sometimes the Levels control won't do what I want. I barely know how to work the Image/Adjust/Curves control, but it has rescued some pictures that wouldn't come right with Levels alone.

I am currently reading Real World Photoshop 6 by David Blatner and Bruce Fraser (Peachpit Press). It's more print oriented than Web oriented, but has lots of information on color and photo retouching.

They say that anything you can do in Levels, you can do in Curves, plus a whole lot more. The only thing, this book says, that Levels gives you is the histogram display. Here is what I know so far:

• To bring out detail in the middle tones of a picture, lightening the whole picture at the expense of some detail in the highlights and shadows, pull the center of the curve up and to the left, making the curve into a concave-downward shape. This is often good for snapshots and flash pictures.

• To increase the contrast in a picture, making the light areas lighter and the darks darker, make the curve take an s-shape by pinning the center and then pulling the upper half up. I use this to make shapes and patterns more dramatic.

Use the tool very cautiously.. a little motion has a big effect.

Selections

You can select just part of your image and apply different corrections to individual parts. One of the Photoshop advice sites cautions that this may produce pictures that look unnatural: human perception is quite sensitive to mismatches between parts of a picture that should have the same illumination.

Image/Adjust/Variations

This tool brings up multiple thumbnails and shows what happens if you put more or less of a color into the highlights, shadows, and midtones of a picture. I suspect that it doesn't do anything that you can't do with the Levels control.

Filters

For scanned pictures, sometimes it helps to use the Filter/Noise/Despeckle filter before sharpening. Most other filters besides the sharpening filters will make the picture look interesting, and worse than the original.

Other Controls

Channels and layer masking are a mystery to me. I've never found a way to use them to improve a picture. Easy to make a picture look worse though, in many different ways.

Web Photo Gallery

Photoshop has a Web Photo Gallery creator on the File menu that automatically converts a folder full of pictures into a little subtree, with an index page containing thumbnails and individual pages for each image. I used this for a while, until I wrote my own.

Thumbnails

The main thing I was using Photoshop for, when making web galleries, was making thumbnail images of the pictures. I switched to  ImageMagick, a powerful package that contains many useful picture whacking tools: in particular, it provides the "convert" command, which I use as follows:

  convert -geometry 60 blah.jpg ../thumbs/blah.jpg

for a landscape-orientation picture. "60" is the size in pixels of the longest dimension. For a portrait-orientation picture, use "x60".

Non-Graphic Users

Some users run with images disabled or are unable to see pictures. It is a courtesy to these users to provide enough text that they can at least navigate your page, and if the photographs are not the primary message themselves, to use ALT tags and descriptive text to allow them to get your message.

References

There's plenty of information on the Web about this subject. Use a search engine to look for it.

• Bruce Fraser wrote  "Out of Gamut: (Almost) Everything You Wanted to Know about Sharpening in Photoshop but Were Afraid to Ask"

• Vincent Flanders has a useful list of links to information about graphics on his  Web Pages that Suck.

Copyright (c) 2001, 2002 by Tom Van Vleck