Optimization in Photoshop 5.5 and ImageReady 2.0
Until this latest version appeared, optimizing images in Photoshop has never been an easy task, because you couldn't see a live preview as you optimized an image. You had to use trial and error, which forced you to guess the best bit depth and then reopen the optimized file to see if you guessed right. This was a very frustrating process that slowed down production. Photoshop 5.5 offers specific solutions to this problem. ImageReady also provides the same optimization tools. If you're planning to create a rollover or use any of the other Web tools offered only in ImageReady, we suggest moving your composition to ImageReady before saving for the Web.

Save For Web in Photoshop
Conveniently located in the File menu, Save For Web is the improved method for optimizing and saving graphic images. It includes a live preview of your optimized image and also exports your image to the file format of your choice without closing or changing the original.

To use Save For Web:

  1. Open an image and choose Save For Web from the File menu. By default, the app displays the 2-Up view, which shows the original and one optimized preview. The 4-Up view shows three optimized previews at one time. While the previews are not ideal, they provide a great starting point for adjusting the optimization parameters. 
  2. Adjust the optimization parameters according to your criteria, such as quality, file size, or a balance of the two. Each optimized file format offers different parameters. 
    New parameters under the GIF format are: 
    Saved Sets of Optimized Settings: This parameter allows you to save optimized settings in a drop-down list. Choose the Optimize menu on the right-hand side of the Saved Sets list and save. A saved set can be used as a default setting the next time Save For Web is used. 
    Lossy: This parameter helps to reduce the file size of a GIF image by adding noise to the image. Use it sparingly, because it degrades the image quickly. 
    Web Snap: This parameter allows you to adjust the degree to which the optimized image palette conforms to the 216 Web Palette. The unit of measure is in percentages, which allows for very subtle adjustments.  
  3. Use the Color Table to lock certain colors into the optimized image palette. If a color is not Web safe, simply click that color to bring up the Color Picker and adjust the value. After you click OK, the appearance of a small square-and-plus-sign icon indicates that the color is locked in place. 
  4. Check the Image Size information. After finalizing all the other optimization parameters, reduce the dimensions of the image as needed. 
  5. Finally, click OK to save the optimized image file under Save For Web. The standard dialog box appears and allows you to save to any directory. 

Optimizing in ImageReady
The new optimization features found in Photoshop 5.5 under Save For Web are integrated into ImageReady 2.0. The functions and steps are identical, but the tools are located in different areas in the application instead of in a single dialog box.

Styles in ImageReady 2.0
One additional optimization feature in ImageReady is Styles. Styles contains a library of preset drop shadows and bevels that can be used for creating button images. For users who are not adept at graphic design, these options come in handy in order to treat certain graphic elements that need to have some extra visual depth. Otherwise, we do not recommend Styles because they are typical of amateur, second-generation Web site design.