Discovering Photoshop 5.5
Save for Web Command

Dateline: 10/20/99

I've said it before and I'll say it again, the new Save for Web command in Photoshop 5.5 is probably my favorite thing about this upgrade. No longer do I have to rely on a separate program to compare and choose various image optimization settings when preparing images for the web. The Save for Web dialog box allows me to compare up to 4 variations of an image at different settings while making adjustments to palette options, dithering, color reduction, image size, and transparency. The dialog box is completely resizable, so it can be as large as your entire monitor area if necessary.

You have the choice of four different views in the Save for Web dialog: Original, Optimized, 2-up, and 4-up. I've provided screen shots of the 2-up and 4-up views, you can click here to open a new window containing the screen shots. You can easily switch between any of the four views by selecting the appropriate tab in the dialog. Here's a description of the three tools on the left edge of the dialog box:

• With the Hand tool you can pan around the image previews.
• With the Zoom tool you can zoom in on a preview, or you can use the zoom drop down box at the bottom left of the Save for Web dialog.
• With the eyedropper tool you can select individual colors from your image. The eyedropper color is displayed in the color swatch just below the tool button.

As you can see from the screen shots, each view provides useful information about the image including the format, file size, download time, dither settings, palette settings, and color depth. As you move your cursor over the previews, the bottom portion of the dialog box displays the color values of the underlying pixels in the preview.

The small arrow at the top of the dialog produces a drop-down menu (shown - right) where you can change the preview to display browser dither, various color previews, and the default download rate for estimating download times.

The settings section provides several preset settings to choose from (shown - right), but these can be further adjusted using the various drop-down lists and controls and saved for future use. All the settings are explained in detail in the Photoshop 5.5 User Guide Supplement, so I will only give you a brief overview of the GIF and JPEG controls here. Below is the run-down, in the order of the numbered settings shown for each format.

GIF Settings

1. Optimized file format options include GIF, JPEG, PNG-8, and PNG 24.
2. Color reduction algorithm includes perceptual, selective, adaptive, web, custom, Mac OS, and Windows.
3. Dithering algorithm options include no dither, diffusion, pattern, and noise.
4. Transparency - This option is only enabled if the original image has transparent areas. You cannot specify transparency within the Save for Web dialog if there was no transparency in the original image.
5. Interlaced - downloads the image in multiple passes, resulting in an image that slowly comes into focus as it downloads.
6. Controls the amount of lossy compression allowed in a GIF image.
7. Maximum number of colors in the color table.
8. When diffusion is selected for dithering, this slider controls the amount of dithering that is used. Less dithering results in a smaller file, while increased dithering helps to reducing banding.
9. Matte defines the background color so that transparent pixels will blend smoothly into the background.
10. Web snap tolerance controls how many of the colors in the image are converted to web-safe colors.

JPEG Settings

1. Optimized file format options include GIF, JPEG, PNG-8, and PNG 24.
2. Compression quality options include low, medium, high, and maximum.
3. Progressive - downloads the image in multiple passes, resulting in an image that slowly comes into focus as it downloads.
4. ICC Profile - preserves the ICC profile of the image with the file. Not supported in all browsers.
5. Optimized - enabling this creates smaller files but is not supported in older browsers.
6. Quality - this setting has the most impact on file size. Larger numbers produce better quality but larger files, smaller number produce lower quality but smaller files.
7. The blur setting can help to reduce artifacts in an image but also reduces image detail.
8. Matte allows you to set the color of transparent areas in the original image.

PNG Settings
The PNG format is still rarely used, so for the sake of space I will leave these settings for you to explore on your own.

The small arrow to the right of the settings provides a drop down menu with options to save and delete custom settings, optimize an image to a file size you specify, and repopulate previews.

Color Table
The color table is available for GIF and PNG file formats. My example shows a color table for an image with 128 colors. The selected color is outlined in while. A small white diamond in the center of a color swatch indicates a web-safe color. Double clicking a color in the table invokes the color picker which allows you to change all occurrences of that particular color in the image. A small black diamond in the center of the color swatch indicates an edited color. A tiny square in the lower right corner of the swatch indicates a locked color. You can select multiple colors in the color table by clicking and holding the Ctrl key down (Command on Mac), or multiple contiguous colors by clicking while holding the shift key down.

There are several buttons across the bottom of the color table. From left to right, they are:
1. Shifts the selected color to the closest web-safe color.
2. Locks the selected color so it cannot be changed.
3. Adds the eyedropper color to the palette.
4. Deletes the selected colors.

The small arrow at the top right of the color table provides a menu (shown, right) with options to add and delete colors, select various combinations of colors, lock and unlock colors, shift and unshift web-safe colors, sort the color table, and load and save color tables.

Image Size
The image size settings allow you to resize an image to specific pixel dimensions or to a percentage of the original size. These options are fairly straightforward and well documented so I won't go into detail here, but I have provided a screen shot of the various controls to the right.

Preview in Browser
At the bottom of the Save for Web dialog you'll see a browser icon and a drop down button. Clicking the browser icon opens the browser with a preview of the optimized image along with the format, dimensions, size, settings, and the HTML code to display the image. Clicking the arrow next to the browser icon allows you to choose any of your configured browsers or another browser. To configure a browser to appear in the list for Windows, you need only place a shortcut in the "Photoshop 5.5\Helpers\Preview In" folder. Sorry, I don't have a Mac, so I can't tell you how to configure a browser for Mac users. Mac users, if you know the trick, I invite you to share it in the forum.

Conclusion
The Save for Web command is very complete and fairly intuitive. There are only a couple areas where I feel it is lacking. I'd like to see the matte options allow the user to select a custom image for the background matting rather than a single color. It would be nice if the dialog allowed for image slicing directly in the dialog. A few things could be made more obvious... undoing a color you've replaced, for example. I also have had several occasions where I received an error message that shuts down Photoshop when invoking the command. Restarting Photoshop and attempting the Save for Web command again usually works the next time. Finally, I think it would be fabulous if the Save for Web command could be enabled as a standalone module that could be invoked with a right click on any image file format.

Return to the Introduction/Table of Contents.
Go to the Next Page: More New Tools
Also see: Photoshop Resources

Questions? Comments? Post to the Forum!