Saving for the Web | Photoshop CS Savvy

Using Photoshop s Save for Web interface allows you to optimize your images for the best combination of size and appearance and save a copy, without altering your original image. In this section you ll learn how to optimize your images and save Web-ready copies in either Indexed or RGB color , as GIF, JPEG, or PNG format.

The Save For Web feature is a subinterface. It contains numerous options for saving files to Web formats, and can compare the effects of different settings on up to four images at once. Figure 25.19 shows the Save For Web dialog box. It behaves very much like a plug-in application, with full features contained within the dialog box itself.

Figure 25.19: The Save For Web dialog subinterface

The Save For Web dialog box contains the following tab options:

Original shows the image in its original state.
Optimized shows the image with whatever Web optimization features you select.
2-Up displays the original image next to the optimized image, or two optimized images side-by-side.
4-Up provides a look at the original image and three possible optimization results, or at four possible optimization results.

OPTIMIZING YOUR IMAGES

When it comes to optimizing Web graphics with Photoshop, you have several options. First, you can use the built-in Save For Web feature, which many Web designers opt to do; this has the advantage of preserving your original art and graphics. You can also choose to optimize in ImageReady, which provides the same capabilities as the Save For Web dialog, but in real-time, in the working environment. Another choice is to optimize ˜by hand in Photoshop, changing the original image s color mode to indexed then saving as CompuServe GIF (GIF86a) or PNG.

Ultimately Save For Web and ImageReady give you the most choices, the best previews, and the best information. Using the Save For Web feature or employing ImageReady puts some excellent power tools into your hands. Without them, you have to rely on testing and experience in order to make the best decisions.

The Preview list is accessible from the small arrow on the right of the image window. It has several options, including the capability to simulate what a graphic looks like on different computers. This feature enables you to make cross-platform decisions about your Web graphics. It also displays several baud rates (see Figure 25.20). Choose one to determine the amount of time your image will take to download. The value is displayed below the image window.

Figure 25.20: Baud rates

The right side of the Save For Web dialog box (see Figure 25.21) offers numerous file format and color controls:

Figure 25.21: Options in the Save for Web sub-interface .

Preset This option provides a pop-up list of preconfigured settings for saving images as GIFs, JPEGs, and PNGs.

Optimized File Format This option provides a pop-up list of possible file formats, including GIF, JPEG, PNG, and WBMP (for wireless Web surfers on mobile phones).

Color Reduction Algorithm This option is available for GIFs. In most cases, you ll want to select Web.

Dithering Algorithm Standard dithering options are provided for the GIF format. Work with these to see which gives you the best results.

Lossy This option enables you to create lossy GIFs. You ll sacrifice quality but you will reduce the file size.

Colors This pop-up list enables you to specify the exact number of colors you d like to include in your image.

Transparency This option produces transparency if you are saving the image as a GIF or PNG image and the image is on a transparent layer.

Dither If you select a dithering algorithm, this slider enables you to precisely control the amount of dithering that occurs in the image.

Transparency Dither Algorithm This option allows you to choose between different methods for dithering partially transparent pixels. Try them all to see which gives you the best results for a particular image.

Transparency Dither Amount If you select a transparency dithering algorithm, this slider enables you to precisely control the amount of transparency dithering that occurs in the image.

Web Snap If you are using a color palette other than the 216 Web-safe colors, this slider enables you to adjust the number of colors that snap to the Web palette.

Interlaced Select this option if you want your image to be rendered progressively.

Color Table The color table enables you to see the exact colors being used in the optimized image when using PNG-8 and GIF images. Colors with dots in the center are Web-safe colors. The arrow to the right above the color table displays a list that enables you to select, sort , lock, shift, save, and load colors.

Image Size This palette enables you to change the physical dimensions of the image you are saving.

The annotations under the image(s) denote the format type, file size, download time on a selected modem, plus the various characteristics of a selected group of settings. Click the arrow at the top of the tabbed display to choose additional options for the display and annotations.

When working with the Save For Web dialog box, remember that the variations you apply to an image do not influence your original image. Instead, the image is saved as a new file. You can save your choices by using the Save Settings feature if you like the way that a particular combination of options worked for you.

I like to use the 4-Up option to display as many options at once as possible, so I can compare settings and results. The goal is to get the perfect balance of good-looking graphics and a low file weight.

Now let s go through the by-hand optimization process so you can effectively optimize your graphics to retain their good looks yet weigh little for fast load times. I ll use the same graphic, once with a solid background and once preserving transparency, but you can use the general process defined here to optimize any of your GIF and JPEG images.

Using Indexed Color

When you save an image, you can reduce the number of saved colors, and thus reduce its file size, by changing its color mode from RGB to Indexed. Converting the file to Indexed color substantially reduces the number of colors in the document. By reducing the number of colors, you reduce the image s file size. However converting an RGB image to a Indexed image throws away much of the image information. It s better to save an optimized copy of your image using Save For Web, while keeping your original art intact.

See the practice steps in Exporting to GIF, next, to learn how to save an image in Indexed mode.

Note

If the image you re working with naturally lends itself to transparency, you can save the image as a transparent GIF in the Save For Web dialog box. Images containing transparency need to be on layers surrounded by a transparent area. Because Indexed color does not support layers, check the Transparency box in order to maintain the transparency when the image is finally saved as a GIF.

Exporting to GIF

GIF (Graphics Interchange Format, or CompuServe GIF) is a common format used to optimize and export graphic files to the Web..

In this section, you ll save an image to GIF format by using Save For Web:

Figure 25.22: The Image Size palette

Open the mallard.psd file in the ch25 folder on the CD.
Choose File ’ Save For Web (see Figure 25.23). Click the 4-Up tab. The dialog box displays the original image in the upper-left and three additional images.

Figure 25.23: Save For Web with the GIF option selected, displaying the color table
Click the upper-right image to select it. You will configure this image first.
There are a whole slew of optimization options available, letting you fine-tune everything from number of colors to the transparency dithering algorithm (see Figure 25.21). Choose GIF 64 Dithered from the Presets. This sets the file format to GIF, the color reduction algorithm to Selective, the dither algorithm to Diffusion, and so on. You can change any of these to suit. Change the color reduction algorithm to Adaptive. While the Selective algorithm creates a color palette which favors the colors your eye is most sensitive to, Adaptive creates a color palette favoring the colors appearing in the image.
Notice that reducing the number of colors to 64 hasn t changed the quality of the image significantly. Try different numbers of colors by scrolling down the Colors list, or typing a number in. Try different color reduction algorithms as well.
Dithering blends the areas of color together and helps the image look less posterized. Change the Dither amount to 0% to see the difference. The size of the resulting file is shown in the preview pane. Try numbers of colors with different dithering options to achieve the best possible image with the fewest number of colors.
Click the other images and try different settings to compare the results.
Select the best image and click Save. The Save Optimized As dialog box appears. From the Save as Type list, you can choose to save the image only, the image plus an HTML page which references it (HTML and Images), or just the HTML page (HTML Only). Choose Images Only. Make sure Default Settings is selected and click Save to save your optimized file.

Note	Dithering increases a GIF file s size, so there is a trade-off between keeping the file small and preserving image appearance.

Saving the Image as an HTML File

In Photoshop, select the mallard.psd file and choose File ’ Save For Web. Your settings from the previous save will now be the default, displayed in the upper right preview pane.
Click Save to open the Save Optimize dialog box. Choose HTML and Images from the Save as Type list.
Choose Other from the Settings list.

When you saved your file in the last section, you used the Default Settings. But there are a wealth of options hidden in the Settings list. Most of these only apply when you are saving an HTML file.

These appear in the list in the least intuitive order, so let s take them in a slightly different order.

Default Settings uses Photoshop s default settings. More on these later.
Background image the HTML file will use the saved image as a background for the Web page, rather than simply placing it in the Web page, as shown in Figure 25.24.

Figure 25.24: Gif image and HTML saved using Default Settings (left) and a Gif image and HTML saved using Background Image (right).
XHTML Ensures that the HTML file contains XHTML-valid text.
Other allows you to customize any aspect of the output settings from slice naming to copyright inclusion.
Custom uses any changes you made to the default settings.

Let s explore customizing the output settings.

In Photoshop, select the mallard.psd file and choose File ’ Save For Web. Your settings from the previous save will now be the default, displayed in the upper right preview pane.
Click Save to open the Save Optimize dialog box. Choose HTML and Images from the Save as Type list.
Choose Other from the Settings list. The Output Settings dialog box is displayed (see Figure 25.25).

Figure 25.25: The Output Settings dialog box

You can set options in four categories: HTML, Slices, Background, and Saving Files.

These options configure the preferences for files saved for publication to the Web. Choose a category from the pop-up list immediately below the Settings list.

HTML

Choose from these HTML formatting options:

Output XHTML Specifies that the HTML file will contain XHTML valid text.

Tags Case Selects the case for HTML tags: uppercase, initial cap, or all lowercase.

Attributes Case Selects the tag attribute case: uppercase, initial cap, second initial cap, or all lowercase.

Indent Determines a means for code indention: use the authoring software s default tab settings, a specific number of spaces, or no indention.

Line Endings Selects a platform for line-ending compatibility: Mac, Windows, or Unix.

Encoding Specifies a default character encoding for the Web page.

Use one of these options to embed comments into the HTML code:

Include Comments Embeds ImageReady comments in the HTML code.

Always Quote Attributes Places quotation marks around all tag attributes. This option is necessary for compatibility with some early browsers. It is not recommended to always quote attributes. Quotation marks are used when necessary to comply with most browsers, even if this option is deselected.

Always Add Alt Attributes Generates HTML with blank attributes when attributes are not specified.

Close All Tags Generates close tags for all elements.

Include Zero Margins on Body Tag The body tag code includes attributes to produce zero margins.

Note	The Load and Save buttons enable you to load and save custom output settings.

Slices

You can set HTML naming conventions for slices by entering text or choosing from the list items. This will configure the code to specific or universal browser compatibility. Choose from the following slice output options:

Generate Table Aligns sliced images in an HTML table.

Empty Cells Indicates how to fill empty table data cells (slices without content):

Select GIF, IMG W&H to use a 1-pixel spacer GIF with width and height in the IMG tag.
Select GIF, TD W&H to use a 1-pixel spacer GIF with width and height in the TD tag.
Select NoWrap, TD W&H to code a nonstandard NoWrap attribute on the table data and place width and height in the TD tags.

TD W&H Determines when to place width and height attributes for table data: Always, Never, or Auto (recommended).

Spacer Cells Indicates when to place a row and a column of empty spacers around the table: Always, Never, or Auto (recommended). Spacer cells align slice boundaries in tables where slice borders do not line up to prevent the table from breaking apart in some browsers.

Generate CSS Creates cascading style sheets for slices.

Referenced Refers to how the cascading style sheet will be referenced in the HTML code: by ID, inline, or by class.

Default Slice Naming Determines naming conventions for slices.

Background

To designate the characteristics of a background, choose the Background preference category. You can specify the following configurations:

View Document As To designate the current image as a background, choose Background. To designate a background to be used with the current image, click Image. Specify the location path in the path field.

Background Image Identifies an image to display as the Web page s background.

Color Specifies the actual solid color that will be displayed while the image is downloading, and through transparent areas in the image.

Saving Files

Choose from these file-saving options:

File Naming Choose items from lists, enter values, or test for saving Web images. Items include preferences for saving the document s name, slice name if the image has been cut into slices, rollover state if the image contains a rollover created in ImageReady, file creation date, slice number, punctuation, and file extension. You can reconfigure the filenames, for example, using a different abbreviation to name the file.

Filename Compatibility Select one or more options to make the filename compatible with Windows, Macintosh, and Unix platforms.

For optimized files, choose from these options:

Put Images in Folder Consolidates sliced images into a separate folder when saving (not the folder with the HTML document). This folder is called Images by default, or you can rename it.

Copy Background Image when Saving Check this box to preserve the background settings of an image that is being used as a background.

Include Copyright Check this box to include copyright information with the image. You add copyright information for an image in the Image Info dialog box.

Note	These options can be set in ImageReady by choosing File ’ Save Optimized or File ’ Save Optimized As ’ Settings ’ Other.