How to Optimize Images for the Web in Fireworks CS5 - dummies

How to Optimize Images for the Web in Fireworks CS5

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Once you have created and edited an image in Adobe Fireworks Creative Suite 5, you’re ready to prepare it for the web. You must consider two major factors in web graphics: speed of download and appearance. Having the best of both worlds is difficult, however; usually, you opt to give up some appearance for better speed. This process is optimization.

Preview web settings

Fireworks CS5 helps you with the optimization process from the beginning. By using the 2-Up preview in the upper left section of the image window, you can easily compare your optimized image with the original, based on your settings in the Optimize panel.

You can even use the preview windows to compare two to four web formats and see which one looks best but has the most reasonable file size. Each preview window includes important information, such as file size.

If you want to go crazy, you can compare four settings by clicking 4-Up. Using the preview windows, you can quickly change various settings — such as format, number of colors, and quality — and see the effect immediately, without previewing the image on the web.


Work with the Optimize panel

Now that you know how to compare images, where do you make the necessary optimization changes? In the Optimize panel, of course.


When you understand the web-format settings, you can click the preview image you want to optimize; choose Window→Optimize to open the Optimize panel; and apply settings that provide the best, most size-efficient image.

If you aren’t sure what to pick, choose a default setting from the Saved settings drop-down menu. Typically, line art and vector graphics (created with solid colors) are best to save as GIF files, whereas photographs or images with gradient tints should be saved as JPG files. After choosing the optimal settings, you can export the image.

Export for the web

You can export individual images or entire web pages by using the Export feature of Fireworks.

To export a Fireworks document, follow these steps:

  1. Choose File→Export.

    The Export dialog box opens.

  2. Navigate to an appropriate location to save your file.

    If you intend to use this image on a website, the best practice is to save it in the folder you typically use for web images.


  3. Type a name in the File Name text box.

  4. Choose Images Only from the Export drop-down list and click Save.