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. Updated 2018.12.04.
tl;dr
- 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–150 KB 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 is our main HTML5 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 generated by Adobe Animate. In some cases you will have huge PNG or JPG files (100+KB).
Just use https://tinypng.com/ for images compression (or any other image compression service/software). Sometimes you will be able to compress images more than 70% without reducing the images 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…
Update 2018.12.04:
For some time we are using RIOT Image Optimization tool (Windows OS, free) that allows to compress images drastically (sometimes to pixels). RIOT will reduce image quality, but you will be able to meet the specs. Also “Compress to size” RIOT’s functionality is very handy when you are fighting for every KiloByte.
Working with Mac/iOS? — Please share what you are using for drastic images compression in the comments.
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).
There are quite a lot of online tools for minification of JavaScript, CSS and HTML, some of them:
- http://www.danstools.com/ has CSS minify, JS minify
- https://www.giftofspeed.com/tools/ has CSS minify, JS minify and more optimization tools
- https://cssminifier.com/ CSS minify tool
- https://kangax.github.io/html-minifier/ HTML minify tool with some handy settings
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:
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/traffic ads. Try talking with people, exchange examples, demos and you will find a good solution.
Have some more ideas or solutions? Please share them in the comments below.
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!
