How to Reduce Your HTML5 Banner Sizes

One of the biggest challenges designers face when creating banner advertisements since the demise of Flash is keeping to file size restrictions. As Flash both created and compressed each banner ad file into a simple SFW file this made it easy for designers to keep file size low.

HTML5 banners are created using HTML, CSS and JavaScript but images, font files and occasionally multiple video and audio files in order to ensure compatibility on all browsers and devices. This is where problems begin to arise as some custom font files may weigh up to 300K on their own.

Here are a few tips that may come in useful when trying to reduce your banner Ad’s file size:

Reduce the size of your images

The first thing you should consider is whether you need an image to make your banner ad effective. If you do need an image it may be worth using Scalable Vector Graphics (SVG’s) as a replacement for much heavier JPG, GIF or PNG images which are pixel-based images which will add more weight to your final package. If you can’t SVG files there are many online tools which can be used to reduce GIF, JPG and PNG file size, for example, Tiny Panda.

Use CSS to replace both solid colour and gradients

Heavy images are not necessary when using colour in HTML5. As CSS can be used to create both solid and gradient shades which will reduce files size in the process. Also, gradients can be layered up to create different effects, for example, 3D effects, which may help you swap out more imagery.

Font optimisation 

As mentioned earlier, some custom fonts can weigh up to 300k. This can be reduced by optimising fonts using tools like Fontie, which is a web font generator. Make sure you choose the characters that are needed instead of the entire typeface, for example, if the font contains light, regular and bold characters, and you only need regular choose regular only.

If you are working to very tight file size restrictions it may be worth considering swapping out all text out for images using alternative text, which will allow you to reduce file size even further. This allows you to supply banners without including font files and therefore more advanced creatives can be supplied. If you are using icons within your banner ad, vector-based icon fonts can be used to reduce file size.

Optimise your animation

Animation is important to rich media advertising but can be hard to do and very bulky when developing with HTML5. Therefore, consider outsourcing your animation to products like GreenSock’s tweenLite animation which can produce fast, flexible and engaging animations with minimal file size.

Use of sprite sheets

Sprite sheets which are tiled images that only need to be loaded once reduce the number of HTTP requests put out by your banner. This results in faster load times for your creative as the fewer requests the faster the load times.

Final tips

Before you begin to build your HTML5 banner ad, it is vital that you make sure you know your publisher’s ad serving requirements so that you can ensure you are working to the correct file size. Unfortunately, many publishers still follow the recommended 35KB (compressed) initial load for creative and 100kb for total creative size.

If you require help making the change from Flash to HTML5 advertising or keeping banner file sizes low without sacrificing aesthetics. Xigen has a team of experienced designers and web developers well versed in the creation of both standard and rich HTML5 display adverts, taking advantage of the latest techniques.

Visit us today or check out our latest projects to find out how we can help you reach a bigger online audience!