There are a lot of customers asking for tips on how to make their BannerSnack banner ads smaller in file size (Exported SWF only). But firstly, before throwing some advanced tips, we need to understand how BannerSnack banners are built and how their file size is actually build-up.
1. Base engine
An empty banner will always include the main BannerSnack engine. The one that controls the slides, the objects and the animations.
This can’t be avoided (6KB charge)
2. FlashEff engine
When you add an effect (Build In/Build Out/Filter), BannerSnack will automatically include the FlashEff base engine (optimized for BannerSnack), which weights 16 KB. It sounds a lot, but it is an unbreakable piece of code that needs to be there for each of those cool effects to take place. This base engine is optimized byte by byte and includes over 10,000 lines of code that will make your effects become eye-catching. FlashEff base engine will be included ONLY ONCE per banner and ONLY if you have at least an effect within the banner.
This is the piece of resistance, the most impressive part of BannerSnack banner ads. To avoid using the FlashEff effects you have to make sure that you’re NOT using any effects/transitions at all. (save about 16KB) – NOT RECOMMENDED
3. FlashEff Patterns
Each FlashEff effect is constructed using a FlashEff Pattern (which weight between 1 and 3 KB each) and a setting for it (under 0.5 KB per setting).
To avoid adding an average of 2 KB per effect to your banner, it is recommended to try using the same FlashEff Pattern for all the effects within a certain banner. You can still have different effects based on the same FlashEff Pattern by using different settings. (save 2KB per each avoided FlashEff Pattern)
Some of the effects consume a lot of CPU, this is why some FlashEff patterns include the TweenLite engine that saves over 50% of the processor and creates smooth transitions (weights about 3KB). This engine is ONLY embedded ONCE, when needed.
The most basic FlashEff Patterns will not include TweenLite; all non-text patterns and filters do not use TweenLite at all. (save 3KB)
When using texts typed using BannerSnack, you will save space since they are very small, and when exported as SWF they will get embed only one by one, character by character, saving a lot of space compared to a graphic symbol. However, when the first text is entered, a native Flash component called TextField gets embedded within the banner and it adds about 3KB to it.
To avoid this, don’t use texts at all. (save 3KB)
Each time you use a new font, you embed a new set of characters.
To avoid increasing file size, use only one or two fonts per banner. (save 10 to 90% of font charge)
Our symbol library includes vector shapes that are very low in size (about 0.1 KB each). Use them as often as you need backgrounds, button shapes, and general shapes. You can colorize them using the colorize filter.
Avoid increasing file size by using SWF files as vector shapes instead of full quality images (PNGs and JPGs). (save at least 90% on each item)
8. Image quality/size
Images that you load within the banner could be very large in file size, in depth and in pixel size as well.
You can save a lot of file size by either uploading fixed size images as 8-bit PNG instead of uncompressed/high-compressed JPG, either by choosing the re-sample and re-size image in the download dialog window. (save 10 to 90% on images charge while maintaining similar aspect)
If you want to make a SWF banner with BannerSnack following ALL the above tips and use a couple of the coolest text transitions, you will be using at least 30KB. However, if you’re clever you can make large cool banners and still keep the file size at around 50KB. General banner ads that include 2-3 small images, 2-3 symbols (background/button as vector), 5-10 texts should compress around 75KB.
1. Use texts as much as you can
They are very small in size, and if you use only one font per banner, you can make your banner look professional by playing with colors and sizes.
2. Reuse everything
When you reuse the same symbol, the same image (without resizing at the end), the same text, the same patterns, you are not increasing the file size almost at all.
3. Use slides
Slides are not increasing your file size almost at all. You can make cool transitions and tell stories by breaking your banner into a few slides and reusing most of the weighted content.
4. Physical size paradox
Small physical size (width x height) does not affect the final size of banner proportionally. A small sized banner (100 x 60 px) can weight even more than a large one (380 x 600 px). Don’t start a small banner assuming that it will be smaller in file size as well. It all depends on the weight of the contents inside.
Related article: How to optimize your banners for the web