Optimizing .swf Imagery

To optimize .svg imagery on your web site, the most important thing to remember is that you want to optimize the individual elements that are included in a presentation prior to compiling the information and generating your .swf files. Elements such as audio, bitmap imagery, video, color and text can all be optimized individually prior to being compiled, which can save you 50-70+ percent in the overall size and download/display times in the resulting files.

  1. Decide whether all of the elements included within your Flash presentation are needed!
    It sounds overly simplistic, but many-times the best way to improve the speed and performance of your .swf files is to reduce or eliminate unnecessary elements altogether. Unnecessarily long fade-ins and fade-outs, bitmap or vector imagery that are barely functioning as window-dressing, music (or an extremely high acoustical quality of music), etc. As has been mentioned in other sections of this site, the best form of optimization is to not use unnecessary elements at all! Less is more...

    2.  
  2. Optimize the bitmap imagery included in the presentation.
    PNG is the ideal format for bitmap imagery within Flash, which is the native file format of Adobe Fireworks. JPG formatted imagery works very well for photography, and vector imagery is ideal if you can use it...since the images are made from calculations instead of many pixels, thereby saving you file size. For more information about optimizing imagery, please visit the 8-bit .png, 24-bit .png, 32-bit .png, .jpg and .svg sections of this site.

    3.  
  3. Reduce or eliminate your use of gradients, alpha and transparency.
    Gradients require many colors and calculations to be processed, and the use of transparency is processor-intensive, particularly when one is animating transparent graphics over bitmaps. Keeping the use of these effects in your .swf files to a minimum will save a great deal of file size and bandwidth.

    4.  
  4. Set the _visible property to false instead of changing the _alpha level to 0 or 1.
    Disabling an instance's visibility instead of calculating _alpha level can be MUCH less processor-intensive, potentially resulting in smoother on-screen animations while saving CPU cycles and memory.

    5.  
  5. Reduce the number of points and lines used in the animation.
    The fewer vectors used in a drawing, the smaller the resulting file size will become.

    6.  
  6. Evaluate whether the using ActionScript to produce effects will result in smaller file size.
    Using ActionScript within animations can often produce better performance and smaller file sizes, although this is not always the case. Experimenting with several methods for producing the identical effect can definitely result in marked improvements in the size and performance of your files.

    7.  
  7. Reduce the number of fonts and characters embedded within your Flash file.
    Adding fonts and font families as an embed within your Flash files can add hundreds of Kilobytes (or even Megabytes) to the size of your resulting SWF output. A great tutorial for how to introduce only the characters within a font that you need can be found at AllFlashWebSite.com.

    8.  
  8. Enable Flash embedded ZLib compression.
    Flash versions MX (6) and higher allow for the ability to apply ZLib compression to .swf files. Zlib generates arithmetic compression without any resulting quality loss. It is another great tool that allows you to reduce the size of your files, provided you do not need to insure compatbility wth Flash 5 (and older versions).

    9.  
  9. Consider using lower frame rates (frames per second) in your presentation.
    Digital television in the United States has a frame rate of 30 frames per second (fps), while motion picture films in movie theatres are typically displayed at 24 fps. 10-15 fps is much more common within content that is displayed over the Internet. Regardless of the frame rate you prefer, the lower the frame rate, the smaller the file's size. However, if you reduce frame rates TOO much, a noticeable loss in quality can occur (less of a smooth transition from slide to slide).

Tools that will allow you to complete these techniques:
Adobe Flash (Mac/Windows): Cost: $$$$ | Quality: A | Ease of Use: A | Use With: 1, 2, 3, 4, 5, 6, 7, 8, 9
Flare (Mac/Windows/Linux/DOS/Solaris): Cost: Free | Quality: A | Ease of Use: A | Use With: 6
Flash Optimizer (Mac/Windows): Cost: $ | Quality: A | Ease of Use: A | Use With: 2, 5, 8
Flasm (Mac/Windows/Linux): Cost: Free | Quality: A | Ease of Use: A | Use With: 6


 
  Four Examples
 
 
 
    Other:
  Samples on Site
  Samples on Blog