Optimizing images

  1. Name the file something meaningful instead of "img_0379.jpg"
  2. Load image into Adobe Fireworks using File | Open
  3. Crop the photo to focus on the real image
  4. Re-size to get the desired width. Photos destined for front page have to be right height as well
  5. Set your optimization properties to JPEG - Better Quality
  6. Export your image (File | Export), paying attention to which folder you are using and adding to the end of the export file name the width
  7. When you are done, copy both the original image and the optimized image to your assigned folder.

Optimizing images for the Web with Fireworks

When images are used online, they need to be optimized for the Web. Fireworks is the best tool for doing this, and we have Fireworks on PCs and Macs in News Central. You will be placing both your original images and any that you have optimized into the folder assigned to you. While Fireworks is capable of doing all kinds of image manipulation, we are only interested in cropping, sizing, and optimizing. Here's how you do that in Fireworks.

Crop image

Crop image toolNot all images need to be cropped; some only need to be resized. If you do need to crop an image, follow this procedure: Once you have loaded a copy of your image into Fireworks (File | Open), click once on the image to select it, and then select the crop tool. Using this tool, cast a box around the part of the image you want to show up in finished product. You can re-size the box using drag points and you can move the entire box using arrow keys. When you have the correct area selected, hit the Enter (Return) key, and all the rest of the image will go away. NOTE: you need to be working with a copy of your image, not the original.

Resize image

When you resize an image, you are interested in adjusting only one dimension of the image – usually the width. By default, Fireworks locks the aspect ratio of an image so that if you change the width, the height changes proportionally. This is to avoid distortion. So let's say that you want your image to be 300 pixels wide. You would specify 300 pixels width, and the height would be recalcualted before your eyes.

Rezizing an imageTo re-size the image, you first select the image. Then select Modify | Canvas | Image Size. This brings up a dialog box that lets you change either the width or height. If you want to change both, you have to unlock proportions.

With the image re-sized you may wish to adjust the zoom level. You can do this under the View menu or by opening a pop-up menu from the lower right hand corner of the Fireworks desktop.

Optimize image & export

Once you have the image the size and shape you want for its use online, you are ready to optimize and export. This is done in one motion, but you have to be sure the optimize settings are at "JPEG - Better Quality." The "Optimize and Align" panel is located in the right sidebar above the "Pages and Layers and Frames" panel. Be sure to open Optimize and Align panel.

The Optimize PalatteSelect "JPEG - Better Quality" from the first drop-down menu. Accept defaults for the rest of the settings, including 80 for Quality and 0 for smoothing.

Only after you have set the optimize settings to "JPEG - Better Quality" are you ready to export the image. This is done from the File menu: File | Export. Fireworks brings up a dialog that is very much like a File | Save As dialog. It is asking for a file name. You should give the file a name that is meaningful, and you need to add the width of the image to the end of the name. Thus a picture of the Administration Building Belltower that is 200 pixels wide (like the one at the left) might be named "belltower-200.jpg" IMPORTANT: Pay special attention to which folder you placing an image in. Fireworks by default wants to place an exported image into the same folder it last exported to. Be sure you tell Fireworks where to put the file.

Finish your work

Now that all your images are done, they are ready to be uploaded to the Web.