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).
Just use https://tinypng.com/ 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
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).
- 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
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).
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.
Less content= less banner weight
Final thoughts and more ideas
Use HTML5 features
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.
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!