Optimizing Images in Fireworks
The number one reason for Optimizing images is to reduce the amount of time it takes for a
browser to download, decompress, and display the image. Optimizing graphics ensures they
possess the right mix of color, compression, and quality. Optimizing graphics in Fireworks
involves:
1. Choosing the best file format for a graphic.
2. Setting format-specific options, such as color depth, the amount of compression.
We’ll be optimizing some actual images in this tutorial. If you'd like to follow along, click on the
ZIP icon to download the supporting files. Create a new directory on your hard drive and label
the folder Optimization. Unzip the supporting files into your new folder. Create a folder inside
the new directory and label it Assets.
Download the supporting files
Choosing the best file format for your image
JPEG (Joint Photographic Expert Group)
The JPEG format supports millions of colors and is described as a lossy format. Lossy means
that some of the picture information is discarded to reduce the file size. Use JPEG format for
photographic images, where the detail varies in small stages, and where there are gradient-like
variations in color. Reduce the file size of JPEGs by lowering the quality setting.
Figure 1: Typical JPEG image
GIF (Graphic Interchange Format)
GIF supports 256 indexed colors. It is the format to choose for images with large areas of flat
color, when you want to keep lines or edges sharp, when you want to make use of indexed
transparency, or when you want to export multiple frames for animation. GIF is called a lossless
format (though it isn’t). Reducing the file size of a GIF is simply a matter of reducing the
number of colors it contains.
Figure 2: Typical GIF image
PNG (Portable Network Graphic)
Like GIF, PNG format enables you to specify the number of colors to use in optimization. The
exported file size of a PNG will usually be less than that of a GIF for the same image. It may be
less than that of a JPEG for the same image too. You’ll have to test it to know for sure. PNG can
support up to 32-bit color and contain transparency or an alpha channel. It uses zlib compression
and some extra filters to compress the image without losing any of the image data.
NOTE: As of this writing, 32-bit PNG transparency is not supported by Internet Explorer
without using a proprietary bit of markup called the Alpha Image Loader filter. Use 8-bit and
Fireworks 24-bit PNG files instead.
Fireworks has four optimization features to help you find the right balance between file size and
visual quality. The four features are the Export Wizard, optimizing in the workspace with the
Optimize Panel or applying a Preset setting from the Property inspector, and optimizing in the
Image Preview panel. This article will focus on the second and fourth optimization features.
Optimizing in the workspace
The Optimize Panel
The Optimize panel [Window > Optimize] contains controls for optimizing images in the
workspace. It works in conjunction with the preview buttons at the top of the document
window. You can optimize a whole document at once, or assign different optimization settings
to each slice in a document. Let's have a look at the Optimize panel controls.
1. The wavy line looking thing is the Optimize panel menu expander. The menu includes
options like "Save settings" (use this option when you want to apply the same settings to
a group of images), and "Optimize to Size" ( opens a dialog box that enables you to set a
target file size for an image).
2. This selector opens the Saved Settings menu. The menu includes Fireworks preset
optimization settings. It is also the place where your custom settings are saved to.
3. The Matte Color box enables you to set the color your images will be anti-aliased to.
Use this when you export images with a transparent background.
4. Use this selector to set the Color Depth of the images (maximum number of colors). The
color depth option is available only for GIFs and other 8-bit graphic file formats.
5. The Dither selector. Dithering approximates colors removed from the palette by
alternating similarly colored pixels. The colors blend to create the appearance of the
missing colors. Dithering can increase file size, however, and is only available for GIFs
and other 8-bit formats.
6. The Transparency selector enables you to choose which type of transparency your
image is exported with, Index (the canvas color). or Alpha (for 32-bit PNG files, or for
when both your canvas color and foreground objects share the same color). Note that you
must set a matte color when you use Alpha transparency. The Transparency option is
available only for GIFs and 32-bit PNG and TIFF files. JPEG format does not support
transparency.
7. The Export File Format selector.
8. The Indexed palette selector. A color palette is a list of the colors available to the file.
9. Lossy GIF Compression selector. Lossy compression squeezes more bytes out of GIF
and PNG images by changing the pattern of pixels in a way that allows more efficient
compression.
10. The image Color Table. This preview of the image palette is only available for GIF and
other 8-bit image formats.
11. The Color Table Sorting selector. Sorts the swatches by color value.
12. Add color to transparency. Use this eyedropper to select a color from the image for
transparency.
13. Remove color from transparency. Use this eyedropper to put it back again. :-)
14. Select transparent color. Use this eyedropper to select a color for transparency from
either the image or the color table. Does pretty much the same thing as the Add color
transparency tool.
15. Edit color button. If you select a color in the image or color table, clicking on this
button opens the system color picker, enabling you to change each pixel of the selected
color to a new one. Note that double clicking on one of the swatches in the color table
will open the system color picker as well.
16. Snap to web safe. Changes a selected color to the nearest web safe equivalent.
17. Lock color. This button enables you lock selected colors so they will not be removed or
changed when switching palettes or reducing the number of colors in a palette.
18. Add color button. Adds a new color to the palette.
19. Delete color. Clicking on this button deletes the selected color from the palette.
Now that you know what each of the controls in the Optimize panel does, let's optimize an
image!
Optimizing a JPEG



Choose File > Open.
Browse to the Optimization folder you created for the supporting files.
Click on the Dahlia1.png to select it.


Click on Open to load the image in Fireworks.
Click on the 4-up button in the upper left of the document window, and then open the
Optimize panel
Figure 3: The 4-up button
The 2-up and 4-up features allow you to compare views with different optimization settings. The
image opens in two or four separate panes, each of which allows you to experiment with
different compression settings and file format options.
1. JPEG – Better Quality sets quality to 80 and smoothing to 0. The result is a high-quality
but larger graphic.
2. JPEG – Smaller File sets quality to 60 and smoothing to 2. The resulting graphic is less
than half the size of a Better Quality JPEG but with the quality much reduced.




Click on the image in the top left pane and drag it to center the flower.
Select the image in the top right pane by clicking on it.
Click on Saved Settings selector and Apply the JPEG – Better Quality preset.
Could not find Saved Settings But to the left in the Optimize window you can change to
Better Quality.
The JPEG – Better Quality setting brings the file size of the image down to a bit over 40K .
Minor detail has been lost, and there are no noticeable compression artifacts (those crinkly edges
you see in over compressed images). If the size of the image won't bring the total file size of the
page you place it on to more than 50K, then this version would be very acceptable. Let's
experiment with the JPEG – Smaller File preset and compare the result with this one.


Select the image in the bottom left pane by clicking on it.
Click on Saved Settings selector and Apply the JPEG – Smaller File preset.
Figure 4: The JPEG – Smaller File preset
The JPEG – Smaller File setting brings the file size of the image down below 20K, a
considerable difference. A lot of detail has been lost, including color information. Zooming the
view to 200% shows that some compression artifacts and bleeding of color at the edges have
been introduced. (Cannot find how to adjust smoothing levels? Iit is in the same optimize
window you have been working with. Make sure you have clicked on to the edited picture.) The
smoothing level of 2 has created some blurring at the base of the flower stem. You'll find that if
you change the smoothing setting to 1, the smeary look disappears and there is some brightening
of the color. The compression setting of 60% with a smoothing setting of 1 has produced a file
size only a 1.16K above the JPEG – Smaller File preset.
With the image in the bottom left pane of the 4-Up window still selected, click on the Preview
button at the top of the document window. The version you have selected when you click on the
Preview button will open, full size, in the Preview window. I think we have achieved a good
balance between image quality and file size. We'll export this version.
Exporting the JPEG
You'll find that this is the simplest part of the process.





Choose File > Export to open the Export dialog box.
In the Export dialog box, use the Save In selector to browse to the Assets folder of your
Optimization directory.
Leave the File name at the default, Dahlia1.jpg
For Export, choose Images Only.
Click on Export.
That's it! It couldn't be easier.
Optimizing in the Image Preview Panel
The Image Preview panel [File > Image Preview] contains the same controls for optimizing
images found in the Optimize panel. Instead of previewing in the Document window, previewing
is done in the Image Preview panel itself. Unlike the Optimize panel, you cannot assign different
export settings to each slice, making the Image Preview panel more useful for exporting single
images and animations. The Image Preview panel does contain a few features not found in the
Optimize panel, however. Let's have a quick look at those.
If you click on the File tab at the top of the window, you'll find a feature that enables you to scale
the image before exporting. You can also crop out parts of an image by clicking in the Export
Area box and entering a height and width, or by clicking on the Crop tool and dragging the
bounding box handles.
Figure 5: Under the File tab
If the image is an animation, you can access the animation setting tools by clicking on the
Animation tab at the top of the Image Preview panel. Controls for playing the animation are
below the image window.
Figure 6: Animation play controls
Optimizing a GIF in the Image Preview Panel




Choose File > Open.
Browse to the Optimization folder you created for the supporting files.
Click on the Dahlia2.png to select it.
Click on Open to load the image in Fireworks.
The Dahlia2.png is a posterized version of the original dahlia image. Posterization has flattened
the colors into broad areas and lines, making the GIF format the ideal one for optimizing it. Let's
review the available GIF presets.





GIF Web 216 forces all colors to web safe. The palette contains up to 216 colors.
GIF WebSnap 256 converts non-web safe colors to the closest web safe color. The color
palette contains up to 256 colors.
GIF WebSnap 128 converts non-web safe colors to the closest web safe color. The color
palette contains up to 128 colors.
GIF Adaptive 256 palette contains only the actual colors used in the graphic, up to a
maximum of 256 colors.
Animated GIF Websnap 128 sets the file format to Animated GIF and converts colors
to their closest web safe color. The palette contains up to 128 colors.
The following palettes are available in the selector menu:









Adaptive is a palette derived from the actual colors in the document. Adaptive palettes
usually produce the highest quality image.
Web Adaptive is a palette in which a percentage of the image colors are converted to the
closest web safe color.
Web 216 is a palette of the 216 colors common to both Windows and Macintosh
computers. It produces passably consistent results on either platform when viewed on 8bit monitors.
Exact contains the exact colors used in the image. If the image contains more than 256
colors, the palette switches to Adaptive.
Windows and Macintosh each contain the 256 colors defined by the Windows or
Macintosh platform.
Grayscale converts the image colors to a grayscale palette of 256 or fewer colors.
Black and White converts the image to only of black and white.
Uniform is a mathematical palette based on RGB pixel values.
Custom is a palette that has been modified or loaded from an external palette (ACT file)
or a GIF file.
Figure 5: Dahlia 2




Choose File > Image Preview
Drag the lower right corner on the Image Preview window until you see the entire image
in the preview pane.
Change the format to GIF
At 256 colors the image is 32.24K. That's pretty large.
Change the number of colors to 32.
That brings it down to around 20K. Not bad, but you can squeeze it down a few more bytes.
Watch it live
Pop open a Flash movie to find out how.
Exporting from the Image Preview Panel






Click on Export
Browse to your Optimization directory
Leave the File name at the default, dahlia1.gif
For Export, choose Images Only.
Uncheck all of the other settings
Click on Export (Save)
That's all there is to it!
To PNG or Not to PNG
As you are probably aware, Internet Explorer does not properly display 32-bit PNG files without
some special markup. It is beyond the scope of this tutorial to describe how this is done. I.E, has
no problem with 8-bit PNG files, however, so 8-bit PNG files are the ones we'll take a look at in
this section of the Optimizing and Exporting tutorial. In it, you'll prove that the exported file size
of a PNG can be less than that of a GIF for the same image.





Choose File > Open.
Browse to the Optimization folder you created for the supporting files.
Click on the UI_Bit.png to select it.
Click on Open to load the image in Fireworks.
Open the Optimize panel.
Figure 6: The UI_Bit.png



Click on the Preview button at the top of the document window, and then on the 4-Up
button.
Click on the image in the top right panel and set the Export file format to GIF > Adaptive
> 64 colors. The result is 5.12K
Click on the image in bottom left panel and set the Export file format to GIF > Adaptive
> 32 colors. The result is 4.52K
Click on the image in bottom right panel and set the Export file format to
PNG 8 >Adaptive > 64 colors. The result is 2.79K
The result is 2.79K with less image degradation than the 32 color GIF. Amazing, isn't it? I
haven't found any way to predict whether GIF or PNG format will work best for any given
image. If you discover a pattern, please share it with us in the PVII Fireworks forum. Meanwhile,
take advantage of the 4-UP preview feature for testing your images.
To Export your PNG file,





Choose File > Export to open the Export dialog box.
In the Export dialog box, use the Save In selector to browse to the Assets folder of your
Optimization directory.
Leave the File name at the default "UI_Bit.png."
For Export, choose Images Only.
Click on Export. (Save)