Optimizing Images in Fireworks CS4

Fireworks General Discoveries

I very rarely open Firework. That is why I decided to take a peak at the Lynda.com videos Fireworks CS4 Essential Training with Jim Babbage. I watch a lot of web developer tutorials and I run into some of them that mention something about Fireworks and have just been in the program long enough to do what they say. That's about all. So I thought that I would also include in this week's assignment something about Fireworks. This page is my attempt to that end.

The first thing that I noticed about Fireworks, is that it integrates optimization tools right in the main workspace of the program. Additionally, it has an optimize panel which was turned on in my program and visible from startup. That alone suggested to me that I may have been missing the boat on keeping this program buried within my Adobe directory. Once I really started looking, the program is obviously created with web development in mind. This is in stark contrast to Photoshop, which is very much geared towards photographic manipulation, and Illustrator which is geared towards print.

Optimizing in Fireworks (Exporting)

All of the general optimization principles that apply to Photoshop also apply to Fireworks. In other words, JPG's are still generally the best choice for photographs and graphics with gradients and millions of colors. GIF is still the file type of choice for flat color images. You still do the major tuning for JPG's with the quality setting, and the major tuning of GIF's with the number of colors. For a more detailed discussion of image optimization for the web, please see my optimization page.

Fireworks does not have a Save for Web & Devices option. Instead it has an optimize panel through which you export the native PNG file to some other file format. Save As in Fireworks has more options that the optimize window with respect to the number of file types you can save. The main idea with Fireworks is to export a flat file using one of several techniques that I will go through below.

The Original, Preview, 2-up and 4-up views are accessed from the top of the workspace right in Fireworks proper. This is much different that having to go to another window like in Photoshop. You can view the optimizations simply by clicking one of these button directly from the main workspace.

Export Wizard

One way to export and optimize is by using the export wizard. The export wizard walks you through the process of exporting PNG files to other, web ready formats.

File > Export Wizard...

The export wizard allows you to specify a target file size and it will assist in the optimization to maintain the target file size.

Additionally, the wizard will ask you what you want to do with the file. You can choose "the Web" and it will tell you that it recommends either GIF or JPG. Then it will show you its best shot at those two formats. It will preview both GIF and JPG side by side for comparison of the file size and the quality.

Once you see the previews, you can then click on one of them and further optimize the image manually in the options tab. Once you are satisfied with the optimized image, you then just click the export button and save it to the desired location on your computer.

Image Preview

Fireworks has an option for exporting that looks very similar to Photoshop's Save for Web & Devices dialog box. It is called "Image Preview".

File > Image Preview...

This will get you to the Image Preview as shown above. The Options tab in the Image Preview gives a very similar view to Photoshop's Save for Web & Devices dialog box.

There is another tab called the file tab that allows you other options like scale down the image and export a specific area. This is cropping on the fly when you export the image.

The last tab in the Image Preview window is the animation tab. If you have an animated GIF, you can change things like the timing of the animation and looping settings.

Export Area Tool

In Fireworks, you can export specific areas of your file, or page. You don't have to crop the area and export, you can simply click the Export Area Tool, which is in the tool bar with the Crop tool. Just click and hold the crop tool and you will see a fly out that shows the Export Area Tool.

You use this tool like the crop tool, by drawing out the area that you want to export. Then you either double click on the area or press enter and the Image Preview dialog box will appear with only the selected area in the preview. At this point you can optimize and export just as you would with the Image Preview.