Making Sense of Bitmap Compression

Although we did some sample testing to try to show you all the possible image-compression combinations and the final results, the truth is that the optimal settings are entirely dependent on the quality of the original image and the final appearance needed in the context of your design. The main goal when testing various compression strategies should always be to find a balance between image quality and file size. The ideal balance will vary depending on the purpose the image serves in your presentation. For example, when using bitmap images in animation sequences, you may find that you can get away with using higher compression settings because the detail in the image may not be as important as it would be if you used the image in a catalogue or some other presentation where the detail and color would be more critical.

The following compression workflows are intended to serve only as general guidelines. You will have to experiment with the specific value settings in each case to find the best results for your particular content and project needs.

24-Bit or 32-Bit Lossless Source Files

If you have 24-bit (or 32-bit including an alpha channel), high-resolution source images saved without compression in PNG-24, PICT, or TIFF format, you have two workflow options:

• Set JPEG compression in Bitmap Properties dialog box: If you want to control the compression applied to each imported image individually, clear the Use document default quality check box in the Bitmap Properties dialog box and choose a JPEG compression (Quality) setting that achieves the best balance of image quality and file size for each imported image in your Library. This approach gives you the option of applying more compression to some images than to others.

• Set JPEG compression in Publish Settings dialog box: If your source images have similar color and content, as well as consistent resolution, you may find it more efficient to use the compression settings in the Publish Settings dialog box to apply the same JPEG compression to all of your images. This makes it faster to test different compression settings on all the images in your project at once. If this is the workflow that you choose, make sure that the Use document default quality check box is selected in the Bitmap Properties dialog box for each imported image — this ensures that the Quality settings in the Publish Settings dialog box will be applied when the Flash movie (.swf) is published.

The main benefit to importing uncompressed source files is that you will not be tied to a specific resolution and thus will maintain the option of changing compression settings at any time in the development process. The main drawback is that your project files (.fla) will be much larger, and each time you test your movie (.swf), you will have to wait for Flash to apply JPEG compression on the images. This might not seem important at first, but the cumulative time loss over the course of developing a project does add up.

Tip 

As we mentioned previously, it can be helpful to work with lower resolution place-holder images as you develop a project. You can use the Import option in the Bitmap Properties dialog box to load your high-resolution images in the final stages of the project.

The image formats PNG-24, PICT, and TIFF also support alpha channels when they're saved with 32-bit color. Alpha channels enable the import of complex masks that might otherwise be difficult to create in Flash. You may be surprised to see that even after you apply Flash JPEG compression to an imported PNG, PICT, or TIFF image, the transparency is maintained. You might say that Flash lets you have your alpha and eats the file size, too.

Cross-Reference 

The process for creating alpha channels in PICT and TIFF files is slightly different from that used for PNG files. For more information on creating alpha channels in source bitmaps, refer to Chapter 36, "Working with Raster Graphics," on the CD-ROM.

Caution 

Although Macromedia Fireworks files are saved with the .png file extension, the options for importing Fireworks PNG files are different from those for importing PNG files saved from Photoshop or other image-editing programs. For more information about importing Fireworks PNG files, refer to the section "Importing Vector Artwork" later in this chapter.

8-Bit Lossless Source Files

Source files in 8-bit formats are restricted to 256 (or fewer) colors and are optimized to a file size that is Web-friendly. These files are usually saved in GIF or PNG-8 format and are best suited for graphics that have simple shapes and limited colors, such as logos or line drawings. PNG-8 and GIF files can still support an alpha channel, but unlike 24-bit images, you will not want to apply any JPEG compression to these files when they're brought into Flash.

Caution 

To avoid display problems, when exporting GIF files with transparency for use in Flash, the index color and the transparency color should be set to the same RGB values. If these settings are not correct, transparent areas in the imported GIF may display as solid colors in Flash. For more information on this issue, refer to the Macromedia TechNote on Transparency support in Flash at www.macromedia.com/support/flash/ts/documents/transparent_bitmaps.htm.

Applying JPEG compression to 8-bit files generally results in larger files and degraded image quality (refer to Figure 16-7). To preserve the clean graphic quality of 8-bit images, follow these steps:

1. In the Bitmap Properties dialog box, make sure that Lossless (PNG/GIF) compression is selected.

   This is the default for imported 8-bit images, but it never hurts to double-check to ensure that it hasn't been changed by mistake.

2. Decide whether to leave the default setting for Allow smoothing in Bitmap Properties.

   The image will have sharper edges if this option is unchecked, so it is best to make a decision on this setting depending on whether you prefer smoothed edges when the image is scaled larger.

Remember that the JPEG Quality specified in Publish Settings will not apply to imported images that have been set to Lossless compression in the Bitmap Properties dialog box.

Source Files with Lossy Compression

Although JPEG is the native bitmap compression format in Flash, you may want to use an alternative application for optimal JPEG compression on images. In our experience, JPEG compression from Macromedia Fireworks often produces smaller file sizes and more consistent image quality than JPEG compression applied in Flash. If you have created an optimized Web-ready JPEG using your preferred lossy compression method or a client has delivered source files in JPEG format, you will want to avoid adding additional compression to these images when importing to Flash.

Note 

JPEG images saved with the option for progressive download selected could not use imported JPEG data when brought into Flash prior to Flash MX 2004. Flash MX 2004 and Flash 8 give you the option to use imported JPEG data for JPEG images saved with or without the progressive download option.

If you find that a JPEG file size is not reduced enough to fit the parameters of a particular project, it is better to go back to the uncompressed source file to redo the JPEG compression than it is to apply additional compression in Flash. As in all media production, double JPEGing images in Flash produces diminishing returns — by the time you get the file down to a size that you want, it has so many compression artifacts that it is generally unusable. By going back to the uncompressed source file and adjusting your compression settings to produce a new JPEG file, you end up with a cleaner image and a smaller file size than you would by compounding the JPEG compression in Flash.

For optimal results when importing JPEG images to Flash projects, the main settings to consider are the Use imported JPEG data and the Allow Smoothing check boxes in the Bitmap Properties dialog box.

• To maintain the original JPEG compression of your imported image, simply select the check box to Use imported JPEG data from the Bitmap Properties dialog box. When this check box is selected, the original compression will be preserved and the JPEG Quality specified in Publish Settings will not be added to your imported JPEG image.

• Smoothing is only advised if you will be scaling the JPEG image in Flash and you want to minimize the jagged edges with anti-aliasing. The compromise of Smoothing is that the image will also appear slightly blurred — this may or may not be desirable depending on the detail in the original image.

Although you can clear the Use imported JPEG data check box and choose a setting in the Quality field, remember that this compression will be added to the compression on the original image and will cause inferior results.