Optimizing Photos (Fireworks)

August 21, 2007 – 4:00 pm

This is all you really need to know about optimizing your photos for the web using Fireworks.

This guide will let you take your photo through the following process: Once the photo is in the computer, resize it, optimize it, export it. Steps are basically the same with any other image editor. Note that screenshots here are from a Mac computer so everything may look a little different if you’re on a PC.

Note! If you are cropping or otherwise editing the photo you should do this before the steps described.

Step 1
If you use Fireworks, you will be needing the following panels: Tools, Properties, Optimize. Find them in the menu bar under Window:

window.jpg

Step 2
Reduce the image size so it fits onto your website. If the image is too big, the file size will increase and download time will increase. In Fireworks, go Modify > Canvas > Image Size.

imagesize.jpg

Step 3
Set your image to 100 percent view. Always work in 100 percent view because this is what you’re going to see on the web. In Fireworks you’ll do this to the bottom right corner of the image

view.jpg

Step 4
Adjust brightness and contrast. Most photos on the web need a little more light and a little more contrast to really stand out. Specially smaller photos. In Fireworks, click the image and then look into the Properties panel. Go Filters > + > and then…

adjustcolor.jpg

Step 5
Sharpen the photo. Sharpening increases the photo quality but also compensates for the quality loss in the next step. You are still in theProperties panel > Filters…

sharpen.jpg

Step 6
Chose Two Up (find it just above the image) to see both the original photo (left window) and the compressed photo (right window). Look into the Optimize window and turn the Jpeg compression to between 60 and 80. At the same time, compare the image quality of the two and compare the filesizes indicated at the bottom of the two image windows.
The quality of the photo on the web will be a compromise between compression and file size

twoup.jpg

Step 7
Export the compressed image, go File > Export, name it and place it where you can find it later on

export.jpg

  1. One Response to “Optimizing Photos (Fireworks)”

  2. Your blog is interesting!

    Keep up the good work!

    By Alex on Aug 18, 2008

Post a Comment