web academy title search icon Search mp iconSite Map  
Course Resources | Video Tutorials | Tutorials | Presentations | Handouts | Calendar | Evaluations | Contacts | UEN
Dreamweaver     |     Fireworks     |     Flash     |     my.uen     |    Virtual Tours
Fireworks
Photo Editing
Masks
Vector Objects
Text
Text on a Path
Shapes
Drawing
Borders
Web Tools
Samples
Tutorial Home
Optimizing and Exporting  

The image is now ready to optimize and export. Optimizing is the process of determining which format, jpg or gif will look best as well as download the fastest.

In order to be used on a web page an image must be compressed as a gif or jpg. In general photos will be best as jpgs and line art type graphics will be best as gifs.

Fireworks has an tool that allows the comparisons of the different compression. It is the "Export Preview" window.

thumb
Click to enlarge

  1. Go to File >> Export Preview.
thumb
Click to enlarge

  1. Once this window opens maximize it.
thumb
Click to enlarge

  1. Using the buttons along the lower middle split the screen so two versions of the image can be seen. This will allow the comparisons
thumb
Click to enlarge

  1. Click on the top image and notice the details in the upper left. This image is a jpg compression of 1% , a file size of 143 k, and a download of 23 seconds. The image looks good but the file is huge because it hasn't been compressed much
thumb
Click to enlarge

  1. Click on the lower image and use the quality controller on the left to change the value from 99 to 60. Notice the file size drops to 13 k with a download of 2 seconds. Is the loss in quality noticeable? A little but is it worth it? It depends on what the image is being used for.
thumb
Click to enlarge

  1. If need be to screen can split into four versions for comparing more options. Once a compression type and level have been decided click export to make the conversion
thumb
Click to enlarge

  1. Just make sure the image gets into the appropriate root folder and to a place it can be found when back in Dreamweaver.
thumb
Click to enlarge