Skip Navigation.

Fireworks: Exporting images and code

The most challenging part of making interactive web graphics (like image maps and rollovers) is the HTML code itself. Not only do you need to learn how to make your graphics look nice and sharp, you need to learn how to code the <MAP> tag (or worse, javascript). Fireworks does all that for you. It also optimizes your images so your readers can download your pages more quickly.

Optimizing your images

Since fireworks is tailored to create web graphics, it has many complex mechanisms that allow you to optimize your image before you export it. In other words, it helps you make the file size smaller so your reader has a shorter download time.

To optimize your image for exporting, follow these steps:

  1. Once you've got your image ready, click the "Preview" tab above the main canvas. You will see an example of the image the program is currently set to export.

    Fireworks Optimize Window
    Optimize Window
  2. To change the export settings, click the "Optimize" tab in the Optimize/Object/WebBehaviors panel. You have several options available:

    Preset settings    (The pulldown menu with "Gif WebSnap 128" selected)
    This menu allows you to choose easily between several pre-set settings groups

    Image type    (The pulldown menu with "GIF" selected)
    Choose from among the available images standard for web graphics.

    Color Palette    (The pulldown menu with "Web Adaptive" selected)
    Each image on the web comes with its own color palette. The smaller the palette, the less download time. If you have an image that only uses three colors, for example, choose "Exact" from this menu to use a palette of three colors for that image.

    Loss    (The pulldown menu with "0" selected)
    Reduces file size but can drastically reduce quality too. Usually use no more than 15 loss.

    Matte    (The pulldown menu with a grid selected)
    This is the color that will appear in any 'transparent' areas on your image.

    Colors    (The pulldown menu with "128" selected)
    This setting allows you to directly control the number of colors in the palette for your image.

    Dither    (The pulldown menu with "0%" selected)
    Dithering allows you to recover colors unavailable in your palette by mixing sets of pixels together. This is a useful way to keep file size down when exporting complex graphics.

    Transparency    (The pulldown menu with "No Transparency" selected)
    This menu determines whether or not the Matte will show in the blank spaces of the image.
    Fireworks Preview Window
    Click for full size preview window

  3. If you like, you can view more than one preview at the same time. Click the "2-Up" or "4-Up" tab to see more than one optimized image simultaneously. To view alternate optimization options, click on the different windows and adjust the optimization tab accordingly.

  4. Once you've selected the format and settings you want, click File, choose Export... and name your image.

Exporting images and code

When you export interactive images, like rollovers or image maps, Fireworks also exports HTML code that you can then integrate into the webpages you're making. This is especially handy for rollovers with slices that involve several different images held close together by a precise table.

To export images and code with Fireworks, follow these steps:

  1. Prepare your images with interactive features (like image maps or rollovers). Choose Export... from the File menu. The export window will open.

  2. Choose "HTML and Images," "Export HTML File," and "Export Slices" and then click "Save." Fireworks will output a web page (with the name you give to it) and several images (slices) sharing that name. Feel free to examine our example of the code exported by fireworks.

  3. Cut-and-paste the code for the rollover or image map into another web page (or build your page around the code exported by Fireworks). We used the code from fireworks to add the rollover below to this web page.

Back