Banners that are created with Bannerwise are automatically compressed on export to reduce the file size and help you meet the KB size requirements of your network. Most networks require you to upload a banner that is 150 KB or smaller.
Note that it is possible to calculate the size of your ads in Bannerwise before downloading them. This way you will make sure your ads meet the requirements of your network. Check out this article to know how to calculate the size of your ads.
If your ads exceed 150 KB because they might include large or multiple images, banners utilizing custom fonts, or complex animations, we have outlined several things you can attempt to reduce the file size of your HTML5 banners.
As a first step, you should always extract the zip file of a banner exceeding 150 KB and check what assets account for the large file size. Below we have listed some common reasons why your banners are exceeding the 150 KB mark, and what you can do to reduce the file size.
Large index.html file:
When creating a dynamic banner ad you realize that the index file is around or over 70KB, it is an indicator that you are using a number of different custom fonts in your banner. Unfortunately, there is nothing we can do to further compress your font files. We recommend double checking over your banner to evaluate if you really need all the custom fonts added.
Removing one or more of your custom fonts and replacing it with a Google font, will reduce the KB size of the index file. You can add Google Fonts in Bannerwise directly from the Font library.
For non-dynamic banners, Bannerwise automatically creates a subset of your custom font to reduce the KB size of the index file. Automatically subsetting your font means that Bannerwise will only export the characters used in your banner instead of the entire font family. Subsetting fonts is not possible in dynamic banners since we don't know what characters will be used. Subsetting fonts will drastically reduce the file size of your standard banners when using a custom font.
Large image assets:
Some images assets might increase the file size of your exported banner. This could result in your banner exceeding 150 KB.
In order to further reduce the KB size of specific assets after export, you can use Tinypng. Below you can find a list of 4 steps that you can use to compress images after export.
Drag all compatible image files (JPG, PNG) out of a banners asset folder and drop them on the interface of the TinyPNG website.
After the website is done compressing click on “download all”
Open (unzip) the output and copy the compressed images over to the banner asset folder
Overwrite all images by replacing all the old images with the newly compressed counterparts.
Once you are done with one size, pick a new size to reduce the file size and go back to step 1.
Retina:
Switching off the retina toggle will help reduce the file size of your ads.
Retina makes the images in your ads 2 times bigger since retina screens have a 2:1 pixel density ratio, meaning 2 times more pixels per screen pixel. It is important to know that not to get blurry resulting images, you need a 2 times bigger image added in your ads while building them. Read this article to know more about retina.
What extra measures does Bannerwise take to reduce file size?
We aim to make your exported file as small as possible. Part of this is to automatically crop out parts of an image that are outside of your banner. In the image below, you can see how this works. This helps us to reduce the KB size of larger images where only a part of the images is actually used.
In the image on the left, the image falls outside off the Bannerwise canvas.
In the image on the right shows what the image will look like after export.
Some animation effects will prevent automatic cropping. These effects include scale up and down, rotate, and any direction effects. In the image below, we give an example of how an image will look after export in these cases.
Other reasons why your image is not being automatically cropped could be that it appears on two or more slides, and has different animations in both slides. In addition, elements that have been rotated will not be cropped either.
Sometimes even your best efforts will not help you get the banner under the required KB size. For those cases, you could work with 3rd-party-tags which are much lighter than HTML files.
If you want to know more about this feature and are interested in using 3rd-party-tags to publish your ads, schedule a meeting with us! We will provide you with the next steps and all you need to know.