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.

Opening the Optimize panel

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).

Figure 1. Make settings in the Optimize panel to specify how the file will be exported.

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.

Previewing the document before exporting

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).

Figure 2. The Original view mode allows you to edit the document on the canvas.

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).

Figure 3. The 4-Up viewing mode allows you to see four different versions of your graphic simultaneously, so you can do a split screen comparison.

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).

Figure 4. The checkerboard background indicates that the canvas color is set to transparent.

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).

Figure 5. Select one of the transparency options from the drop-down menu located beneath the color swatches.

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).

Figure 6. Click the option to Hide slices and hotspots from the Tools panel.

Using presets for optimization

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.

Original bitmap image

Figure 7. The original PNG file is 500 × 375 pixels and has a file size of 872K.

GIF Web 216

Figure 8. GIF Web 216 uses only web-safe colors. The color palette contains up to 216 colors. This exported GIF uses 69 colors and has a file size of 71.2K. There is noticeable color banding at this setting, especially on the left side of the pillow.

GIF WebSnap 256

Figure 9. GIF WebSnap 256 converts colors to their closest web-safe color. The color palette contains up to 256 colors. This exported GIF uses 256 colors and has a file size of 76.7K. The image quality is much improved compared to GIF Web 216 due to the larger number of colors.

GIF WebSnap 128

Figure 10. GIF WebSnap 128 converts colors to their closest web-safe color. The color palette contains up to 128 colors. This exported GIF uses 128 colors and has a file size of 65.8K. The image quality is slightly better than GIF Web 256 and results in a reduction of 11K in size.

GIF Adaptive 256

Figure 11. GIF Adaptive 256 uses only the actual colors used in the artwork. The color palette contains up to 256 colors. This exported GIF uses 256 colors and has a file size of 77.4K. The image quality is crisper than GIF WebSnap 128. Although this preset adds 12K to the file size, this exported image most closely matches the quality of the original when compared to the other GIF preset options.

JPEG – Better Quality

Better Quality sets the quality level to 80% and smoothing to 0, resulting in a high-quality file with a larger file size. It's no surprise that this exported JPEG easily replicates the quality of the original file. This file's size is only 28K, which is less than half all of the other settings so far. This is clearly the optimal choice for this particular file when balancing the resulting file's quality and exported file size.

Figure 12. JPEG – Better Quality sets the quality level to 80% and smoothing to 0, resulting in a high-quality file with a larger file size. It's no surprise that this exported JPEG easily replicates the quality of the original file. This file's size is only 28K, which is less than half all of the other settings so far. This is clearly the optimal choice for this particular file when balancing the resulting file's quality and exported file size.

JPEG – Smaller File

Smaller File sets the quality level to 60% and smoothing to 2, resulting in a graphic less than half the file size of a Better Quality JPEG, with reduced image quality. This exported JPEG shows some artifacts and is slightly less clear than the Better Quality JPEG preset. This file's size is down to only 12.1K and the quality of the image is acceptable. If your project requires a small file size to reduce download times, using this preset setting on this example would be the best choice.

Figure 13. JPEG – Smaller File sets the quality level to 60% and smoothing to 2, resulting in a graphic less than half the file size of a Better Quality JPEG, with reduced image quality. This exported JPEG shows some artifacts and is slightly less clear than the Better Quality JPEG preset. This file's size is down to only 12.1K and the quality of the image is acceptable. If your project requires a small file size to reduce download times, using this preset setting on this example would be the best choice.

Animated GIF WebSnap 128

Figure 14. Animated GIF WebSnap 128 sets the file format to Animated GIF and converts colors to their closest web-safe color. The color palette contains up to 128 colors. When you choose this option from the Property inspector, the frame delay values are automatically set to 7. The exported GIF produces the same level of quality as the GIF WebSnap 128 preset but has a large file size of 81.9K. This sample JPEG contains only a single state, so choosing Animated GIF is inappropriate for this particular image. However, if you are specifically creating Animated GIFs and your PNG file contains multiple states, this is the best option because it will display all of the states based on the Animation settings.

Selecting a file type

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

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

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

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

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

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.

BMP

Created for Windows systems, BMP files can be imported into many Windows applications.

PICT

Created for Mac systems, PICT files can be imported into many Mac applications.

Creating custom optimization presets

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).

Figure 15. Choose the option to Save Settings from the option menu of the Optimize panel.

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:

On Windows Vista: [Drive]:\Users\[machine name]\AppData\Roaming\Adobe\Fireworks CS4\Export Settings
On Windows XP: [Drive]:\Documents and Settings\[machine name]\Application Data\Adobe\Fireworks CS4\Export Settings
On Mac OS: [Drive]:\Users\[machine name]\Library\Preferences\Adobe Fireworks CS4\Fireworks CS4 Preferences

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.

Where to go from here:

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.

Design Learning Guide for Fireworks: Optimizing files for multiple exports

by Tommi West

Created

Page tools

Requirements

User level

Required products