How to optimize HTML5 banners weight created by Adobe Animate and maybe other tools

Tips and best practices how to reduce weight and make your ads load faster


  • Smaller/exact size images inside banners= less banner weight
  • Optimized (without reducing quality) images = less banner weight
  • Optimized and compressed HTML+CSS+JS = less banner weight
  • Less text/shapes inside banner = less banner weight
  • Reused assets = less banner weight
  • Less content and animations= less banner weight

Need help with HTML5 ads design or animation? We will be glad to help!

Media agencies, publishers and advertising networks usually have quite strict HTML5 banner weight requirements or specifications (100–150KB max file size). In many cases (would be great if in all cases) you need to minimize banner weight as much as possible.

Tips and best practices below are written thinking about Adobe Animate HTML5 canvas banners (because Adobe Animate CC ir our main banner and animation software), but may also be good for ads that are created by other software: Tumult Hype, Adform Studio and similar.

1. Reducing size and weight of your images

a) Prepare your banner assets (images) exactly the size you need
For example if you have 300x250 and 300x600 banners, use 300x250px size background and 300x600px accordingly.
Most common mistake, when making sets of banners, is reusing assets of same size in different formats (using 995x200px background in 995x100 size banner ad). If possible — try to avoid that. (Of course reusing assets may be also a good thing [read Reusing assets section below], depends on the specs and requirements you have to comply)
Smaller images = less banner weight.

b) Optimize your images by compressing them
After you Publish your banner with Adobe Animate, your banner assets are created generated. In some cases you will have huge PNG or JPG files (100+KB).

Chewing panda is your friend

Just use for images compression. Sometimes you will be able to compress images more than 70% without reducing quality.

And if TinyPNG does not help with JPG images — just open your Photoshop and reduce JPG images quality. Reducing JPG images quality in Photoshop will reduce quality of the image, but sometimes it is the only solution…
Optimized images = less banner weight

2. Reducing size of your HTML, CSS and JavaScript files

After your Adobe Animate banner is Published you will also see yourbannername.html and yourbannername.js files in the main folder.

If your ad is rich with text it may be a good option to compress and minify HTML/JS and CSS files (if you have CSS of course).

Optimize, minify and compress all your “text” files

There are quite a lot of online tools for minification of JavaScript, CSS and HTML, some of them:

Optimized and compressed HTML+CSS+JS = less banner weight

3. Reducing amount of text (or shapes) inside your banner

All text (well most of it) that you are using in ads created by Adobe Animate CC is converted to shapes. This is nice and handy because in most cases we are using custom fonts and shapes. After text is converted to shapes by Adobe Animate, every letter is converted to JavaScript code. In JavasScript 7 letters look something like this:

7 letters. Huge amount of code.

Imagine now you have 5–6 sentences Disclaimer in the last frame of your banner or animation... Your .js file becomes huge (200KB, 300KB and more).

That final frame with a lot of text may weight 100+KB alone (in one of our latest banners Disclaimer frame weight was ~130KB of JavaScript file).

How to deal with that? -Be creative! :) try avoiding frames and screens that have a lot of texts or shapes, try converting text-rich frames to PNG/JPG image (image weight can be 70–80% smaller than your text weight in the end) and replacing that text rich frame with image.

Also in many cases (try asking your media agency or Publisher) banner specs you have is about .zip archive weight. Try zipping whole banner assets and you will see that size reduces really drastically. Zipping your rich text banner can reduce banner size from 300KB unzipped to 100KB .zip file.

Less text inside banner = less banner weight

4. Reusing same assets in the set of banners

Reusing same assets in the set of banners. It is possible in some Google products DoubleClick for Publishers DFP, DoubleClick Manager DCM, DoubleClick Studio DSC etc.), but for sure it is possible if you are working with local networks that are using their own advertising platforms, Adform also allows to reuse assets in some cases.

Let’s say you have 10 different banner formats, and let’s say you have same logo in every banner. Try using the same file in all formats (same name, same size), Publish your ads and move that logo to separate folder (for example “assets”) that can be reached by every ad. Something like this:

Modify all banners paths to images, and you will have 10 banners that are using 1 logo (instead of 10 banners with their own 10 logo files).

In our case we needed to create set of banners with 5 cars images in every one. We’ve modified set of 12 ads to use same 5 images in every banner and it was a really big weight optimization. Browser caches 5 images, and if you will see another format — it will load faster because of the browsers cache, you are using the same assets.

Reused assets = less banner weight

5. Removing content from your banner: animation, shapes, texts and everything

This one is really simple, but if you have to do it — I suppose you already tried everything above.

Every frame, every text, every object in your banner means additional weight. 6–7 frames banner will weight more than 3–4 frames banner. Try to optimize banner by removing unnecessary animations, unnecessary texts, frames, images, shapes, masks etc. You need to make everything as simple as possible. Remove, Publish > check size; Remove, Publish > check size.

Also such “testing” is good, because you may find frames, elements or animations that weight a lot in your ad.

Also we’ve noticed in one project, that if you have frame by frame masks (not animated mask tween, but separate mask size in every keyframe) — it weights a lot, because (same thing as with text above) every your mask shape is converted to JavaScript code. More mask sizes/shapes — more JavaScript code. Keeping masks in square/rectangle shapes may be a good idea.

Less content= less banner weight

Final thoughts and more ideas

Use HTML5 features

Remember that you are creating HTML5 ads. It means that you can move some code or some animations directly to the HTML code (adding sound, some movement, clickTag etc.) and use all the supported HTML5 features. Hint: adding mouse over sound to banner is less complicated if you add sound to the HTML code and some JavaScript.

Zip or no zip weight

Always ask your media agency or Publisher you work with about their requirements for pure banner weight or zipped, because zipped Adobe Animate banners usually weight much less, sometimes 2x or 3x less.

Hosted libraries

Always ask the media agency or Publisher about hosted or inline libraries. Adobe Animate is using createJS animation library in all HTML5 canvas animations. If you need to inline the createJS code into ads and cannot use hosted library — it will be a really big problem, because createJS library alone weights ~200KB (unzipped).

Use CDN or host files/banners/assets yourself

Nothing else works — host banners on some server, CDN and next time don’t make the same mistakes.

Usual requirement we try to keep with is 150KB zip archive. Even 6–7 frames and 30 seconds animated banners, when done right, can comply with that specification.

Bigger banner size usually is not the end of the world to anyone, it may simply cost more for the media agency to display ads. Try talking with people, exchange examples, demos and you will find a good solution.

Have some more ideas or solutions? Let’s share!

Here at Adguns we know how to design, develop and animate HTML5 banners, create interactive and interesting Rich media ads, lead generating Landing pages and more. Have a look at our Portfolio and let’s talk. We know how to build great things!

900 banners in a month? Set of ads in 3 days? No problem, we know how advertising works!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.