• Think of Export as a fancy way to Save an image.
• Always use it, instead of Save, when optimizing images.
• If you choose Save, then Fireworks will save your image in the PNG (pronounced "ping") format, which can be useful, but probably isn't really what you want to do.

• When Original is highlighted, you see your basic image, without any optimization applied.
• If you click on Preview, you'll see how the image will look when it is exported.
• If you click on 2-Up or 4-Up you'll see both the original image and the image as it will appear when it's exported.
• This is where the optimizing really takes place!
  
  This shows the original image of Renee and three different versions. How was this done? By using the Optimize "panel."
• When you start Fireworks, many small windows or control "panels" open as well. You can open/close panels by clicking on the Window Menu:
  
  Checked panels are visible; unchecked are hidden. Click on the ones you wish to see.
  
• To change image formats in Fireworks you'll need to open the Optimize Panel, if it's not already visible.
  
• To start the export, click on 4-Up.
• Each frame in the 4-Up preview can display the graphic with different export settings. Because each frame accurately reflects the exported graphic, you can use 2-Up and 4-Up views to compare different settings and create the smallest file size while maintaining an acceptable level of quality.
  
  E.g., at 16 colors, the renee GIF would be 8.09k in size and download in 2 seconds on a 28.8kbps modem. (Currently, most modems are twice this fast so use this only to compare figures.)
  
• Magnification and image-movement control.
  • Choose the Magnify tool, and then click to magnify the preview.
    • Use Alt-click (Windows) or Option-click (Macintosh) to zoom out.
  • Choose the Hand tool and drag within a frame to move the image.
  • 2-Up or 4-Up are selected, all frames are magnified to the same level and all previews pan simultaneously to display the same portion of the image.
• Choose JPEG in one of the frames and you'll see the following options:
  
• Use the Quality setting to adjust the size of the file.
  Lower percentage = lower quality and smaller file size
  • But often the quality difference is barely perceptible!
  • In Export, use Fireworks' 4-Up to compare. For example, note differences between 100% (upper right frame) and, clockwise from there, 80%, 60%, 10%. (This image magnified to emphasize the differences.)
    
    The 100% and 10% images, regular size:
    

GIF vs JPEG examples

1. Cartoon-like image
2. Photographic image
3. Weinman's many examples (chapter 5-6).

FIREWORKS EXERCISES

Fireworks' preview gives you a good sense of file size, but what if you're not using preview?

• Bytes, bytes and more bytes--a few figures:
  • kilobyte = 1,024 bytes (though often rounded to one thousand)
  • megabyte = 1,048,576 bytes (rounded to one million)
  • gigabyte = 1,073,741,824 (founded to one thousand-million)
  • Disk storage:
    • Floppy holds approximately 1.5 megabytes
    • Zip disk holds approximately 100 megabytes (or 250 megabytes)
    • Hard drives hold gigabytes (thousands of megabytes)
  • Most Web pages should be less than 100 kilobytes
    • In order to keep download time short..
• Windows: Windows Explorer shows you fairly accurate size
  • Use F5 to refresh the list
• Mac: listing in folders is innacurately rounded
  • E.g., listing with graphic files in it
  • Only way to know true size is the Get Info command
    • Highlight the file you want to check, go to File Menu, choose Get Info
    • Keyboard shortcut: COMMAND-I
• When using Fireworks with Windows, the size can be viewed in any file dialog box--e.g., the Open File dialog.
  
  Which also includes a "thumbnail" preview of the file you have selected.
  Tip: you must press the Details button to see filesizes.

1. Use Export to change a GIF to JPEG, then compare file sizes and quality. (Use the GIF image below. Grab it from the browser, save it on the Desktop, start Fireworks, open the file in Fireworks.)

• TracerouteWhitehouse.gif
  

2. Use Export to change a JPEG to GIF, then compare quality and file sizes. (Use the JPEG image below.)

• renee.jpg.
  

Pixels, Pixels, Pixels: Resolution

• Screen is made up of little dots of light, or pixels
  • Image is created by electron gun zapping them and turning them a certain color
  • Three phosphor dots (red, green, blue--or RGB) create one colored pixel
• Monitor resolution is rated in terms of the maximum number of pixels it is capable of fitting on the screen.
  • Some standard resolutions, measured in height by width, are:
    • 640x480
    • 800x600
      • Current, de facto standard for Web work.
    • 1024x768
  • Even though this is maximum, you can set your screen to a lower resolution--which is sometimes useful in Web design
    • Demonstration:
      • On Mac, use the tab on the left of the screen to change resolution.
        • Change resolution from 800x600 to 640x480 (or vice versa)
      • On Windows98, click on the monitor in the system tray (lower right corner of screen).
        • Choose a resolution and number of colors:
          
• How many pixels in an inch then?
  • At 640x480 resolution, there are 72 pixels (or dots) per inch (dpi)
    • This is a key number to remember!
      • Images created/scanned at 72 dpi will be about the same size as the real thing!
    • E.g., same image at different resolutions is physically a different size
  • Demonstrate with Screen Ruler utility
    
• Ways to change image size
  1. HTML's width/height attribute of <IMG> tag
     • Regardless of original size, you can manually set a size (as was explained in the first tutorial, Lesson Three--with copper.gif)
     • Sometimes useful when taking a small file and make it look large--but it often winds up distorting the original:
       (82x68) becomes at 200x200
     • And the pixels become really obvious
     • Making a large image smaller can occasionally be useful
       • But usually it's not a good idea because the file will still take a long time to download--which defeats the purpose.
  2. Image editor such as Adobe Photoshop or Macromedia Fireworks (currently $99 for ed.)
     • For this demonstration, I'll use Fireworks, but previously I've used Photoshop and I've left those lessons online. Wherever you see a icon, you may connect to a previous lesson that using Photoshop.
       • For instance, an explanation of adjusting image size with Photoshop is over here:
     • In Fireworks: Select Modify Menu, then Image Size:
       .
       • Change Width/Height in Pixel Dimensions, by percent or actual pixel number--keeping the 800x600 standard in mind.
       • Ignore Print [on paper] Size except for Resolution, which must be 72 dpi.
       • Choose to Contrain Proportions, usually.
         • Keeps the proportion of width to height the same
         • Maintains the aspect ratio of the image

FIREWORKS EXERCISE:

Shrink a picture and check file size.

Grab an image through the browser, save it on the Desktop, start Fireworks, and open the file in Fireworks.

• Use the image of the UUNET backbone from the "Internet Structure" lecture:
  • Click here to display BackboneUUNET.jpg . Then right click to nab it.
  • The original is a large 864x568, and it weighs in at 120k (too big for most Web images).
  • Reduce the height and width of the image (click Modify Menu, then Image Size).
  • Use "Export" to save it as a JPEG under a new name.
  • Compare the sizes of the two files.
• A sunset example of effective size reduction

And still there's more . . .

References

1. Lynda Weinman, Designing Web Graphics.3 (Indianapolis, IN: New Riders Publishing, 1999).
2. Lynda Weinman, "IMG Source: Bandwidth Blues?," devhead/ZDNet, December 9, 1998.
3. Fireworks Help and tutorials--available through the Fireworks Help menu (you must be running Fireworks to start these):