We Can Do a Lot with a 150KB– 300KB HTML5 Banner

Are you concerned about your limitations with 150KB -300KB? Don’t worry. You can do a lot with 150KB-300KB! From animations to moving text, we can help you create an animated digital campaign that is unique, compelling and, most importantly, effective. Read on to learn more about the 150KB-300KB file size limit and what creative options you have.

If you want to know more about file size and why it is important, read our blog here to learn more.

 

Do all HTML5 campaigns have a file size limit?

Yes. Rich media campaigns usually have a high file size limit that you might overlook (2.2MB). For standard campaigns, the limit is usually much lower (IAB recommends between 150KB-300KB) and, therefore, can cause more significant problems if the file size is over the limit.

 

Who sets the 150KB-300KB HTML5 banner file size limit?

The publishers. Publishers are the owners of the ad space (websites) where you will serve your banner ad. Therefore, the publishers set the limits for the file size that can be used on their websites (this helps them save server space). Each website has its restrictions on file size, and some publishers might set lower limits for their websites. To ensure that your ad adheres to each publishers’ file size restrictions, it is best to work within 150KB-300KB.

TIP: If you plan to traffic a standard HTML5 banner campaign, get confirmation from your media agency of what file size limits you are working with (this should be one of the first questions you ask).

 

Why doesn’t my media agency know what the file size is?

This is a bit tricky, and why it can be challenging to get a straight answer regarding file size. Your media agency has access to software that allows them to serve your ad on millions of different websites. However, there is no real standardisation across the internet. Meaning each website (publisher) can be built using whatever code they like. They can also use whatever hosting solution they want. And subsequently can decide how much file size they will accept for the ads served on their page.

Consider this: Your media agency’s software is not targeting websites per se, but people. For example, your campaign might be targeting women between 25-40 years of age. So, at any moment, your media agency needs to be ready to serve a banner on a limitless number of websites, all of which will likely have different file size limits. Now, do you see the problem?

Read our blog here to learn more about media agencies and publishers and how they fit into the digital advertising space.

 

Which file size do you recommend for an HTML5 ad campaign?

Larger media agencies that work with the biggest brands demand that their publishers use the basic minimum of file size. In the past, the basic minimum file size restriction recommended by the IAB was 150KB. But recently, we have seen those numbers go up to 450KB (Quantcast). Unfortunately, for smaller and midsize media agencies who do not have the buying power of the world’s larger corporations, there is rarely ever such clarity. For those clients, we recommend sticking as close to 150KB as their creative will allow, and steering clear of anything over 300KB.

 

But what type of banner is best for file size?

It’s best to start with an MPU banner. Then the entire digital campaign will be designed off the back of this size.

What is An MPU banner?

MPU ads generally come in both desktop and mobile. So, if you are working with a smaller file size, the same MPU unit will work on both a desktop and mobile with little to no adjustments to file size.

 

How many images can I use in a 150KB HTML5 banner?

We recommended having a maximum of 3 images. If you try and squeeze even 1 or 2 additional images into the build, it will be too much, and it will impact the animation, file size, and images will become blurry.

 

What is 150kb equivalent to in pixels?

This question is the equivalent of saying: how many kg in a mile? Kb (kilobyte) is a measure of file weight (i.e. how much storage the file takes up), whereas pixels are a measure of size (how many pixels it takes to display the image on your screen). There is, of course, a correlation between pixel size and file weight, the same way there is a correlation between how tall someone is and how much they weigh, but the two types of measurement are not interchangeable.

Below is a table of common pixel sizes for HTML5 banners and the recommended file weight (file size) for those banners. When dealing with file size restrictions, it is always good to remember that the bigger your banner is in pixel size, the more file weight or file size it will produce with the same number of assets.

Banner size in pixels	Banner file size
120×600	150KB-300KB
160×600	150KB-300KB
300х250	150KB-300KB
300×600	150KB-300KB
728×90	150KB-300KB
970X250	150KB-300KB
320×50	150KB-300KB

 

If I have a 150KB limit, do I have to serve a static JPEG?

Google serves a backup JPG static instead of the animated banner if your banner is rejected by the publisher because the file size is too large. Therefore, it’s best to serve a static, so you have this backup in place in case anything goes wrong. You don’t want to get caught out!

Backups should also be served if a publisher rejects your creative due to file size. So, make sure that your team has considered a fitting backup image for your campaign as well as the animated HTML5 banner. That way, your product will shine no matter which options is served.

 

What can you include in a 150KB HTML5 banner?

It’s absolutely possible to create great content with 150KB with the right knowledge and experience. All you need is bold, impactful imagery, a clear message for smooth eye-catching results and a team of experts that will help you produce exceptional digital display ads. That’s where TBM come in. We will work closely with your team to create astounding 150KB ads that include visual integrity, movement, and copy.

Do you want some HTML5 banner inspiration? Then check out some of our standard html5 banner ads examples here.

 

Why is my developer telling me they can’t animate a 150KB HTML5 banner design?

Like any web development, there is no standard way to build a banner. And some less experienced developers might be tempted to use a software solution to do the build. For instance, they may use Adobe Animate or Google Web Designer. While those programs are great for certain projects, they often create a mess of bulky code that sits underneath your HTML5 banner ad. This code-bulk can inflate the size of your banner, leaving you less room for images, less for animations and basically less room to be creative.

 

Should I work with a more experienced developer for my HTML5 banner designs?

It is not just junior developers that fall afoul of banner file size limits when creating HTML5 ads. Since websites do not adhere to strict file size restrictions, many talented senior front-end developers have never worked with small, restricted file sizes. And yes, they might build you a beautiful aminated banner using elegant code. However, the file size will invertibility be too large to be served by most publishers and will never be seen! Therefore, it will be a waste of your time and money.

That’s why it is important to work with developers specialising in HTML5 banners and digital display—experienced developers like TBM.

 

What can’t you do with a 150KB HTML5 banner?

Do you want your banner ad to be interactive and include video? Unfortunately, video or integrative elements can’t be added to a standard 150KB HTML banner ad. But, fear not, we’ve got you covered! If video is something you want to include within your digital advertising campaign, TBM also offers Medium and Complex Animation.

 

My developer built the HTML5 banner too big can it be compressed below 150KB?

It is possible to convert a larger file by compressing the file. However, this can only be done to a certain extent, depending on the type of assets used. You may be surprised to know that it’s the assets, not the animation, that contribute to file size. No, really, it’s true! For instance, high-res photographs use up a lot of file space. But, on the other hand, illustration is easier to work with when working with tight standard file sizes.

 

Are you looking to create an awesome digital banner ad campaign?

TBM has created exceptional digital displays for clients just like yours. Contact us today, and let’s get started on your HTML5 banners!