Extreme Website Makeover - Optimizing Images with the Optimize Palette

Learn How To Optimize Images with the Optimize Palette in Fireworks

In Fireworks, the images we export are controlled by the optimize pallet. I have got it right up here at the top of my pallet so I am just going to click on the triangle to open it up and you can see that it has all the settings for what type of image is going to be exported fro the program. I can choose from GIF, jpeg and a lot of other none compressed formats as well. For our webpage, obviously we are going to be focusing on GIF and jpeg. For each one of the formats you can choose, you have a lot of different ways to optimize it for the image quality that you are going to receive at the end. Now one of the best ways to work with the optimize pallet is the switch from the original view to a two up view. This shows you your design so that all the graphics look exactly the way you have imported them and laid them into the presentation. The second window shows you the results of the compression. We can use normal zoom tools like Command + or Ctrl + on the PC to zoom in to the selection then I can use the space bar to access the hand tool to pan around and take a look at specific areas. It is actually kind of nice that in the preview window it does not show us the web slices so we can see exactly what our images are going to look like. Now the slices we were concerned about were the border flames on the side of the image so let us pan over there and take a closer look at them. Now even through the green tint, you can see that we had a nice smooth gradient in our original graphic. We have got this dandelion showing up in our GIF image. That is mainly because you achieve your compression in your GIF image by reducing the number of colors, and they have a maximum of 256 colors per each image. Now let us just select that slice so we can work it. Let us go over here and click on the slice and you can see that it kind of un-dims the slice and sets it to active. It is showing me the GIF compression that has on it and the colors that it has got selected to be able to create the file. And to move this into a jpeg compression all I need to do is choose jpeg and set up my settings for it. Already you can see in the preview window that we have got a much better graphic there instead of all that banding. We have got a nice smooth gradient going in. As you select each slice, it is giving exact feedback at the bottom as to how big that jpeg is going to be when it exports. So you can modify your quality settings based on size and also by the image quality itself. Also, notice down in your property windows, you do have a compression pulled down and this will actually allow you to choose between preset compressions. If you make a very specific selection of compression settings up at the top, let us say for instance 85 just to try one out. You will notice that that is in a preset so it does not appear in my properties window. But if you think you might be using that setting again, you can go up to the optimize fly out pallet at the top, save those settings under a preset name. I will call them “alien jpeg” just so we can find them. We will click okay to accept it, and for any other settings, I can use the preset now instead of going up and specifically having to pick all of my compression settings by hand. I will do that for the rest of the flame border images. I will just use the space bar to access my hand tool, there we can see our other two flame images and I am going to pick the top one. I will use the preset that we setup for that “alien jpeg” and set that on the side one as well. This kind of optimization gives us ultimate controls. We can go to each slice and set it up exactly the way it needs to be exported. Now obviously in most projects what you will want to do is go through each one of your image slices and fine tune it just to make sure it is going to be compressed correctly for the image results. But I am going to leave the rest of ours at GIF for right now just so we can get on with the rest of the project.