Using Fireworks:
Comparing Compression Schemes & Using the Optimize Panel

The intention of these exercises is to demonstrate to you the benefits of using one compression format over another: JPEG or GIF. Web pages use those two formats for almost all images. What you should find out is that, generally speaking:

• For photographs, JPEG will produce a superior image with a smaller file size.
• Images consisting primarily of areas of solid color (such as most logos, comics, images of text) are usually best as GIF files.

Your objective is this: to determine the file format (JPEG or GIF) and the settings for it that will provide you with an image that looks acceptable and also has the smallest possible file size (in KB). Image files sizes are the primary cause of slow web page downloads.

Photograph Optimization:

1. Right click on the image of the stream and select Copy.
2. Start Fireworks (download it from their site if you haven't already and remember to download ONLY Fireworks. Do not download Dreamweaver, Flash or Macromedia Studio.
3. In Fireworks go to (using the menus) File -> New
   • NOTE: you can also download the image by right-clicking here and then selecting Save Target As... or Download Link to Disk, or something similar (depending on your operating system, browser, etc.)
4. A dialog box will open with a suggested size. This should be the exact size of the image you just copied!
5. Click OK
6. A new file will open.
7. In the Fireworks menu select Edit -> Paste (or use the keyboard: Ctrl-V)
8. In the Fireworks toolbar, be sure the Pointer Tool (black arrow) tool is selected.
9. In the toolbar immediately above the image, select the button 4-Up.
   • You will see four views of the same image.
   • They are all the same at this time. Fireworks allows you to change each of them independently so that you can compare optimization (compression) settings in order to select the best one.
10. First, click on the image in the upper right corner.
    • It should now have a black border around its quadrant, indicating that it is currently selected.
    • Note that an initial estimated compressed file size is displayed (ending with the letter K for Kilobytes) directly under the image along with the amount of time it would take for the file to download with a 56kbps modem.
11. Open the Optimize panel using the menu: Window -> Optimize
12. In the Optimize panel, in the pull down menu at the top of it, select JPEG - Better Quality if it is not already selected.
13. Using the Quality slider, try different settings. Note that the setting you select will not affect the image until you release the slider. To do this, click away from the slider.
    • The effect of the settings will be visible in the image you selected.
    • As you increase or reduce the Quality setting note how the file size and image change. Reducing the quality level makes the file smaller but it also makes the image look worse.
    • Your task is to make the download time as brief as possible and yet maintain an acceptable level of image quality.
    • You are striving for an optimal balance of the smallest file size possible while maintaining acceptable image quality. This is called optimizing.
    • Keep in mind that the criteria for what constitutes acceptable quality is usually a very subjective decision. There is no correct answer.
14. Be sure you are using the Pointer tool by pressing V on your keyboard.
    • If your cursor is a white arrow, press V again and it ought to become a black arrow.
    • V is a hot key for the pointer tool. It will alternate your current tool selection with the Select Behind tool, which has a white arrow and allows you to select objects obscured by other objects stacked on top of them.
    • You can see other hot keys by hovering over them in the toolbar.
    • If there is a small black triangle under a tool, it means that there are related tools underneath it that you can select by either:
      • click-holding on the tool with your mouse, or...
      • repeatedly pressing its hot key
15. Now select the quadrant in the lower right area. After selecting it, the quadrant should be surrounded by a black border indicating that it is selected.
16. Return to the Optimize panel.
17. In the Optimize panel, in the pull down menu at the top of it, select GIF Web Snap 256.
    • Check the image quality and file size underneath the image. If you can't see the file size and download time, maximize your file's window. I hope that you know how to do it because it's basic Windows knowledge. Also, hide your Properties panel by pressing Ctrl + F3 on your keyboard. If you still can't see it you may need to change your monitor's resolution to 1024x768, which is the recommended resolution for Fireworks. This can be done using the Windows Start button -> Control Panels -> Displays -> Settings tab.
18. Does the image look good?
19. Reduce the file size by reducing the Colors used. Do this using the Colors menu in the Optimize panel.
20. The fewer the colors, the smaller the file, however the image quality will deteriorate.
21. You can manually type in an amount, however GIFs cannot hold more than 256 colors.
22. Try increasing the Dither percentage.
    • Dithering uses dots of the available colors to attempt to mimic other colors that were in the original image but are not available now due to the limit on colors.
23. Which do you prefer, gif or jpeg? Its' a subjective judgment. However, generally photos are better off as jpeg.
24. Send me an email as follows:
    • In the email, enter the subject as: Exercise JOG number 1
    • Then answer these questions:
      • Do you prefer jpeg or gif?
      • If you prefer gif, tell me how many colors you believe are the minimum needed for an acceptable image.
      • If you prefer jpeg, tell me the quality level you believe is the minimum needed for an acceptable image.
    • There is no right or wrong answer. You only need to demonstrate to me that you have done the work by providing settings somewhere within the range of possibility.

Solid Colors Optimization:

1. In Fireworks, go to: File > New to create a new file.
2. In the New Document dialog box:
   • Specify a Canvas Size of 200 by 200 pixels.
   • Set the Resolution to 72 dpi (this is what you should always use for Web images).
   • Select Canvas color -> Custom
     (Note: Canvas is the name Fireworks uses for the background.)
   • Then click on the color selector underneath the word Custom.
   • The palette of Web safe colors will appear.
   • Select a Canvas color, but keep the color light.
3. In the Toolbar, select the Text tool (it uses the icon of the letter A) then click anywhere on the canvas.
4. Type your first name.
5. Then select the letters of your name by click-dragging over them or double clicking on them.
6. You now have a choice of using either the Properties panel or else opening the Text Editor (in the menu: Text -> Editor...), which is what I prefer.
7. Either way, using the controls available to you in either location do the following:
   • Select a font such as Helvetica or Arial.
   • Make the text bold using the B button.
   • Make the text a dark color but not black.
   • Modify the text size so that your name is as large as the canvas.
   • There is an unlabeled menu in both the Properties panel and in the Text Editor that has No Anti-Alias selected. Use that menu to determine which anti-aliasing setting is best. There are three options. They create slight blends with the background color to make the text look smoother. Note that some anti-aliasing is usually needed for text larger than 14 or 16.
8. Then select the Pointer tool (the black arrow tool).
   • To reposition the text, use the Pointer tool to click and drag it into position.
   • If you want to reedit the text, just double click on it. Then be sure to select the text before you try to modify it.
9. Next, at the top of the file's window, select the 4-Up button again.
   • Note: if you can't see the text any more, hold down the space bar on your keyboard which will temporarily change your cursor into the hand tool. This tool may only work in the upper left quadrant initially. The hand tool does the same thing as using scrollbars. Then click-drag on the canvas until you bring the text into view.
   • Reselect the Pointer tool when done.
10. Now experiment with different optimization settings in the same way you did previously.
    • Try both GIF and JPEG using the top menu in the Optimize panel.
    • Get the file size as small as possible and yet still maintain acceptable image quality.
    • Check the image quality and file size as you experiment.
    • It is important to note that text should never be judged in Fireworks at anything other than 100% magnification. You can press Ctrl + 1 (that's Ctrl plus the number 1) to set your magnification to 100%.
11. Which do you prefer, gif or jpeg? It is again a subjective judgment. Generally, images of this type are better off as gif files.
12. Send me an email with the file type and settings that you prefer:
    • In the email, enter the subject as: Exercise JOG number 2
    • Then answer these questions:
      • Do you prefer jpeg or gif.
      • If you prefer gif, tell me how many colors you believe are the minimum needed for an acceptable image.
      • If you prefer jpeg, tell me the quality level you believe is the minimum needed for an acceptable image.
    • There is no right or wrong answer. You only need to demonstrate that you have done the work by providing settings somewhere within the range of possibility.

Do NOT do the following, however read it:
If you wanted to actually create a gif or a jpeg file to use on a Web page (and that's what you would normally want to do next) your next steps would be:

1. Select the quadrant containing the settings you want to use.
2. File menu -> Export...
3. In the Export dialog box, specify the location where you want to save the exported file.
4. Use File name to name the file You do not need to add a file extension, that will be done for you automatically.

Conclusion:

You do not need to send me any of the files you worked on, just inform me in separate emails as instructed of the settings that you arrived at.

Both of the above examples demonstrate that the choice of compression scheme is dependent on the image subject matter and one's own visual sense.

updated 10/15/05

© 2004 Dan Hitchcock Vaughan and its licensors. All rights reserved.