How to reduce SWF file size in BannerSnack

Creator / Tips & Tricks / May 6th, 2009 / 6 Comments »

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)

4. TweenLite

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)

5. TextFileds

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)

6. Fonts/Texts

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)

7. Symbols/Vectors

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)

Conclusion

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.

Final Tips

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

6 Responses to “How to reduce SWF file size in BannerSnack”

  1. Adrijana says:

    Ok, this philosophy is not working for me. Not to put text in banners? Also, I tryed to test this, so i made a so calld banner (3 frames with absolutely nothing on it) = 11 Kb

    When I put text on each frame, no pictures, icons, effects whatsoever = 42 kb.

    So how can one make a great banner with 40 kb? You have excellent effects but when you use them, this GREAT banner has at least 75kb.

  2. [...] the following link for even more info on how to reduce the file sizes of your banners. It’s a bit more technical, but it will surely help you making better banner ads. [...]

  3. Steven says:

    I see where you’re coming from with this explanation, but you need to find a solution to the size problem if this is going to be useful as a production app. All of my ad networks require banners to be 50kb or smaller. While I love the banners that are created via bannersnack, they are useless unless they can be compressed further.

    I’ll be keeping an eye on this app, but have to place it in the discard pile until this is addressed.

  4. Nav says:

    Fantastic, just got my banner from 300kb to 38kb…….Thanks guys… great advice above.

  5. gizem says:

    Hello
    My ad banner is 193 KB which is tooo large.
    I want to decrease to 45 KB
    I have used same fonts, 3 flash effs
    I guess images(I used 2) are too big which I downloaded from your stock image library
    How can I decrease the size?
    http://snack.to/bd15g9pp

    If there is no way I would like to return back my money. The app. is awesome but limited if I cannot produce banner ads for google.

    Thanks.

  6. Creator says:

    Hello gizem, Google AdWords has increased the size limit to 150 kb, so you only have to reduce it to 150KB. When you add the image, choose OK for the reduced image http://screencast.com/t/ZX6QkD1lProv. Good luck!

Add new comment

Your comment