Bay Area Bridge. Photo © Jim Doty Jr.

I was asked recently how to re-size images for the web using Photoshop. The person asking the question was not only having problems resizing images, but the photos looked desaturated with muted colors.  My instructions (below) are for using Photoshop CS3 for Windows, so some menu items may be a little different in other versions of Photoshop or with Photoshop Elements, but the basic principles and steps are the same.

My reply follows.

***   ***   ***

Resizing is simple. It is what you do before you re-size the photo that might mess up your image quality.

I prefer to save images with the metadata (including my copyright info) intact. If you want to strip out the metadata, replace step 6a below with step 6b, the Save for Web and Devices option.

Some of the menu items might vary depending on the version of Photoshop you are using.

1.  MOST IMPORTANT!  Save your full size image with all layers and corrections intact as a PSD file. This is your master file. That way you can go back and rework your master file if you want to tweak the image. Don’t save over this master file. When you save your web sized image, give it a slightly different name so you don’t risk saving over your master file (more about this later.

Photoshop menu items and dialog box choices are in bold type.

2. Flatten the image

Layers > Flatten Image

3. Convert your image from 16 bit to 8 bit

Image > Mode, check 8 Bits/Channel

You should work with 16 bit images whenever possible for the best image quality. You should only switch to 8 bit when you are preparing an image for the web.
4. Change the color profile from Adobe RGB (or ProPhoto RGB) to sRGB to maintain the color quality of your image on the web.

Edit > Convert to Profile, choose sRGB IEC61966-2.1

Adobe RGB is a good color space to use for working on your images since it has a wider color gamut (range of colors) than sRGB, but if you post an Adobe RGB image on the web, the colors will looked muted or washed out (desaturated).
5. Now you can re-size the photo.

Image > Image Resize

Make sure the Constrain Proportions box is checked. that way when you change one dimension, the other will change proportionately so your image isn’t distorted.
Change the longest dimension (whether it is length or width) to the size of your choosing (the other dimension will change proportionately). I usually change the longest dimension to around 400 pixels (for a small image), 600 pixels, or 800 pixels (the largest size I would recommend for the web.
Click OK.

6. IMPORTANT. When you save your re-sized image, change the name in some slight way as an extra precaution against saving over your master file (step 1).  It can be as simple as adding “w4” to the end of the file name to indicate a web image resized to 400 pixels on one side.
File > Save As

In the File Name box, change or add something to the file name so it is different from the master file.

In the Format box, choose JPEG

Click SAVE.

In the Jpeg Options box that opens, choose a quality of 8 or 10. That is good enough for small web-sized images.
For Format Options, I choose Baseline Optimized.

Click OK.

You now have a web sized file with all metadata intact, ready for the web.

***
TO STRIP METADATA FROM THE PHOTO.
Do steps 1-5 above.

6b.  Use the Save for Web and Devices options.

File > Save for Web and Devices

Preset drop down:  Jpeg High

Check the Optimized box.

Set Quality at 60 or higher.

Click SAVE.

A dialog box will open.

In the File Name box, change or add to the file name so it doesn’t overwrite your master file.

In the Save as Type box, choose Images Only (*.jpg).

Click SAVE.