TBM BLOG
What Is File Size and Why Is It Important?
Back in the Flash Player days (Flash is an old school coding language, think MC Hammer Days), ad-serving platforms standard file size limit used to be capped at 40KB. However, these days, with the introduction of HTML5 banners, the ad-server allowance has been expanded to 150KB-300KB. That’s an increase of 650%!
But what is file size, and how does it impact your digital banner ad campaign? First, let’s get back to the basics.
What is file size?
File size is the measurement of space a file takes up on a storage medium, such as a computer hard drive or ad server. File size can be measured in bytes (B), kilobytes (KB), megabytes (MB), gigabytes (GB), terabytes (TB), and more. Although we often refer to it as “file size” in the industry (or “filesize” if you’re nasty), it is more accurately referred to as file WEIGHT, i.e., how heavy a file is and how much space it would take to store that file in your hard drive.
Is file size the same as pixel size?
No. This should not be confused with pixel size, which is the amount of space an image takes up on your screen. Instead, file size is how heavy a file is or how much room it will take to store it on your hard drive. An MPU banner ad, for example, takes up 300×250 pixels on your screen, which means it is a small square that usually fits nicely in the gutters of a website, but it could have anywhere between a few dozen KB or several GB of file weight.
File size is equal to how many pixels
Although the pixel size (space a banner takes up on your screen) impacts the file weight (file size, how much room it takes to store the file), it is not causation. So naturally, the more pixels an image takes up on your screen, the heavier the image tends to be. However, we have seen MPUs that are poorly built, using sloppy code and without image compression that was over 3GB in file size (file weight). In contrast, we at The Bannermen often build beautiful looking, fully animated DMPUs under 150KB in file weight.
What’s the difference between file size and pixel size?
The best way to understand the difference between pixel size and file sizes is to think of aeroplane luggage. Your carry-on luggage must be small enough to fit into the overhead locker; however, the airlines still also limit the maximum weight your luggage can be. If you were to fill your luggage with pillows, it would weigh far less than filling it with solid gold bricks (we can all dream), but the size of your luggage will remain the same. The same goes for banners. Although the pixel size remains the same, a banner’s file weight (file size) can change depending on how heavy the assets are that the banner is made up of.
Does animation impact file size?
The code in the animation itself has a light file weight (size). However, it is the creative assets that the online banner ad is created with that hold the most file weight. Therefore, the more assets you have in an animation, the higher the file weight.
Which file size is the smallest and which is the largest?
Some of the common file sizes from smallest to largest include:
Why is it important to keep file sizes low?
Large file weights compromise the viewability and a websites’ load time. It may seem that the file weight of one single little ad on a website won’t make a difference. But what happens once there are five or six ads on that website? The extra file weight of that banner ad will start to add up, especially when several ads on the page are all at the limit. This, in turn, will impact the loading time of that website and affect the usability and customer experience. So, publishers (the owner of the websites) set file size limits to stop this from happening.
Google (ad server) says I have a limit of 5MG; do I still have to work with 150KB-300KB?
Googles Ads size limits are 5MB (5,000KB). However, some publishers might set lower limits for their ad serving websites. As a result, larger file weights may be rejected. That’s why we recommend staying within a 150KB-300KB limit.
But what happens if a banner ad is above the file size limit?
The worst-case scenario? Your animated ad won’t be seen. Banner ads that exceed the file size limit set by the publisher may be rejected, and a static JPEG image will be served in its place. Imagine all that hard work coming up with an animated banner concept, getting your creative team to design it, finding the right production company to develop it, only for it never to see the light of day! All that hard work and money will have gone to waste.
That is why it is important to work with developers specialising in HTML5 banners and digital display—experienced developers like TBM. We understand the importance of file weight and how to get it right, so your online banner ad will be seen.
What increases file size?
Let’s look at some factors that can increase file weight and how you combat these issues.
Colours and Gradient
Colour and gradient eat up the file size. In fact, if you are working with a limited file size (150KB), we recommend avoiding using a gradient completely.
-
- Problem: The more colours an image contains, the more file space it takes up. For instance, a computer uses 8 bits of data to show 256 colours.
- Solution: Replace both solid colour and gradients with CSS. By using CSS to generate both solid and gradient shades, you will reduce your banner size.
Images
High-res images also take up a lot of file space on your HTML5 banner ad.
-
-
- Problem: GIFs, JPGs, or PNG images bloat the size of a file as they are all pixel-based and add more weight to your final banner.
- Solution: Consider using graphics and illustrations as a replacement which are a lot more file size friendly.
-
Can file size be reduced?
Yes. However, it depends on the type of asses used within a creative. And with the correct compression settings, you can achieve good image quality and smaller file weight.
For instance, how do you reduce the file weight of a photo? And how do you do this without losing quality? Generally, you can save a file with an image compression level between 70-80% without seeing pixilation or the individual points of colour. However, the amount of compression will vary on many factors, including the original image’s file size and format. Read more on how to reduce the file size of a photo here.
What Type of Banner Is Best for File Size?
DMPU or Billboards are larger banners and therefore struggle to fit under file size limits. We recommend starting with an MPU banner, especially for mobile display units.
What is An MPU banner?
MPU ads usually appear mid-page, hence the name. And due to its compact size, the MPU can be produced within file size limits without sacrificing image quality.
What are the benefits of lower file size?
Not only will websites load faster if file weights are smaller, but search engines like Google favour sites with faster load times, giving your ad a better chance of being seen. Therefore, making it even more critical to keep your file sizes as low as possible.
Are you unsure of what file size you need?
Then contact your media agency to find out what file size you are working to for your digital banner ad campaign. Do you want help creating outstanding digital display campaigns? Then contact TBM today!