 |
| Here is a bad JPG. It has been oversharpened and saved as a JPG multiple times. Notice the wavy lines in the background. | There is more to making an image look good on the Web than sharpening and saving as a JPG. Here are some suggestions for optimizing Web images with Photoshop. These will apply to Photoshop from at least version 3.0. If you are using different image editing software, some version of these tools should be available. Use what applies.
1)Scanning
Start with a good scan! If you're scanner is no good, you can edit and tweak all day and you'll only make it worse. If you can, pay for a high-resolution drum scan. It's worth the money!
2)Image Editing
All image editing should be saved in a "non-lossy" format. With Photoshop, the native file format is PSD, or Photoshop files. Another safe format is TIFF. Both of these save all of the information. They don't compress and so there is no "loss" of detail. (Note: Do not check the LZW compression box when saving in TIFF format.) |
|
3)Flatten and Resize
When your image looks exactly like you want it to, flatten and resize it to the final Web image size. It's best to size in pixels since that's how all Web design is done.
 |
| This is the Unsharp Mask tool in Photoshop 5.0. Notice the three sliders and their settings. |
4)Sharpening
The final step before resaving, is sharpening. Photoshop has a tool in the Filters toolbar called "Unsharp Mask". Unsharp Mask gives you much more control over sharpening than the Sharpen or Sharpen Edges filters do. There are three slider controls in the Unsharp Mask dialogue box: Amount, Radius and Threshold.
Set Amount between 200 and 250. Set Radius at 0.7 and leave Threshold at 0. Vary the Radius setting anywhere between 0.8 and 0.1. The amount of sharpening necessary will vary depending on lighting, scan quality and subject matter. Find out what works best. When you find a setting you like, back it off a little bit (a little lower on the Radius slider). This is to compensate for any contrast increase that will result from saving in the JPG format.
5)Saving
Using the Save As option under File, save in the JPG file format. You will get a dialogue box that requires you to set the level of JPG. You should experiment here. Try different settings, save, and then open your image in your browser. Find out what looks best to you. As with sharpening, this will vary with each image.
|
|
Experiment!
Above are three different levels of Unsharp Masking. The first image has no sharpening, the second is set at Amount: 220, Radius 0.3, Threshold 0. The third is set at Amount 220, Radius 0.6, Threshold 0. |
6)Experiment
Try playing with the Unsharp Mask sliders. Find out what they do. Save at different JPG levels. Check the file sizes at different levels of compression. Find a good compromise between image quality and file size. There is no absolute method. These are just guidelines. What matters is that your image looks good and there is usually more than one way to get there. |
