Optimize HTML5 Banners 

a)  Prepare your banner assets (images) using the exact size you need

Make sure your banner images are exactly the size you need them to be. For instance, if you're creating banners that are 300x250 and 300x600 in size, use backgrounds that are 300x250 pixels and 300x600 pixels accordingly.

One common mistake when designing sets of banners is using the same-sized assets for different formats. For example, using a 970x250 pixel background for a 728x90 size banner ad. If possible, try to avoid this. However, there are times when reusing assets can be beneficial, depending on the specifications and requirements you need to meet.

b) Optimize your images by compressing them

After you publish your banner, your banner assets are created. In some cases, PNG or JPG files will be generated at large file sizes (100+KB).  Compressing these images prior to  creating the HTML5 zip package will help to keep the banner weight as low as possible.

Suggested sites for image compression:

https://tinypng.com/ (png & jpg files)
https://compressgif.com/ (gif files; toggle between tabs to compress jpg & png)

If the above links do not help with JPG images — Photoshop can be used to compress the JPG images quality. Keep in mind that reducing JPG images in Photoshop will reduce the overall quality of the image, but sometimes it is the only solution.

Once you've published your banner, you'll find yourbannername.html and yourbannername.js files in the main folder.

If your ad contains a lot of text, it might be a good idea to compress and minimize the HTML/JS and CSS files (if you're using CSS) to optimize them.

Here are some recommended online tools for minimization of JavaScript, CSS and HTML:

http://www.danstools.com/ (CSS minify, JS minify)

https://www.giftofspeed.com/tools/ (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)

That's a lot of code to handle. Just picture having 5–6 sentences of disclaimers in the last frame of your banner or animation... Your .js file turns into a massive beast (200KB, 300KB, or even more). That final frame packed with text alone could weigh over 100KB 

So, how do you tackle this? Get creative! Try to avoid frames or screens that are overloaded with text or shapes. Instead, consider converting text-heavy frames into PNG/JPG images. The image size can be 70–80% smaller than the text size in the end, saving you a lot of space.

Furthermore, our banner specifications are based on the weight of the .zip archive. Try compressing the entire banner assets into a .zip file, and you'll notice a significant reduction in size. For example, zipping your text-rich banner could shrink its size from 300KB uncompressed to just 100KB as a .zip file.

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.

Each frame, text, and object in your banner adds to its weight. A banner with 6–7 frames will weigh more than one with 3–4 frames. Aim to optimize your banner by removing unnecessary animations, texts, frames, images, shapes, masks, etc. Simplify everything as much as possible. Remove elements, publish the banner, check its size, repeat the process until you achieve optimal results.

This testing phase is crucial because it allows you to identify frames, elements, or animations that contribute significantly to the ad's weight.

Another tip is if you're using frame-by-frame masks (not animated mask tweens but separate mask sizes in each keyframe), they add considerable weight because each mask shape is converted into JavaScript code. Therefore, the more mask sizes/shapes you have, the more JavaScript code is generated. Consider keeping masks in square or rectangular shapes to minimize this impact.