Image Rollovers in Adobe CS5 Dreamweaver
How to Create Gradients in Fireworks CS5 Graphics
How to Add Text Effects in Adobe Fireworks Creative Suite 5

How to Optimize Images for the Web in Fireworks CS5

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.

image0.jpg

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.

image1.jpg

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.

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

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

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Use Masking in Fireworks CS5
How to Import Images into Adobe Fireworks Creative Suite 5
Adobe CS5 Dreamweaver Page Images
How to Scale Images in Adobe Fireworks CS5
Adobe CS5 Dreamweaver Property Inspector Tool
Advertisement

Inside Dummies.com