Problem You want to optimize the image quality and file size of bitmap graphics included in .swf files. Solution Flash enables you to specify a default optimization setting for bitmap graphics as well as settings for individual graphics. Discussion Bitmap graphics can increase the overall file size of a Flash .swf file quickly, so it is important that you minimize their impact on file size as much as possible. To ensure the smallest possible file size, Flash compresses every bitmap included in an .swf file, using either JPEG (Joint Photographic Experts Group) compression or a lossless form of compression, such as PNG (Portable Network Graphic) or GIF (Graphic Interchange Format). The primary difference between the two is that JPEG compression is lossy, while PNG and GIF compression is lossless:
Lossy compression -
In this compression process, some information is removed. The more information that is removed, the lower the overall file quality, and the smaller the overall file size. The JPEG format that Flash uses is efficient at minimizing the file size of digital photographs without excess degradation of quality. Lossy compression is applied in degreesa Quality setting ranging from 0 to 100 determines how aggressively Flash compresses the file. With more compression (that is, lower Quality) comes greater file size savings and greater degradation of image quality.
Lossless compression -
In this compression process, all data is preserved; it is just stored more efficiently. With lossless compression, the overall file size is reduced, yet the image suffers no loss in quality. However, it is generally not capable of the same degree of file size savings as JPEG. By default, Flash follows two rules when exporting bitmaps, both of which you may customize: Imported JPEGs retain their original settings. Flash assumes that imported JPEGs have already been optimized, and it does not compress them further. All other bitmap types are exported with lossy JPEG compression, with a JPEG Quality setting of 80. In addition, smoothing, or anti-aliasing, is automatically applied. A Quality setting of 80 is a good default choice, because in most cases it is able to compress the image significantly while maintaining the overall image well.
You can control how Flash compresses any individual bitmap, and you can also specify the default JPEG Quality setting for all bitmaps in the document. Any setting you specify for an individual image supersedes the default export settings, which are applied only to images whose individual settings have not been specified. To set the default bitmap settings, follow these steps: Choose File  Publish Settings. The Publish Settings dialog box appears, in which you can specify how Flash exports the movie. Adjust the JPEG Quality slider to a higher setting to output higher-quality bitmaps with larger file sizes, or to a lower setting to create lower file sizes and lower-quality images. The default is 80. Click OK to save the settings and exit the dialog box. These settings apply to the active document only and will not affect any other Flash movie.
If you have an image with special needsfor example, one that needs to be exported with particularly high quality, or does not compress well with JPEG compressionyou can specify the export settings for that image individually. These settings are specified in the Bitmap Properties dialog box, which is accessed by selecting the bitmap in the library and clicking the Properties button in the bottom of the library or selecting the Properties option from the context menu. The Bitmap Properties dialog box has a number of settings that enable you to specify how the graphic should be exported:
Allow Smoothing -
Checking this option adds anti-aliasing to the exported graphic, blurring hard edges. In most files, the effects of this setting are imperceptible and have little to no effect on file size. As a rule of thumb, check it for non-animated bitmaps, and uncheck it for bitmaps that you intend to animate.
Compression -
Specify whether the graphic should be exported using lossy JPEG compression or lossless PNG/GIF compression. JPEG compression almost always yields increased file size savings, even for graphics with large regions of solid color and sharp edges, such as text. The only situation in which you should choose lossless compression is when bitmaps exported using lossy JPEG compression do not reach the level of quality you need.
Use Imported JPEG Data -
This setting only appears if lossy JPEG compression is specified as the Compression type, and the imported graphic is a .jpg file. If both of these conditions are true, this option appears and is checked by default, which prevents the file from being compressed twiceonce in the original editor and then again in Flash. Unchecking this option activates a Quality setting, which enables you to specify the compression amount for this image; the range is 0 to 100, just as it is in the Publish Settings dialog.
Use Document Default Quality -
This setting only appears if lossy JPEG compression is specified as the Compression type, and the imported graphic is not a .jpg file (for example, if it is a .png or .gif file). When checked, the graphic is exported using lossy JPEG compression with the Quality setting specified in the Publish Settings dialog. When unchecked, a Quality setting appears, which enables you to specify the compression amount for this image. The settings applied in this dialog box affect all instances of a bitmap symbol. The discussion in the recipe to this point has centered on what you can do in Flash to optimize bitmaps. However, the most important decisions you'll make regarding a bitmap, which affect its quality and file size, occur before the bitmap is even imported into Flash. These decisions take place in the graphics editor from which the bitmap was exportedFireworks, Photoshop, Paint Shop Pro, and so on. The following techniques will help you import optimal bitmaps into Flash: Set the resolution to 72 dots or pixels per inch. In Fireworks and Photoshop, the resolution can be set in the Image Size dialog box. In Fireworks, Modify Canvas  Image Size. In Photoshop, Image Image Size. Crop unnecessary portions of the image in your image editor before importing into Flash. Users pay for every pixel, in terms of download time, regardless of its content. Remove any borders and unnecessary white space from the top or edges, including only what you need. If you have Fireworks or ImageReady, optimize the graphic for the Web (that is, as a .jpg, .gif, or .png file) prior to export. Although Flash can import other file types, such as .tiff, and it can compress them as JPEG files, you should take advantage of the advanced compression interfaces and options available in Fireworks or ImageReady.
You can use the Generate size report in Flash to determine how much file size each bitmap (and every other element of the movie) is using in the .swf file. In order to generate the report, open the Publish Settings dialog box (File Publish Settings). Click the Flash tab within the dialog box, and then check the Generate size report. Then, each time you export the .swf file. An example is as follows: Bitmap Compressed Compression ----------------------- ---------- ------------------- image2.jpg 56642 1228800 Imported JPEG=102
The Compressed column reports on the number of bytes that the bitmap occupies in the exported file. See Also Recipe 6.1 |
