Using the 4-Up Preview Button

Fireworks enables you to preview your images within the document window before exporting them. You can determine the export settings on the page as you create it and preview the results. You can also split the document window into two or four preview areas to view different settings. Fireworks also displays the file size and the approximate download times within each preview.

1.	Click the 4-Up button at the top of the document window. The 2-Up button divides the document into two previews; the 4-Up button divides the document into four previews. In 2-Up and 4-Up modes, the upper-left preview displays the original image and can be edited. The other areas are previews only. Tip You can display the original image (or no original image) in any of the preview areas in 2-Up and 4-Up preview modes. Select Original from the pop-up menu at the bottom of the preview area.
2.	Click anywhere within the bottom-right preview to select this window. A black border (gray in Macintosh OS X) appears around the selected preview. The selected preview reflects any changes you make on the Optimize panel. Tip When you were in the Export Preview window, the pointer turned to the hand pointer when you dragged within the panel. In the preview area, you need to select the Hand tool from the Tools panel to move the image within the preview. You can also hold down the Spacebar as you drag within the panel to switch to the Hand tool automatically. That shortcut also works when you are editing in the document window.
3.	On the Optimize panel, change the Index Palette to Web 216 and set the number of colors to 32 for the color palette in the Colors pop-up menu. Choosing a smaller number reduces the file size. Look at the top-right panel and compare the file size and the number of colors. Depending on your image, your file size may be reduced significantly. With this page, you should see a significant change. Use the Hand tool, or hold down the Spacebar as you drag around in the preview window to see the image of the girl, and look at the graininess of her image. Also look at the quality of the image after you reduce the number of colors. If you pick a number that is smaller than the actual number of colors in the image, some colors are lost. The pixels with the lost colors are converted to the closest remaining colors on the palette.
4.	Reduce the Dither amount by dragging the slider on the Optimize panel to zero. Dithering is a process of approximating colors not on the current palette. A dithered image often looks "noisy," or grainy; however, dithering can help smooth out the banding created by a gradient-like transition of colors. The higher the number, the more dithering that occurs and the larger the file size. Look at the file size now that the dithering is removed. There is a noticeable difference in the file size, but the quality of the image has suffered and is unacceptable. Using each of the four previews, you can see the results of the changes you make to the optimization settings. Once you are satisfied with your settings, click within the preview you want to use to select it.
5.	Click the Original button to return to the document window. The settings you chose for the selected preview are now applied to the entire document and will be used when you export the file.