Digital Production Creative Agency: How To Reduce HTML5 Banner Size?

One of the biggest challenges Digitaland has been hearing from agencies & partners we work with is that their designers struggle to create HTML5 banner ads that do not have enormous file sizes.
by: Digital Production Agency – Digitaland

Plus, unlike Flash—which both created and compressed each banner ad file into a simple SFW file—HTML5 banner ads are created with HTML, CSS, and JavaScript. Multiple video and audio files of varying sizes must be included in the final package to publishers in order to ensure compatibility on all browsers and devices. Plus, when you consider that some custom brand fonts alone can weigh up to 300K, you can see the banner size problems that can arise.

Compare HTML5 banners with Digitaland 100% Free animation compare tool – Click here!

Digitaland, Digital creative agency, work expertly with HTML5 in the creation of our rich media solutions so we wanted to address this complaint with a few tips for reducing HTML5 banner size.

5 ways to reduce HTML5 banner size

If you are experiencing a hard time reducing HTML5 banner size, these tips can help.

1) Reduce the size of your images

First consider if you even need an image to make your banner ad effective. If the answer to whether you need an image is yes, then consider using Scalable Vector Graphics, or SVGs, as a replacement for much heavier GIF, JPG, or PNG images (which are all pixel based and add more weight to your final package.) Tiny Panda is a good tool to reduce the size of your PNG files and can be found at https://tinypng.com/.

2) Use CSS to replace both solid color and gradients

You don’t need to use heavy images for color in HTML5. Use CSS to generate both solid and gradient shades and you’ll reduce your banner size in the process.

3) Optimize your font size

As we mentioned in the introduction, some required fonts can weigh up to 300k. You can reduce banner size by optimizing your fonts by using tools like Fontie, a web font generator found here: https://fontie.flowyapps.com/home. Make sure to choose the characters you need from the front instead of the entire typeface, for example, if the font contains Arabic/Greek and Latin characters, and you need only the Latin Choose Latin only.

Also, if you are using icons in your Responsive Ads , you might consider finding a vector-based Icon font instead to help to reduce your HTML5 banner size

4) Optimize your animation, too

Animation is important to rich media advertising but can be hard to do (and bulky) when developing with HTML5. Consider “outsourcing” your animation to products like GreenSock’s tweenLite animation can produce fast, flexible and engaging animation with minimal file size. Here is 28K banner example

5) A sprite sheet can optimize load times

Sprite sheets are tiled images that load only once, which can reduce the number of HTTP requests put out by your banner ad. The few request, the faster the load time for your creative.

Final thoughts

Before you build your HTML5 banner ad, you need to understand your publisher’s ad serving requirements so that you can ensure you don’t create too large of an HTML5 banner size to be loaded. Digital creative agency said that Many publishers still follow the recommended 35KB (compressed) initial load for creative and 100KB for total creative size. I believe in the non flash world file size will be a non issue. Looking to build better HTML5 banner ads? We are here to help and would love to hear from you.