Optimizing Images in Fireworks

As I'm sure you've noticed, working with images on the web opens a whole new door of possibilities. In fact, some of the most compelling websites on the Internet use images as a way of making their websites stand out from others. No longer are web designers measured only by their knowledge of HTML, CSS, and Dreamweaver; now they're also measured by how well they know image editing programs such as Fireworks to create engaging graphics for their sites. The problem is that you can create the most compelling graphics on the web, but if the image is so large that it takes a while to download on slow connections, you'll force most of your users to navigate away from your site, essentially invalidating the purpose for creating the compelling graphic. This is where image optimization comes in.

Image optimization is the process of getting an image to the smallest possible file size while maintaining an acceptable level of quality. Generally, image optimization involves removing color from an image to reduce the file size. The trick is to optimize the image so that the file size is reduced but the quality is not noticeably degraded. Rather than downloading or purchasing programs that perform optimization on images, you can instead use a command built right into Dreamweaver called Optimize Image in Fireworks. To use this command, follow these steps:

1.	Open the document you were working with in the previous section.
2.	Highlight the image in the document and choose the Optimize Image in Fireworks option from the Commands menu. The Find Source dialog appears.
3.	Much like the previous examples, the Find Source dialog allows you to make a decision on whether to optimize the original PNG file or the GIF image you're currently working with in Dreamweaver. For this example, click the Use This File button.
4.	This time, rather than the entire Fireworks program launching, the Optimize Image dialog launches. Although this appears to be a built-in Dreamweaver feature, it is in fact, still Fireworks.

NOTE

Starting in Dreamweaver MX 2004, Macromedia added the new "Headless Fireworks" option. This option allows you to perform edits on images directly from the Dreamweaver MX 2004 design area without having to open an entire instance of Fireworks.

As you can see from, the Optimize Image dialog is split into three tabs:

• The Options tab

• The File tab

• The Animation tab

Let's discuss each briefly.

The Options Tab

Features exposed in the Options tab allow you to set the actual compression algorithm for the image. For instance, the Format menu contains compression options such as GIF, Animated GIF, JPG, and so on. Selecting these options ultimately changes the color palette that is applied to the image. Because the option you select from this menu ultimately guides the options available to you in the dialog, let's break them down:

• GIF/Animated GIF: This option allows you to save the document as a GIF or Animated GIF. GIFs are best used for graphics with fewer colors and for color without any tonal range. When saving a GIF image, you save a color look-up table with it. The lower the number of colors stored in the palette, the smaller the file size. You can also apply a loss (eliminate redundant or unnecessary information from the file), which removes pixels from the image to reduce the file size. Finally, when you optimize an image as a GIF, you can add transparency by removing a specified color from the image.

• JPEG: This file format is best for saving images with many colors or for colors with tonal range (typically, photographs fit this description). Notice that when you select this option, a quality slider becomes available. JPEG compression works by removing pixels from the graphic, which ultimately reduces the file size. The lower the quality percentage you set in the slider, the more pixels it removes, providing a smaller file size. Be aware that there is no standard quality setting. Each image is different. With that said, you'll have to find the balance for the graphic you're working with at that particular moment in time.

  There is also an option for smoothing, which blurs the pixels a bit. Smoothing can be beneficial if you have to really squeeze the file size down and take the image to the edge where some artifacting (random pixilation) is visible. If you do see compression artifacting, sometimes a small amount of smoothing can help camouflage the image quality deterioration.

• PNG 8/24/32: PNG files are most closely related to the GIF file format and work in much the same way. You can preserve and create transparency; however, with PNG 24 and PNG 32, more colors are available to you. The PNG file format wasand I guess still issupposed to wipe out the GIF file format, but the complications between the browser wars left the PNG file format fighting for compatibility. Depending on your target audience, PNG files may or may not be a good choice for you.

For our example, choose the GIF option from the Format menu. One of the more important options exposed when selecting the GIF option from the Format menu is the Color menu, shown in Figure 19.7.

Figure 19.7. Numerous options are exposed to you when you select the GIF option from the Format menu.

From the Color menu, you can choose how much color the image should have. For instance, normal GIF images (without further compression) have a 256-color palette associated with them. Selecting 128 from this menu cuts the amount of color the image has in half, dramatically lowering the file size. (Note that you can see the file size in the Preview bar just above the image.) Additionally, you can remove individual colors by right-clicking a color cube and selecting the Delete Color option from the context menu.

Finally, you can allow Fireworks to remove unused colors automatically by enabling the Remove Unused Colors check box.

The File Tab

The File tab interface of the Optimize Image dialog, shown in Figure 19.8, offers basic options for working with the file size. Options such as image scaling in percent and pixels as well as specific areas of the image to export back to Dreamweaver are available within this tab.

• Scale: Use the options on the Scale pane to change the physical dimensions of the image. For instance, you can use the Percentage slider to change the image size based on a specific percent. You can use the W and H text boxes to change the width and height of the image in pixels. Finally, you can check the Constrain check box to resize the image proportionally.

• Export Area: This area is more or less a place to specify how you want the image cropped. If you check the Export Area check box, you get a bounding box around the image. You can drag any of the handles of the bounding box, in which case the corresponding x, y, w, and h values automatically update.

Figure 19.8. The File tab offers different options for changing the dimensions of the image.

The Animation Tab

The Animation tab of the Optimize Image dialog is used when working with animated GIFs. You cannot create an animation from this portion of the dialog box; rather, it offers options for updating animated GIFs. As Figure 19.9 suggests, you can modify the position of frames and the duration of frames, you can control the looping attribute of the animation, and you can even remove frames directly from this tab's interface.

Figure 19.9. The Animation tab of the Optimize Image dialog offers options for updating a GIF animation.

NOTE

In the 1990s, animated GIFs were the choice for web designers looking to add frame-based animation. Since the emergence of Flash however, animated GIFs have fallen by the wayside and are rarely used. Animated GIFs however, remain an excellent alternative for browsers that do not support Flash.

Additional Options in the Optimize Image Dialog

Aside from the more obvious options we've covered thus far, the Optimize Image dialog also exposes features for interacting with the image such as an Export Wizard, a Pointer tool, a Crop tool, a Zoom tool, and more. Shown by the callouts in Figure 19.10, these tools allow you to easily work with the image in the Optimize Image dialog's environment.

• Export Wizard: If you're new to optimizing graphics and need a helping hand, here it is. The Wizard option is good if you're not quite sure what the different options are or if you're new to image optimization.

• Optimize to Size Wizard: Even if you're a pro at optimizing graphics, you'll find this Wizard quick and convenient. When you click this button, a small dialog opens, allowing you to enter a desired file size. Fireworks then reduces the image down to meet the file-size requirement. If the image quality is too poor, you'll have to accept a higher file size for that image.

• Pointer tool: The pointer tool is the black arrow, which simply allows you to select the image. If you cannot see the entire image in the dialog box, click with the Pointer tool (it automatically turns into the Hand tool) and drag to reposition the image.

• Crop tool: If you need to crop the image, use this tool. Simply position the bounding box around the image to determine how you want it cropped.

• Zoom tool: This tool enables you to zoom into the image by placing your cursor over it and clicking. You can zoom out of the image by holding down the Alt key while clicking with the Zoom tool. You can also use the drop-down menu to choose the level of magnification.

• Preview window controls: Here you can determine how many preview windows you'd like to have open when optimizing the graphic. This can be beneficial because you can apply different optimization settings to the different quadrants in the overall window and then compare them all to determine which one you'd like to go with. Figure 19.11 shows four preview windows.

  Figure 19.11. The Optimize Image dialog has four windows open to preview different compression settings.

  
  
  

Figure 19.10. The Optimize Image dialog box offers several tools for optimizing graphics.

When you're done tinkering with the image optimization settings, click the Update button. Fireworks closes, and the image in Dreamweaver updates.

NOTE

Whether or not the original PNG image is optimized along with the GIF image depends on which option you select from the Original Source File menu. If you choose the Always Use Source PNG option, the original PNG image is optimized along with the exported GIF file.

Ultimately, how you optimize the image depends on your target audience. If you're working on an Intranet site where everyone in your organization has high-speed connections and the web server resides on the same network, image optimization might not be your number one priority. However, if you know that a certain percentage of your target audience visits your site using dial-up connections, image optimization might be a higher priority.