Optimizing GIF Images

---

Quite a few different settings are available in optimizing a GIF image. You can select which indexed palette and the number of colors you want to use, and more. Figure 23-7 shows the Optimize panel with a file format of GIF selected. The bottom row of icons are used to change or lock specific color swatches you choose to alter.

Figure 23-7: The Optimize panel with a file format of GIF

The indexed palette

GIF images are limited to 256 colors; the indexed palette you choose determines which of the 256 colors are included. You can lock a specific color before you reduce colors if you want to ensure that it doesn't get removed.

The Indexed Palette drop-down menu contains nine preset indexed palettes plus a Custom option. Each palette makes a different palette of colors available. You can customize each palette and save it with a unique name. The following list shows a few of the most used palettes:

• WebSnap Adaptive palette is the default palette for indexed color in Fireworks. Any color that is not Web safe is automatically evaluated and snapped to the closed Web-safe color, plus or minus seven values. It doesn't guarantee that all the colors will be Web safe but it's close.

  Note 

  If using only Web-safe colors is important to you, you can use the Find and Replace feature to locate any color that is not Web safe and change it.

• Adaptive palette finds a maximum of 256 colors. It's not a preset color set, but the best 256 colors for your image. This technique may contain a mixture of Web-safe and non-Web-safe colors.

• Web 216 converts all colors in the image to the nearest Web-safe color.

The Matte option

The Matte option is available for all the file formats. On the right side of the Optimize panel you see the label of Matte. Notice the color box; gray and white checks indicate that it is set to transparent. The Matte option enables you to export your image slice as though it has a background color - without changing the canvas background color. This option is particularly important when you want to use the exported image in an environment different than the one it was designed in or when you are planning to use the image on a variety of different-colored backgrounds.

There is no transparency in a JPEG image so there will always be a background color. Click in the Matte color box and use the Eyedropper tool to select a color. You can select a color from the image itself. For GIF images with transparent backgrounds you'll want to use a Matte color that closely matches the background on which the image will appear. Images that have an anti-alias edge (most do) will blend in with the background color. I'm sure you've seen "halos" or color around images. This is caused by an image exported from one colored background and placed on top of another. If you always keep your source PNG file, fixing this problem is a matter of resetting the matte color and exporting a new image.

Reducing colors

You can reduce the size of your image file by reducing the amount of colors used. Choose a number from the Maximum Number of Colors pop-up menu. You can also reduce colors from the Color Table. If you choose a color amount from the Maximum Number of Colors pop-up menu and the number is less than the number actually present in your image, Fireworks deletes colors based on the least-used colors in the image.

The color table area of the Optimize panel displays the color swatches of the colors in your image. If you don't see the swatches or if you make a change to the optimizations settings, click the Rebuild button in the lower-right corner. An updated table of colors is displayed. The Rebuild button is visible only if the colors in the color table don't reflect the most current settings you've chosen.

Using the color table gives you greater control over which colors get eliminated. You can lock specific colors so they don't change; you can have colors automatically shifted to Web-safe colors, or change the color. To make alterations to the colors, click a color to select or Shift+click to select multiple colors and then change the color, delete, snap to Web-safe, or lock. Figure 23-8 shows the labeled icons that enable you to make these changes as well as the swatch feedback showing the status of each color.

Figure 23-8: The color swatches showing the various feedback icons

Setting transparency

Transparency is available for GIF and PNG files. The choices for transparency are Index Transparency and Alpha Transparency. The difference is often confusing. To see the difference first hand, follow these steps:

1. Open a new document that's 300 × 300 with a white background.

2. Select the Rectangle drawing tool and draw a square filled with black.

3. Draw another square in the center of the white one and fill it with white.

4. From the Optimize panel, be sure Matte is set to None, and choose Index Transparency.

5. Click the Preview tab so you can see the results (Figure 23-9). The Index Transparency setting removes the background color. But this option removes not only the background but also any other areas that contain this color. Notice that the white box in the center is also gone.

   
   Figure 23-9: The white background and white center are both removed using index transparency.

   Note 

   Only one color can be used for the matte or background color automatically. You can however add or subtract additional colors to the index or alpha transparency by using the various eyedroppers in the lower-left corner of the Optimize panel. Click the appropriate eyedropper; then click the color. You'll need to reselect the eyedropper each time you want to add or remove a color to the transparency.

6. Because the removal of color from other areas isn't usually acceptable, another option exists: Alpha Transparency, which removes only the background colors, as shown in Figure 23-10.

   
   Figure 23-10: When you want to remove the background color only and not the same color from the image, use Alpha Transparency option.

   Note 

   When choosing Alpha Transparency, the view may not always show properly. Try clicking No Transparency first and then reselecting Alpha Transparency.

Dithering

Dithering gives the illusion of new colors by varying the pattern of dots of color. The downside is that it increases the number of color changes in a horizontal row, which also increases the file size. You apply any percentage of dither you feel is needed to help a GIF image look better. If you have an image that is best suited as a JPEG but you need transparency; dithering may help make the image look better. It can also help in an image with a gradient fill for which you need transparency. Dithering can also be used when you reduce the color palette below what is actually in the image. By adding dithering, you can smooth out the colors. To determine the best options, use the preview mode and experiment with the settings. Try adding more colors and no dither or less colors and more dither and compare image quality versus file size.

Loss

Loss is the amount of compression used. GIF images normally have no loss of image detail because they use loss-less compression. But you do have the option of using compression even in a GIF image; it produces some distortions in your image however. The higher the loss setting, the higher the distortion.

Interlacing

Interlacing is an option for GIF files you are exporting for use on the Web. You can access this option only in the Export Preview (File ® Export Preview) or from the Optimize Options pop-up menu in the Optimize panel. When a file is interlaced it appears "blockie" or blurry, until it loads, enabling the user to see a blurred copy while the image is loading. The alternative is to not use the interlacing object, in which case, the user sees nothing until the entire image loads. The drawback to using interlacing is that the image needs to load fully before it becomes clear.

 Habitat Alert site   Optimize the Habitat Alert logo and other GIF slices with the following steps.

1. Open the  ha_sliced_done.png file from the chapter23_exercise folder and select the logo slice.

2. Select the 2-Up tab.

3. In the Optimize panel, choose GIF file format.

4. Choose Alpha Transparency.

5. Select the Add Color to Transparency eyedropper and click in the background area of the logo slice. Because the striped background will be a background image, you don't need the stripes and blue area in this image. Every little bit helps when reducing image file size.

6. A stripe will still be present after adding the first color to the transparency. Using the Add Color to Transparency eyedropper again, click the remaining stripe color to remove it.

7. Change the Matte color to #003366. The logo will look like Figure 23-11.

   
   Figure 23-11: The Habit Alert logo seen in preview mode after the optimization settings are made

8. Shift+select all the slices except the bird image and the buttons; then click the Preview tab.

9. In the Optimize panel set the following settings:

   • File Format: GIF

   • Indexed Palette: Web Snap Adaptive

   • Colors: 64

   • Matte: None

   • Transparency: No Transparency.

10. Shift+select each button and use these settings:

    • File Format: GIF

    • Indexed Palette: Web Snap Adaptive

    • Colors: 16

    • Matte: None

    • Transparency: Index Transparency

11. Shift+select the two slices below the buttons using these settings:

    • File Format: GIF

    • Indexed Palette: Web Snap Adaptive

    • Colors: 4

    • Matte: None

    • Transparency: No Transparency

12. Save as ha_gif.png.

---