Fireworks provides you with two ways to control the optimization of your graphics on export: the Image Preview dialog box and the Optimize panel. Let's take a look at the Optimize panel first. Because the core of image optimization is finding that magical balance between image quality and file size, it's helpful to have a way of comparing images at different optimization settings. Use the Preview buttons (see Figure 5.1) to preview your images in one, two, or four panes. You can then select each pane and apply a different type of optimization, testing lossless and lossy setting of various levels. Then you compare each pane's results for size and quality. Figure 5.1. The Preview buttons enable side-by-side comparison of various optimization settings.When you first view your image in the Preview 4-Up mode of your document window, you see the original image in the top left, and the copies of the original in JPEG or GIF format in other views. To change optimization settings, begin by opening the Optimize panel on the right. Then select a Preview pane and a black border appears around it. Enter the desired settings in the Optimize panel (see Figure 5.2) and the image preview changes its appearance and its size indication to reflect the settings. Figure 5.2. Use the Optimize panel to change optimization settings.
File statistics appear in the bottom of the window (see Figure 5.3). Figure 5.3. File statistics appear in each of the Preview panes to show you how your optimization settings will affect file properties.The Optimize panel (see Figure 5.4) has several sections that change, depending on the type of file that is chosen:
Figure 5.4. The Optimize panel contains different sections that enable you to adjust the export settings.
Optimize to Size CommandThe Options menu in the Options panel contains several options for the optimization process. Many of these options are self-explanatory, or are only in support of specific settings. One option that is worth mentioning is the Optimize to Size command. This command launches the Optimize to Size dialog box, where you can enter a specific file size for the optimized file (see Figure 5.5). This command is handy if you are restricted to a specific file size, such as those required for banner advertisements. Figure 5.5. The Optimize to Size command enables you to optimize an image to a specific file size.
Using Saved SettingsFireworks 8 ships with seven predefined optimization settings. These settings represent common configurations and are often good to use "as is" for nearly every web project. To use one of the settings, simply select one from the Saved Settings drop-down menu at the top of the Optimize panel (see Figure 5.6). Figure 5.6. Fireworks 8 comes with seven Saved Settings for image optimization.
The seven settings are summarized as follows:
For vector art or text, GIF generally provides better compression. Use the Preview button for your document to determine the best of the saved GIF settings to use. For photographs and gradients, JPEG is typically the best bet. Again, use the Preview button to view your document and test different export settings to select the best of the JPEG settings or even some of the GIF settings such as GIF Adaptive 256. To create your own custom setting, use the Optimize panel to modify an image. Choose Save Settings from the Options menu (see Figure 5.7). Enter a name in the Preset Name dialog box and click OK. The new setting is now a part of the settings list. Figure 5.7. Create and save your own settings, using the Save Settings command in the Options menu.
Tip If you are optimizing the same type of image over and over, you can save yourself time by creating the optimization settings and then saving them as custom settings. Once the settings are saved, you can apply the optimizations to any image by choosing the name of the customization from the drop-down menu. To remove a setting, make sure it is selected in the Saved Settings drop-down menu. Choose Delete Settings from the Optimize panel's Options menu and click OK in the warning dialog box. Creating Manual SettingsAlthough the saved settings are convenient and can be used for most exported web graphics, sometimes you still need to tweak an image's compression settings by hand. Fortunately, Fireworks enables you to manually create custom optimize settings for your images in the Optimize panel. Manually Optimizing JPEGsWhen manipulating JPEG compression settings, use the Quality setting to control the amount of compression applied to the image. Enter a number between 1 and 100 (or use the Quality slider). The higher the number, the better the quality and lower the compression. The lower the number, the more data will be thrown out. In general, quality settings over 80 are pretty close to the original image. Settings between 60 and 80 are more compressed with generally acceptable quality. Settings below 60 are a gamble as quality begins to degrade quickly because a lot of information has been discarded (see Figure 5.8). Figure 5.8. Differences in JPEG quality can be seen between the image on the left, set at 80% quality, and the image on the right, set at 40% quality.Selective Quality enables you to optimize different regions of the image separately. This control is useful for images with distinct backgrounds and foregrounds. To use selective JPEG compression, identify one region in the image that will use a different compression setting from the rest of the image. Keep in mind that in any image, there can be only one selective JPEG mask. Use any of the bitmap selection tools (Marquee, Oval Marquee, Lasso, Polygon Lasso, Magic Wand, and so on) to enclose a region (see Figure 5.9). Figure 5.9. Define a selective JPEG mask, using the bitmap selection tools.While the marquee area is selected, choose Modify, Selective JPEG, Save Selection as JPEG Mask. A translucent pink mask appears over the selected region. In the Optimize panel, double-check that JPEG is the selected file type and use the Quality slider to affect everything outside the mask. In Figure 5.10, everything but the main logo would be affected. Figure 5.10. Use one of the Preview buttons to see how the Quality setting affects the area outside the selected region of the image.When you have made your adjustments, look at your handiwork by selecting one of the Preview buttons. Smoothing blurs the transitions between sharp edges in an image. Smoothing makes it easier for an image to be compressed, but also degrades the quality. Smoothing settings below 3 seems to strike the best balance between image quality and file size. Sharpen Edges has the opposite effect of Smoothing. Edges are sharpened, often resulting in an improved image quality. File size, however, is increased. You cannot control the degree of sharpness. It is either on or off. The Progressive setting affects the display of the JPEG in the browser, not image quality. There is typically a slight increase in file size, however. When the image is downloaded to the web browser, a low-resolution version appears first. The details are then gradually filled in. The faster the Internet connection, the more seamless this progression appears. Manually Optimizing GIFsThe GIF format uses 8-bit or lower indexed color, which means that it uses 256 or fewer colors and tracks each color separately. Accordingly, the trick to getting the best optimization with the GIF format lies with the color palette. To modify that palette, choose the palette type and the number of colors in that palette. Other choices include dithering and whether or not to apply lossy compression. To choose a palette, use the Indexed Palette drop-down menu in the Optimize panel (or the Image Preview dialog box) (see Figure 5.11). Figure 5.11. Select one of the 10 GIF color palettes from the drop-down menu in the Optimize panel.
Select one of the following choices:
To choose the number of colors, or color depth, select a number from the Maximum Number of Colors drop-down menu. Select a color depth that best represents the color integrity of the original image (see Figure 5.12). Figure 5.12. Varying the color depth affects file size and image quality.
Although the GIF format uses lossless compression, you can still apply lossy compression by using the Lossy GIF Compression slider. To apply lossy compression to the GIF, drag the slider or enter a number in the field. The higher the number, the higher the compression and the lower the image quality. Interlacing is similar to the Progressive setting for JPEG. When the image is downloaded to the web browser, a low-resolution version appears first. The details are then gradually filled in as the image continues to load and, after the image is completely loaded, the high-resolution version of the image is displayed. If there will be a lot of graphics on the web page, interlacing enables the images to appear onscreen faster, even though they are not the final images. Turn on interlacing by selecting Interlaced from the Options menu. As I mentioned earlier, there is a second method for optimizing your images, which uses the Image Preview option. If you want to see what your image will look like and be able to adjust the various optimization settings prior to doing your final export, open the Image Preview dialog box (File, Image Preview). Using the Image Preview, you can make any adjustments to compression, file format, and color options to which you had access in the Optimize dialog box and be able to see what effect the various settings have in real time. After you adjust the preview to the desired settings, you can then export the image directly from the Image Preview dialog box. Tip When using the Image Preview dialog box, don't be afraid to play with the various settings and see how they will affect your image. You can always click the Cancel button and any changes you have made are undone and do not adversely affect your base image. |