26 May 2009
After you've completed your design and you are ready to export it, you can use the Optimize panel to control how files are exported. This section of the Design Learning Guide discusses the process of choosing the best optimization settings to get the desired balance of image quality and small file size. The Optimize panel contains a wide variety of preset optimization settings to get you started, and I'll go into details about how to prepare and export your files to generate assets for your projects.
I've included a visual comparison of a single bitmap image after it has been exported using each of the optimization presets so that you can understand each setting better and decide which one to choose based on the content of your PNG files. You'll learn how to see side-by-side versions of your designs (either in two or four windows) so that you can get critical file size information while also visually determining which choice would result in the best looking output.
I also discuss how you can export individual slices and determine optimization settings for individual slices in your document to make the export process a breeze. Because it's important to understand the supported file types, I have included a description of each type along with details about which choice is best suited for different types of exported content. Finally, I provide steps to create custom optimization presets so that you can export your assets to achieve specific results.
To access the Optimize panel, choose Window > Optimize. The panel includes controls that allow you to choose the file format of the exported file. If you choose one of the 8-bit file formats, a table displays the colors in the current export color palette. The Optimize panel is contextual and the settings refer to the currently selected document or the currently selected slice in the open document (see Figure 1).
After making your settings in the Optimize panel, click the preview buttons at the top of the document window to review how the exported graphic will look. If you wish to compare two settings or four settings at once, click the 2-Up or 4-Up buttons to see different iterations of the file. You can create a different setting for each previewed image, trying different optimization settings to find the ideal balance between image quality and file size.
Tip: Individual slices can have optimization settings applied, allowing you to set different export settings for each region in the graphic (which is helpful when some areas are photo realistic and other areas would be best exported as GIF files). Alternatively, you can set a single optimization setting for the entire document.
If you wish to apply optimization settings to a single slice, select the slice. (Or press and hold the Shift key to select multiple slices). While the slice(s) are selected, use the Property inspector to select the appropriate option from the Slice Export Settings pop-up menu. Choose from the included preset values or create your own custom preset settings. You can also save your custom preset settings if you want to use them again.
The viewing mode buttons are located in the top left corner of the document window. Click the buttons to select how to view the document. By default, the viewing mode is set to original; this is the mode you'll use most of the time, whenever you are editing the design (see Figure 2).
However, when you wish to see the design as it will be displayed in a browser, click the Preview button.
While viewing the document in Preview mode, rollover buttons and navigation bars will interact with mouse movements. Animated GIFs and animations can also be previewed in this fashion. It is very helpful to test your work and ensure it is displaying as expected before exporting the graphics and any supporting files.
When it comes to web design, smaller file size is always better, because a site with lower file size will download more quickly. Strive to use the smallest file sizes possible to improve performance for site visitors. Preview mode facilitates finding the best optimization settings with the lowest file size, because each pane displays the total file size, the time it will take to download (on a 56K modem) including the time required to download all states for buttons and rollovers.
Choose the 2-Up or 4-Up viewing mode to see the design displayed side by side. Click each version of the design to select it, and then choose the desired export settings in the Optimize panel. Continue selecting and specifying settings for each version until they are all different, so you can compare the results. You can also choose to display one version as the original graphic, with no optimization. This side-by-side comparison allows you to visually choose the best version (regarding image quality) that meets your file size requirements.
Tip: Press the number 2 key on your keyboard to toggle the visibility of the web layer slices while previewing the design.
Experiment with different file formats and settings to determine which optimization settings display the graphics to the best advantage (see Figure 3).
Note: If you want to use transparency in your graphic, you must set the canvas color to transparent and choose to export in either the PNG and GIF format. These two file formats are the choices that support transparency. Look for the checkerboard background, indicating the areas that will be transparent on export (see Figure 4).
Choose File > Image Preview to access the Image Preview window. As you export the file, be sure to choose the option for transparency and verify that the canvas color still displays the checkerboard pattern (see Figure 5).
If you are optimizing a slice or set of slices (rather than the entire document) the preview includes a slice overlay to make it easy to identify the area of the document that you are currently affecting. The unaffected areas will be slightly dimmed so that you can focus directly on the selected areas to be exported.
As you are previewing the design, you can switch between Preview, 2-Up and 4-Up modes. These displays allow you to see how the document will appear with the currently applied optimization settings, and until you export the document, you can make as many adjustments as you like.
Note: To see sliced graphics as they will appear online or when printed, click the option to Hide Slices in the Tools panel. Alternatively, you can also choose View > Slice Overlay to toggle visibility on and off (see Figure 6).
The Optimize panel in Fireworks (or the Property Inspector) includes several preset options that you can select to quickly optimize your document. The examples in Figures 7–14 illustrate how a single bitmap graphic is exported using each of the presets in the Optimize panel.
You can customize the exported file by selecting a specific file type from the Export File Format pop-up menu in the Optimize panel. After choosing the desired file type, specify the format-specific settings, by choosing the desired color depth, dither setting, and quality level. If you plan on reusing a custom optimization setting, you can save it as a new preset and give it a unique name.
Tip: When a slice is selected, the Property inspector displays the SliceExport Settings pop-up menu that allows you to select a preset or savedoptimization settings. If you choose Animated GIF, the delay values are resetto 7 in the States panel.
GIF is a web graphic format that is best for displaying cartoons, images with transparent areas, and animations (with multiple states). Images with areas of solid color and continuous tone, such as screenshots, work best when exported as GIF files. GIF files contain a maximum of 256 colors.
JPEG file format was specifically created for photographic or high-color images. Scanned photographs, graphics with gradient colors, and any images that require more than 256 colors work best in the JPEG format. JPEG supports millions of colors (24-bit).
PNG is a versatile web graphic format that can contain transparency or an alpha channel. Logos are commonly saved in PNG format. Most, but not all browsers support display of PNG images. PNG files can support up to 32-bit color.
Note: PNG is the native file format for Fireworks, but not all PNG files are the same. Fireworks PNG files contain additional information about the document that is not stored in an exported PNG file or in PNG files created in other applications.
WBMP is a graphic format created for mobile devices and handsets, like cell phones and PDAs. This format is used on Wireless Application Protocol (WAP) pages. Because WBMP is a 1-bit format, only two colors are visible: white and black.
TIFF is a file format used to store bitmap images. TIFF files are most commonly used when creating scans and print materials. You can import TIFF files into many multimedia applications.
Created for Windows systems, BMP files can be imported into many Windows applications.
Created for Mac systems, PICT files can be imported into many Mac applications.
Whenever you make an optimization setting in Fireworks, the settings are remembered. If you export a file and then export it again, the settings you made the first time will be applied to the next export. This is true whether you are saving a file, choosing File > Save As, or exporting a file. Any new slices that were not already optimized use the document's settings as their default—although you can override their settings at any time before exporting the file.
If you create a custom optimization setting that you wish to keep, use the Optimize panel's option menu to save the settings (see Figure 15).
You'll be prompted to enter a name for the new preset you've created. Once you save the custom preset, it will appear as a menu option with the other presets, both in the Optimize panel and in the Property inspector.
You can share your custom optimization presets with other Fireworks users if you'd like. The preset file that you create when you save a new one is saved inside the Fireworks configuration folder on your system. The location of the Fireworks configuration folder varies, depending on the drive you selected when installing Fireworks CS4. This is the common location of the Export Settings folder:
To share the preset, locate your Fireworks configuration folder, navigate to the named preset, copy it, and then paste a copy of it in the Fireworks configuration folder on another machine.
If you wish to delete a custom preset that you've created, access the options menu of the Optimization panel and select the option to Delete Settings.
Note: You can delete the presets that you've made, but you cannot delete the presets that are included with Fireworks CS4.
For more information about image optimization, see Export states or layers as multiple files and Optimize Fireworks images and animations placed in Dreamweaver in the Using Fireworks CS4 online documentation.
Finally, explore other areas of the Design Learning Guide for Fireworks CS4.