Optimizing graphics for the Web

Can you direct me to a tutuorial on how to optimize photos I wish to publish on my website?

Web Graphics & Color
-----------------------
TOM SYKES from LONDON UK, using Photoshop CS with MAC OS X, writes in with:

[Quote:] Can you direct me to a tutuorial on how to optimize photos I wish to publish on my website? I am a begginner in Photoshop and am getting confused about how to resize images effectively, retain sharpness etc and also confused about whether I should be editing in Image ready ? Thanks

Reply:

Optimization is a process which can be lengthy for perfect results or fairly brief for almost perfect results. You have to weigh in on which route you need to go. Adobe Photoshop and Adobe ImageReady both offer full tool sets for optimizing the file for online display quality. I would use the one I'm most familiar with and the one that's used most frequently. For a skilled user, ImageReady is really not necessary.

The easy way:

Use the Photoshop Save As command lets you save an image as a GIF, JPEG, or PNG file. Depending on the file format, you can specify image quality, background transparency or matting, color display, and downloading method. The controls for the resulting dialog boxes are fairly clear. I recommend saving this way (using a different name) and saving the next way as a means of comparing the two results. Then you'll know for sure which is most advantageous.

For greater control and precise optimization use the Save for Web (Photoshop) or Save Optimized (ImageReady) command. It's found in the File menu just below the "Save As..." item.

The resulting tool window offers a lot of options. They're all fairly self explanatory.

Click a tab at the top of the image area to select a display option: 2-Up so you can see both versions of the image side by side.

The annotation area below each image in the Save for Web dialog box gives you the bottom line info on how the file will perform online. You'll see the original image filename and file size; and the optimized image optimization options, the size of the optimized file, and the estimated download time using a selected modem speed. I recommend using the 28.8 setting to be sure.

Now change your "quality" options to the right, and test various settings. Nothing will affect the file until you select "Save Optimized" -- so experiment until you have a visual understanding of what to expect.

You can also set scaling at this time, and Photoshop does a pretty good job of sampling your image down to the correct size. Remember: never enlarge.

:-)