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.
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.
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.
- 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.
Cool. Really works.
Great tip. Thanks.