How I Prepare Pictures for the Web With Photoshop

Tom Van Vleck

Date: 01/16/10; Version 13

 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.

(I use Adobe Photoshop CS3 but these notes apply to earlier versions too.)

(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. RTFM.

Input

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

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

Decide what image size (in pixels) you want before you start, based on your page design. You may wish to have a small version, or thumbnail image, that the user can click to see a larger image.

Also decide what file 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 loads too slowly, 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 75 or 80K, but small inline pictures should be much smaller. Aim for 20K or less. There are tools on the web that will test a page's loading speed: try them out.

Storage format is the fourth variable in the tradeoff. JPG compresses photographs better than GIF, so I use it for most photographs.

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.

    very dark picture 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. 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 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 some users look at my pages from a PC, I choose a setting that looks better on the PC, and let the Mac images be a little light.

    cropped 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 Unsharp Mask control panel.
  8. Save for Web. I save my pictures as JPGs, usually 30 quality. Photoshop's 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 on both PC and Mac, using various screen resolutions and browsers, 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.

    Karolyn Martin and Don Widrig at the ge-645 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

The Image/Adjust/Curves control has rescued some pictures that wouldn't come right with Levels alone. Anything you can do in Levels, you can do in Curves, plus a whole lot more. Here is what I know so far:

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

Saturation

Some pictures scanned from film look washed out and are improved by increasing the color saturation a little.

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 Curves control.

Filters

The Filter/Distort/Lens Correction filter in CS3 has a quick way to rotate pictures, and to cure various kinds of distortion.

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.

Thumbnails

I used to use Photoshop to make thumbnail images of pictures for web galleries. 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.