Many designers can struggle with optimizing their animated HTML 5 banners for web. Publishers, media companies, ad networks, and independent websites have varying and particularly strict guidelines on file size requirements for what files they’ll take. Some will be generous with their file sizes, allowing up to 200kb, but most want that final packaged file at 150kb at the top end to 100kb or under most of the time.

While there are a few different programs a designer can use to make their HTML 5 banners, the advice presented below focuses on Adobe Animate CC.

Reduce image size

Probably the easiest way to reduce size of your banners is getting any images used to a more manageable file size. Many banner ads require the use of some imagery, which often includes background images or even company logos. SVGs (Scalable Vector Graphics) or any vector imagery should be used in place of any bitmap (PNG, JPG, GIF, etc.) imagery whenever possible. If you have to use any pixel based files for your banner, do the following: size your images at the size you need them and optimize your images by compressing them.

If you have a 728×90 and 160×600 banner, make your background images at that size, rather than having a large background that works between a few different banner sizes. Reusing assets can reduce file size in some cases, but particularly for large bitmap images you’ll want them at exactly what size you need them.

For optimizing your images we recommend the following websites and programs:

https://tinypng.com/
RIOT Image Optimization Tool
https://compressor.io/
https://tinyjpg.com/

Our personal favorite is RIOT Image Optimization Tool. It’s excellent at compressing images when you’re struggling for every kilobyte on your banners. You will lose some image quality, but the trade-off is worth it when you compare the results to programs like Photoshop or Fireworks which will produce similar quality images at higher file sizes.

Reduce the size of your code (HTML, CSS, Javascript)

Depending on the publisher requirements for your HTML5 banners, your banners may not be allowed to call on the Hosted Libraries which Animate can automatically provide for your exported .js file. This can cause some very large .js files, but thankfully they can be compressed just like images (along with your other code bases as well). Here are some script minifiers/compressors we recommend:

https://jscompress.com/ (Javascript)
https://javascript-minifier.com/ (Javascript)
https://www.textfixer.com/html/compress-html-compression.php (HTML)
https://htmlcompressor.com/compressor/ (HTML)
https://www.cleancss.com/css-minify/ (CSS)
https://www.giftofspeed.com/tools/ (CSS and Javascript, also has other optimization tools)

Reduce text (and shapes) when possible

While your best bet for keeping a small file size is utilizing vector based images, including text, this can also increase your file size. When exporting HTML 5 banners from Animate your live text is converted to shapes, and each of those shapes is converted to a line of code in Javascript. Even after compression from one of the previously mentioned websites, your JS files can still be quite large.

If you have a text heavy frame it might be better to convert that text to a .PNG and then running that image through an image compressor.

Use a sprite sheet instead of individual images

If your banner uses quite a few bitmap images for the design, you can export your images as a sprite sheet instead of the individual images. If you only have one or two images that have already been optimized, we recommend sticking with the individual images, however for more complex banners with multiple background images or animating images a sprite sheet will reduce load since that sprite sheet is the only thing being loaded. Run your sprite sheet through an image optimizer to reduce file size even more.

Remove content

This seems extremely simple, but if you’ve reached this point then you’ve probably already tried everything listed above. Every element in your banner adds “weight” in kilobytes to your banner: text, animations, images, objects, etc. Simplifying your animations is the first thing we recommend for reducing file size. Instead of a complicated movement for getting your text on frame, simply have it fade or slide on (not both). If you have any masks in place, try and work to remove them as they can lead to heavier file sizes. If you have to keep those masks, try to make them as simple as possible. Keep the shape basic (squares/rectangles) and the sizes only as big as you need them to be.

—

When building your banners always keep the publisher’s specifications in mind. Request documentation  and requirements before you get started so you can design your banners with this restrictions in mind. If you don’t have specs try to keep your compressed HTML5 file size to 100-120kb and static banners under 60kb.