Optimizing Images

Because typically every two kilobytes of file size in a graphic for the web represents about one second of download time (based on 56 BPS modem speed), you will want to optimize your graphic so that the file size is as small as possible, but the image quality still has good resolution. Fireworks allows you to easily optimize graphics you create or edit.

1. With Fireworks open, go to and select the File/Open menu item. In the dialog box, navigate to the folder on your Desktop where you have saved the tutorial files, and click on the "ballooning.jpeg" file. Notice under the "Preview" section of the dialog box that the balloon image has a file size of 33.79 K, which is relatively large for an image going into a web page. Once noticed, go ahead and click the "Open" button to import the file into Fireworks.

2. Because the file size of the balloon image can be considered too large to be included in a web page, you will want to optimize it so the file size is smaller, but you still want to maintain the image with reasonably good resolution. To do so:

Click the "4-up" tab located on the top portion of the Canvas window. Once done, four views of the balloon image will appear. Three of the views provide information showing the reduced file size of the image after Fireworks has automatically optimized the image.

Should you wish to optimize the image further, you can do so manually using the Optimize panel. Using the Optimize panel in this manner provides you with the means to optimize separately each of the views other than the "Original" view.

3. To bring up the Optimize panel if it is not present, go to and select the Windows/Optimize menu item so it is checked. Once the panel appears, click your mouse pointer on the view to the right of the "Original" view so it is selected.

Next on the Optimize panel, change the "Export file format" menu selection from "JPEG" to "GIF". You will immediately notice that the file size and downloading time of the view you selected are reduced.

4. Next, select the view beneath the "Original" view and change the "Export file format" menu selection on the Optimize panel from "JPEG" to "GIF". But this time also make sure that on the Optimize panel the "Colors" selection indicates "32." You will immediately notice that the file size and downloading time of the view is reduced, but that the image resolution of the image is lessened also.

5. Finally, select the view on the lower right-hand side. Keep the "Export file format" on the Optimize panel at "JPEG." But change the "Quality" selection on the panel to about "70."

You will notice that the file size and downloading time of the view is reduced almost the same as the previous view, but the resolution quality of the image in not lessened. This comparison/contrast procedure is one of the best and easiest ways to optimize images for the web. You can even simplify the procedure by clicking on the "2-up" tab instead of the "4-up" tab.

6. Once you have made the modifications to optimize the image, make sure the view you want to optimize is selected, and then go to the File/Export menu item. In the dialog box that appears, you can navigate to your Desktop folder to save the file. Title the file, "New_Balloon," and then click the "Save" button.

to top of page