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.

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

Typical JPEG
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.

Typical GIF
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

4-up button
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.

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.

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

file tab
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.

playControls
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 8-bit 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.

dahlia two
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

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.

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.