| You may run into a situation when a graphic's file size is just too large. Instead of deleting the image in Dreamweaver and then opening it in Fireworks to optimize and export it, and then finally re-importing it into Dreamweaver, you can use one simple command. Under the Command menu, you can optimize an image with Fireworks. To use this command successfully, follow these steps: -
Be sure to have a document open with a graphic placed inside of it. Also, make sure you save the document before applying this command. -
Highlight the graphic in the document. Choose Commands, Optimize Image in Fireworks. Much like the previous example, this automatically launches Fireworks. -
When Fireworks opens, a dialog box similar to the one in the previous exercise asks you the source of the image. Choose Yes to accept the defaults. This launches the Optimize window. -
In this dialog box are three tabs. You can manipulate the graphic in any way through this dialog box. After you're happy with the settings, click the Update button. -
After clicking the Update button, you exit Fireworks and return to Dreamweaver. Notice that the image has automatically been updated. The Optimize Window in Fireworks I wanted to explore some of the options you have available to you in the Optimize dialog box. This dialog box is identical to the Export Preview dialog box that you access through the File menu in Fireworks. However, if you're not too familiar with Fireworks, this will at least give you the opportunity to understand how to optimize graphics. Optimizing graphics is a very important topic, especially when you're trying to create a fast-loading site. The Options Tab I won't be revealing every option in this dialog box, but I will note the most significant features. The first tab to be highlighted is the Options tab, as shown in Figure 15.7. Figure 15.7. The Optimize dialog box by default has the Options tab selected.
This is the portion of the dialog box where you try to get the file size down to the smallest file size while maintaining quality by specifying which compression algorithm to use. Here's a breakdown of the available options: GIF/Animated GIF This 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 GIFs, 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, which will remove 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 there is a quality slider. 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 will remove, providing a smaller file size. There is no standard quality setting. Each image is different. You have to find the balance for the graphic you're working with at that particular moment in time. I recommend experimenting with several quality settings. There is also an option for smoothing, which will blur the pixels a bit. This can be beneficial if you have to really squeeze the file size down and take the image to the edge where some artifacting 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 was and I guess still is supposed 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, PNGs may or may not be a good choice for you. The File Tab The File tab offers some basic options for the file in general, such as dimensions as shown in Figure 15.8. Scale Here you can change the scale of the image, either based on a percentage or you can enter actual pixel values for the width and height. When entering pixel values, you may want to check the Constrain check box; just be sure to preserve the proportions of the image. 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 will get a bounding box around the image. You can drag any one of the handles and the corresponding x, y, w, and h values will automatically update. Figure 15.8. The File tab offers different options for changing the dimensions of the image.
The Animation Tab The Animation tab is used when trying to update a GIF animation. You cannot create an animation from this portion of the dialog box; rather, it offers options for updating animated GIFs. As Figure 15.9 would suggest, 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. Figure 15.9. The animation portion of the Optimize dialog box offers options for updating a GIF animation.
Additional Options in the Optimize Dialog Box Some options are available throughout the entire Optimize dialog box. Some of these features can be extremely helpful, which is why I want to point them out. Refer to Figure 15.10 to see each of the components. Export Wizard If you're new to optimizing graphics and need a helping hand, here it is. This 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 quick and convenient. When you click this button, a small dialog box opens, and in this dialog box you can enter the 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, when you click with the pointer tool, it automatically turns into the hand tool. Crop Tool If you need to crop the image, you can 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 Option (Mac) key or Alt (Windows) 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 window. Notice in Figure 15.11 you can have up to four windows. Figure 15.11. The Optimize dialog box has four windows open to preview different compression settings. 
Figure 15.10. The Optimize dialog box offers several tools for optimizing graphics.
|
