- Working with Different Output Formats
- Comparing Compression
- Advanced Compression Settings
- Exporting from Fireworks
- Summary
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Advanced Compression Settings
Now take a closer look at the two most common compression formats you'll be using, GIF and JPEG. Since they approach file size compression completely differently from each other and also handle colors and other information differently, they should be used for distinct purposes. If you're ever confused as to which one to apply, use the Preview tabs in the workspace to compare and contrast.
GIF Compression
Compuserve created the GIF standard when 256 colors were all that most computers were capable of displaying. Over the years the format developed into the 89a version, which is still in use today. GIF was very popular for line art and text scanning and early multimedia applications, but for photographic purposes it is very limited. With photographs the limited palette means dithering and posterization must be added to approximate the original color. This can be considered an artifact of the compression, because it artificially compromises image detail.
Still, for the vast majority of uses on the Web, GIF is a fine tool for designers. GIF images are used for typographic effects, icons, buttons, and all sorts of elemental design graphics. Incredibly small GIFs, when tiled, can create very interesting effects. The GIF format also supports multi-frame, or animated, images.
To access the GIF format directly on the Optimize panel, simply select it from the drop-down menu at the top right, underneath the Settings menu, as shown in Figure 3.10.
)
Figure 3.10 The GIF format forces you into an 8-bit palette but creates
small files and gives you ultimate control.
Palette
The GIF palette is limited to 256 total colors, or 8 bits. However, the palette can consist of as few as 2 colors, or 1 bit. The following is a list of the palette settings and tools available on the Optimize panel with the GIF format. When the GIF format is chosen, the palette presets will be available from the drop-down menu directly beneath the format menu. Many of these palette and optimization settings are also available for other 8-bit formats including PNG, PICT, BMP, and TIF.
When you change the palette setting, the results will be reflected in the palette view below. These swatches represent each of the colors that will be used in the final output. The following sections list a number of advanced controls for editing the palette.
Color Depth
To reduce the size of a GIF image quickly, use the Colors setting to reduce the number of colors. This setting determines the total number of colors available for the palette. This figure can be anywhere from 2 to 256. Halving the number of colors will generally halve the size of the image. Of course, this makes fewer colors available to the image output and could compromise quality.
You may use the dithering to approximate lost colors. Dithering arranges the available colors to simulate gradations in shading. Dithering can compromise quality when used with anti-aliasing or transparency, and dithering can carry a penalty in output file size. Setting Dither to 0 forces no dithering, whereas setting it to 100 will dither any colors outside the palette. Loss can also be used to offset the size of a full-palette or dithered GIF but carries a penalty in detail similar to JPEG compression. A setting of 0 ensures pixel accuracy; 100 fully compromises detail for file size.
Transparency
GIF images support transparency. Transparent pixels allow any color information under them, such as a Web page background color or another image layered underneath, to show through. Use the Matte setting to choose the intended background color, if different from the Canvas background color. Directly above the palette is a drop-down menu that allows you to choose between No Transparency (the default), Index Transparency, and Alpha Transparency. GIFs support only Index Transparency—pixels are either on or off, so there can be no gradation to the transparency, which often conflicts with anti-alias shading (much more on this later in the book, but see the following tip for now). Alpha transparency allows transparency shading but is only supported by the PNG format. To pick a color for transparency, choose the Select transparent color eyedropper at the bottom of the Optimize panel. To add more colors as transparent, choose Add Color to Transparency; to remove them, choose Remove Color from Transparency. Transparency will appear in the palette as a swatch of gray-and-white grid.
TIP
Aliasing is the jagged edging of curved and diagonal lines in a bitmap image. Enlarging a bitmap image accentuates the effect of aliasing. Anti-aliasing is the process of smoothing out those edges. Anti-aliasing is often also referred to as font smoothing. Font-smoothing software anti-aliases on-screen type. Graphics software programs have options to anti-alias text and graphics.
Swatches
There are more tools for managing the different colors, or swatches, in the palette. Directly below the palette display is the Sort menu, which allows you to sort the colors by Luminance or Popularity. Luminance sorts from light to dark; Popularity sorts pixels based on how often they appear in the output. Below this, and next to the transparency tools, are tools for managing individual swatches. Select a swatch and choose Edit color to choose a new value from the system color picker. Choose Snap to Web Safe to change the color to the nearest value in the Web 216 palette. The Lock color button allows you to lock the color value from further changes. To the right Add color and Delete color let you add or remove specific colors.
There are a few options for optimizing GIFs that are available only through the Optimize panel Options menu. As shown in Figure 3.11, this menu is located in the upper right corner of the Optimize panel.
)
Figure 3.11 The Optimize panel Options menu offers more options for
optimizing images, based on your current selection. Here you see the Options
menu when GIF format is selected.
Interlaced
Interlacing allows the pixels in an image to be written in alternating order, so that as the image downloads, it can seem to appear full size more quickly. Every other line loads first, and these are all doubled to display an approximation of the original. Then the remaining lines are loaded in place of the doubles, clearing up the image to full detail. This is commonly used to make images appear more quickly when loading on Web pages because it carries only a small file-size penalty.
Remove Unused Colors
The default for GIF optimization, this allows you to trim down the palette quickly by removing any colors that aren't used in the output (generally because they aren't in the original, either). Remove Unused Colors will not affect locked colors in the palette. Turn this off if you want to work with a full palette and delete colors yourself.
Save Palette
This will save the palette as an ACT palette file for use with Fireworks or other applications. The Load Palette command can also be accessed from the Optimize panel menu, but this is identical to choosing a Custom palette from the palette settings in the panel itself.
JPEG Compression
Because of the limitations GIF posed to photographers, the Joint Photo Experts Group commissioned a standard that came to be known as JPEG. JPEG uses variable lossy compression, which trades quality for file size by approximating the original pixels with an algorithm. The more compression applied, the less original data available for the image, a fact which makes the image appear blurry. This blurriness is another artifact because the approximations won't always be correct, especially at high compression ratios.
JPEGs are now a standard for sharing detailed images in high resolutions. As with GIF images, the Optimize panel offers choices specific to JPEG images, as is seen in Figure 3.12.
)
Figure 3.12 The JPEG format is deceptively simple but can offer incredible
compression ratios with acceptable loss.
Matte
The Matte setting is not relevant when woring with JPEG images. It is used to match anti-aliased images to the background color of the target Web page. Matching the matte color to the background removes the blurry edges caused by previous anti-aliasing.
Quality
This is the setting for the level of lossy compression. A value of 100 is indistinguishable from the original, whereas 0 creates the absolutely smallest files. In terms of file size, the change is most noticeable between 100 and 80; a setting in this range will dramatically decrease file size with a minimum of detail loss. A setting of 60 or below gives a very small file, but detail is very noticeably compromised.
Selective Quality
One of the great features of the JPEG format is the ability to use selective compression. With this process important details can be compressed at one level, while background information is compressed at another. You'll go over selective quality in more detail in Chapter 6, "Improving Photos."
Smoothing
JPEG compression breaks an image into a grid and then uses a mathematical algorithm to approximate the content of the grid. The more compression that is applied, the more noticeable the grid and the approximations become. To help alleviate the problem, smoothing can be applied to blur these artifacts. Smoothing is a compromise, however, as it does not improve image detail and can make images appear blurry or out of focus.
Two more important JPEG settings are available from the drop-down menu in the upper right corner of the Optimize panel. Progressive JPEG, which is similar to the GIF Interlaced setting, allows for faster image displays for the Web. Sharpen Color Edges can improve text and line art detail compressed in the JPEG format.
Saving Compression Presets
Once you've worked with the Optimize panel and the preview window to examine the different qualities of GIF and JPEG compression, you may want to save them for use later. Saved setting presets are available in the Settings menu on the Optimize panel, so they're easy to find later, and as a file on your hard disk, so you can share them with others.
To save a custom setting, simply make your optimization choices and press the plus icon next to the settings drop-down. You will be prompted for a name for your preset. Enter one and press OK to continue. The preset will now be available in the settings drop-down menu. To remove a setting from the menu, choose it and then press the minus icon. You will be asked to confirm the deletion. You may also save your custom preset with the Optimize panel drop-down menu by choosing Save Settings.
TIP
Another great tool available for GIF, JPEG, and PNG compression is Optimize to Size, which you will find in the Optimize panel's drop-down menu. You will be prompted to enter a size in kilobytes, and the format settings will be automatically changed to fit the image under that value.