Using the Optimize Panel


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:

  • Title section This section comprises three components: the gripper, the panel name, and the Optimize Options menu.

  • Saved Settings section This section contains all the saved optimization settings. These settings are presets that are shipped with Fireworks. You can also add or remove your own settings.

  • File Type/Matte section This section contains a drop-down list for the file type, as well as an option that lets you select the matte color. The matte color refers to the background color of the file when it is exported.

  • File Type Options section The contents of this section change based on the file type selected.

  • Color Palette/Transparency section For files with 8-bit or lower color palettes, the entire color palette is displayed here. Also included are tools for adding indexed transparency (GIF and PNG-8 files only) and color palette manipulation.

Figure 5.4. The Optimize panel contains different sections that enable you to adjust the export settings.


Optimize to Size Command

The 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 Settings

Fireworks 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:

  • GIF Web 216 All colors in the image are forced to the GIF 216-color Web Safe palette. Although image quality can be negatively affected, this is a good setting to use if you are concerned about staying within the Web Safe palette.

  • GIF WebSnap 256 This setting is the same as the GIF Web Snap 128, except there are 256 colors instead of 128.

  • GIF WebSnap 128 The optimized image contains 128 colors. Colors close to those of the Web Safe palette are changed, whereas colors outside the palette are converted to their closest Web Safe color.

  • GIF Adaptive 256 The optimized image contains up to 256 colors that are selected to best represent the original colors. It ignores the Web Safe palette.

  • JPEGBetter Quality The optimized image is a JPEG with a quality setting of 80 and a Smoothing setting of 0.

  • JPEGSmaller File The optimized image is a JPEG with a quality setting of 60 and a Smoothing setting of 2.

  • Animated GIF Websnap 128 The optimized image is an Animated GIF that uses the Websnap 128 palette.

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 Settings

Although 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 JPEGs

When 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 GIFs

The 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:

  • Adaptive Derived from the actual colors in the document and often produces the highest quality image.

  • Web Adaptive Converts colors that are close to the Web Safe palette colors to the appropriate Web Safe color.

  • Web 216 A palette of the 216 colors common to both Windows and Macintosh computers.

  • Exact Contains only the colors used in the original image. If the image contains more than 256 colors, the palette automatically switches to Adaptive.

  • Macintosh Contains the 256 colors defined by Macintosh platform standards.

  • Windows Contains the 256 colors defined by the Windows platform standards.

  • Grayscale Contains a palette of 256 or fewer shades of gray.

  • Black and White Converts all pixels to either black or white.

  • Uniform Selects colors mathematically, based on RGB pixel values.

  • Custom Palettes are loaded from an external palette (ACT file) that you have previously created.

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.




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net