Web Page w/ MFW > Optimize the Document - Lesson 06

Your document is almost ready for the web. The only thing you need to do before exporting it is to optimize it. Before you export any document from Fireworks, you should always optimize it. Optimizing ensures that your graphics will be exported with the best possible balance of compression and quality.

When different kinds of graphics are in the same document, it’s a good idea to choose an appropriate file format and compression setting for each. The Global web page is composed of a variety of elements: bitmaps, vector objects, and text.

1. If the Optimize panel is minimized or isn’t visible, click its expander arrow or choose Window > Optimize. Fireworks chooses GIF as the default export file format and Websnap Adaptive as the default color palette. Most of the graphics on the Global Rental Cars web page will be fine using these settings. The Vintage bitmap image, however, contains a photograph and a gradient. Because of its complex color variations, it is best exported in another format.
2. Click the 2-Up preview button in the Document window. The 2-Up button allows you to view the results of your optimization settings and compare them with the original. By now you’ve probably noticed the white slice overlay each time you use one of the Preview views. The overlay allows you to focus on just the area you want to optimize.
3. Click the slice for the Vintage image in the preview on the right. The slice overlay disappears so you can view the image beneath the slice. At the bottom of the preview, the export file format for the selected slice is displayed, as well as the estimated export file size, and the amount of time the graphic will take to download from the web.
   
   Tip:
   Use the Hand tool in the View section of the Tools panel to view more of the image if it’s not entirely visible.
   
4. Hide the slices for a moment by clicking the Hide Slices and Hotspots button in the Web section of the Tools panel. This allows you to compare the preview with the original and see the difference between the two graphics. The preview on the right has bands in the gradient.
5. Turn slices back on again, and click the Vintage image with the Pointer tool.
6. In the Optimize panel, choose JPEG – Smaller File from the Settings pop-up menu. The gradient bands are now gone, and the file size has decreased significantly. That’s because photographs and images with complex color variations are better optimized and compressed as JPEGs than as GIFs. Now that the file size has been decreased, the image has become fuzzy.
7. To improve the appearance of the bitmap, drag the Quality slider in the Optimize panel to 77 and set the Smoothing option to 0. The bitmap is much clearer, but the file size has also increased. However, it is still an improvement over the file size when the image was optimized as a GIF.
8. Click the Original button to return to normal view.