According to a recent article of AdAge 40% of the online ads are overweight. This article reflects on the findings of a report of AdLighting about ad quality. In this report it is not clearly stated to which region the results apply, so the findings in your country might be different than stated. As a display ad production agency we know the challenges and I’m quite glad to say that our ads are definitely not part of this 40%. I think that every agency has it’s own secrets in keeping their creatives small without losing quality in the ad or creative concept.
At Men in Green we set the maximum weight of a zipped online ad to 150kb, and sometimes this really requires a lot of effort. In this article I’m looking into the standards set by the Interactive Advertising Bureau (IAB) and the possible reasons for the overweight ads.
Transitions from flash to HTML5
A few years ago we all made the transition from flash to HTML5 ads. From my own experience I can tell that this transition in the Netherlands went all but smooth. Many publishers weren’t clear on whether they supported HTML or not and this often resulted into creating the same ad twice. I believe one of the core challenges at the time was file size. Flash automatically compiled and compressed advertisement into a single small file (SWF), with HTML however, this was not the case. From the start we knew that it was simply impossible to reach the same file size for HTML ads as for flash.
Fortunately the IAB helped the industry along and produced numerous reports and advices for publishers and production agencies, helping to set the new standard. Currently we are still often referring our publishers and clients to the Guidance for Ad Designers and Creative Technologist, which gives a pretty good insight into how ads should be build and what a good standard should be.
What IAB says on file size
One of the reasons why there are “Fat Ads” might be a misunderstanding of what should be accounted for in the file size of a creative. IAB uses the following definition when calculating the file size of a creative:
- createjs-2015.11.26.min (50kb)
- TweenMax.min.js (38kb)
- jquery-3.1.1.min.js (31kb)
- easeljs-0.8.2.min.js (26kb)]]
In my experience each publisher has their own take on how to deal with these libraries. Google however, has allowed developers who create ads for Double Click Studio (mainly used for rich media ads) to refer to their libraries. Our opinion is that external libraries should always count towards your ad size, until publishers provide these libraries for you. When publishers do support libraries we should still be cautious into using libraries such as CreateJS, TweenMax or jQuery in ads, these are simply too large. IAB’s take on this is as follows:
‘‘ Publishers and ad servers are encouraged to exempt certain shared libraries from the initial file weight calculation of the gzipped HTML ad. During the publisher certification process, publishers should approve both the shared library and its source before the library can be exempted from ad file size. If shared libraries cannot be exempted, the file weights for these libraries must be included as part of the ad's initial file weight. ‘‘
How to reduce the file size of your creative
So, what to do when you’ve created an ad which exceeds the 300kb limit. There are many areas where you can look into to reduce the file size:
- Try to make small adaptations in the creative concept, or divide it into separate ads.
- Compress your images using Photoshop or online tools.
- Minify and compress all code and libraries.
- Use font subsetting to reduce the size of your webfonts and consider using data URI for inline font data embedding.
- Stay clear of HTML animation software.
The last point ‘Stay clear of HTML animation software’ maybe requires some explanation and might be one of the reasons for the “Fat Ads”. We see many ads created by Adobe Animate CC, Adobe Edge, Google Webdesigner and other tools. These tools make it easier for developers to animate ads, but at a certain cost. Personally I believe Google Webdesigner is the most file size friendly, if you know the tricks to keep your ads small. Adobe Animate CC with HTML5 canvas however creates overweight ads in disguise. To elaborate this I’ve created a blank HTML5 canvas project and exported it. This resulted into the following:
- Canvas.html (3kb)
- Canvas.js (4kb)
Looks good right? But when diving into the exported files you find the following line:
This is the CreateJS library referred to earlier and increases your ad sizes with 50kb (compressed) without you even noticing. Using software to animate your ads makes your life easy, but it does come at a certain cost.
At Men in Green we experience first hand how much effort it takes to prevent overweight ads, but we always manage to stay within the limits defined by IAB. It is fair to say that it does require a solid relation with the client, because sometimes this means shifting the original concept of the creative. We believe that we all should take the responsibility into creating more user-friendly and less intrusive ads to create a better experience for the end users. Reducing the file size is a solid first step in the right direction and increases the viewability of your ads.
I would love to hear your take on this. What are your tricks to reduce ad size and what is your opinion about using shared libraries?