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
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.
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.