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
- Optimized file format options include GIF, JPEG, PNG-8, and PNG 24.
- Color reduction algorithm includes perceptual, selective, adaptive, web, custom, Mac OS, and Windows.
- Dithering algorithm options include no dither, diffusion, pattern, and noise.
- 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.
- Interlaced - downloads the image in multiple passes, resulting in an image that slowly comes into focus as it downloads.
- Controls the amount of lossy compression allowed in a GIF image.
- Maximum number of colors in the color table.
- 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.
- Matte defines the background color so that transparent pixels will blend smoothly into the background.
- Web snap tolerance controls how many of the colors in the image are converted to web-safe colors.
JPEG
Settings
- Optimized file format options include GIF, JPEG, PNG-8, and PNG 24.
- Compression quality options include low, medium, high, and maximum.
- Progressive - downloads the image in multiple passes, resulting in an image that slowly comes into focus as it downloads.
- ICC Profile - preserves the ICC profile of the image with the file. Not supported in all browsers.
- Optimized - enabling this creates smaller files but is not supported in older browsers.
- 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.
- The blur setting can help to reduce artifacts in an image but also reduces image detail.
- 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!
