TIP 142: Optimizing Images with Save For Web

TIP 142: Optimizing Images with Save For Web

The Save For Web dialog appears every time you create a Smart Object (see Tip 141) in GoLive. Whether you create a Web graphic in Photoshop, ImageReady, Illustrator, or GoLive, it's essentially the same interface. Using Save for Web in GoLive ( Figure 142 ) lets you quickly and easily optimize your source files to image formats such as GIF, JPEG, and PNG. The powerful optimization algorithms let you maximize quality and minimize download times all in one dialog. Let's take a quick tour through the major features.

Across the top of the Save For Web window are four tabs that show you (in order from left to right) the Original uncompressed image, an Optimized view with real-time compression preview, a 2-Up view, and a 4-Up view to compare multiple compression settings side by side.

Adjusting Image Size in Save For Web To change the dimensions of the target file without affecting the source image, enter the new image dimensions in the Image Size tab in the bottom right corner of the Save for Web window. Make sure you click the Apply button instead of hitting Return or Enter because Return/Enter confirms all the changes, not just the image size changes.

On the right side you can select an optimization preset from the pull-down menu or create your own settings with the available options. You can choose from JPEG, GIF, PNG-8, PNG-24, and WBMPbut JPEG and GIF will be your most likely choices.

As you adjust your optimization settings, you can see a real-time compression preview in the image previews on the left and estimated file size and download time at the bottom of the dialog. Use the preview and the download estimates to decide which optimization settings work best for each image.

On the left side there's a small toolbar with four tools. Use the Hand tool to pan around the image; double-click the Hand tool to fit the entire image in the window. Also notice that as you pan in 2-Up and 4-Up modes, all the images pan together so you can compare areas of detail with different optimization settings. Click with the Zoom tool to zoom in and Option/Alt-click to zoom out.

TIP 143: Using Large JPEGs as Smart Objects

Ask any Web designer if you should ever recompress a JPEG image and they're likely to roll their eyes, stomp their feet, and snort out something like, "Absolutely not!" Well, that was true a few years ago, but modern digital cameras store very high-quality photographs in the JPEG format. The fact that a JPEG image can be high-quality contradicts most designer's expectations, but the fact is that JPEG doesn't necessarily mean it's had all the quality squeezed out of it.

All of this means it's perfectly reasonable to use a high-quality JPEG image as a Smart Object source file even though, technically speaking, the image will be compressed twice: first by the camera and then by GoLive. To make it easier for GoLive to use large JPEGs as Smart Object sources, there's a new application preference that controls how Smart Objects are handled. Choose GoLive > Preferences (Mac) or Edit > Preferences (Windows) and choose the Smart Objects section of the Images preferences ( Figure 143 ).

The setting that automatically converts large, Web-friendly images to Smart Objects is enabled by default. The feature kicks in when the source image has a dimension larger than 1,000 pixels. If you want to increase or decrease the limit you can, but 1,000 is a good default because it lets you use images less then 1,000 pixels wide as full-size gallery images but will convert anything larger to a Smart Object. To see the feature in action, drag a JPEG with a dimension greater than 1,000 pixels (such as a JPEG from a 4-megapixel digital camera) into the Layout Editor.