Whether you’re building banner ads, microsites, games, applications, or anything else, it’s always a good practice to do your best to keep your file sizes as low as you can while still achieving your design and animation goals. Although microsites and games are going to be bigger than banners, you don’t want them to be too big because you may risk the loss of potential users. Those potential users are, in turn, potential customers for your client.
Banners need to be kept down in file size for a different reason: specs. When you go over the file size allowed in the banner’s specs, the site(s) on which it is running will most likely reject your banner.
Enter file optimization. Optimizing your Flash files can consist of anything from changing the compression settings on your images to slimming down your code or using vector drawing instead of imported images. There are several ways to reduce your file size and knowing some of them can not only help your sanity, but also help you in building your projects without the need to remove any key features or images.
There are generally two major areas in which you can optimize your files: graphics and code.
Different images call for different formats. If you have a picture of a person, you’ll generally want to use a .jpg (.png is definitely an option, but the .jpg’s file size is most likely going to be smaller). If you have a line drawing or any other image that isn’t photographic, you’ll probably want to use a .gif and for the most part, you’ll probably want to save the .png format for images that contain transparency.
As mentioned earlier, .jpg files are best used for photographs or images with smooth variations of tone and color. They use what is called a “lossy” data compression method, which basically means that the data is compressed in such a way that it is actually different from the original data but still close enough to be used. As the compression levels increase, the resulting file size reduces. However, with that higher compression and lower file size, you start to see image artifacts that give less quality to the pictures.
The quality that you’ll most likely want to use for your Flash projects (or almost any project on the Web) is 60%. This is because at 60% quality, the image artifacts that start to appear because of compression are extremely small and mostly unnoticeable at the 72 dots per inch (dpi) that computer monitors display. The final file size of a .jpg saved at 60% quality can be up to 20 times smaller than the original image.
Pngs support true-color imaging, use lossless data compression and support transparency. Because of the true-color imaging and better alpha transparency, .pngs are ideal when you have photographic-style images that need to animate across a multicolor or gradient background.
When you’re working with .pngs and you’re saving your files through Photoshop’s “Save for Web & Devices,” you’ll usually want to go with png-24. However, if the color palette contains fewer colors, then you may want to use png-8.
If you plan to use Greensock tweening library, then you should consider using TweenLite and TimelineLite instead of TweenMax and TimelineMax respectively. This will save you around 30KB, pretty important if you want to keep your flash banner smaller than 70 KB for example.
Generating size report in Flash
A nice tool in order to find which asset of your page occupies the most disk space is to use the “Generate size report” option in Flash.
To do this, open publish settings and check Generate size report in the Advanced options.
Now, test your movie and you ‘ll see in the output something similar to:
my_flash_banner.swf Movie Report -------------------------------- ..... Bitmap Compressed Original Compression ----------- ---------- -------- ----------- image_1.jpg 27252 298800 JPEG Quality=60 image_2.jpg 20149 298800 JPEG Quality=60 image_3.jpg 16565 298800 JPEG Quality=60
Using the array above, you can judge which asset needs more compression.
When you are ready to publish your final flash banner consider the following.
Check Compress movie. This will save you some extra KB without degrading the banner quality.
Omitting trace statements
Check Omit trace statements. You do not need them in your final banner. All they do is occupy unnecessary space.
Rules of thumb
- If you want to use a gradient, create it in flash, do not import it in stage as a jpg.
- For texts, insert them as swf, do not embed the fonts.
- For pictures, use jpeg format and compress them as more as you can (until distortion is not visible).