Creating an image ad that meets the file size requirements

As a developer you may not have spent a lot of time thinking about the size (not the dimensions) of the images you use in your app. However, when it comes to sending images over a network the number of bytes that are transmitted affects the time it takes to transfer the data that makes up the image and the cost of sending that data over a network. For this reason we limit the size of images that can be used for ads. For banner ads the limit is 25KB and for interstitial ads the limit is 256KB.
partial screenshot of ad configuration screen that shows the file size limit
We get a number of questions about how to create images within these limits so I’m going to show you how. I’ll provided an example of creating a banner ad that fits within the size limit but the same principles apply to interstitial ads too.
Why is this an issue?
In an image that 768 pixels wide and 128 pixels tall that’s 98,304 pixels in total. If using a bitmap format, such as PNG, that requires a separate byte for the Red, Green and Blue value of each pixel we need 294,912 bytes. When including the additional required information and file headers we can end up with an image over 300KB in size. (It’d be even more if we needed to store alpha values too but fortunately image ads don’t need any transparency.)

To prove this point, here’s an image where every pixel is a different color. (If interested, it was created with this code.) The size of this PNG image is 302KB.
PNG image where every pixel has a different RGB value
Different image formats store the image information differently and can result in different file sizes. Here’s the same image saved as a JPEG.
JPEG image where every pixel has a different RGB value
This image is just 30.9KB (almost a tenth of the size). There is more that can be done to affect the size of an image though and that’s what I’ll demonstrate now.
Here’s a banner ad, for a fictitious game, that we’ll use for the demonstration.
Monkey in tree with app title text "Monkey puzzle"
As it stands the image is 231KB and so much larger than we can use.

Before we consider changing the format let’s look at what can be done to decrease the size of the PNG.

I’m going to do this with the excellent free tool Paint.NET. If you’re not familiar with this application it is free image and photo editing software for PCs that run Windows. You can download it from http://www.getpaint.net/

When we save a PNG file from Paint.NET there are some options available.
Paint.NET PNG save dialog with "Auto-detect" level selected for Bit depth
Here you can see the default settings that were used to create the original image above.
The fact that this dialog shows a preview of the image and the size of the file that will be produced is very useful.
As we change the Bit Depth you’ll notice the file size changes.
Paint.NET PNG save dialog with "32bit" level selected for Bit depth
Dropping to 32 bits increases the file’s size to 257.3KB.
Paint.NET PNG save dialog with "24bit" level selected for Bit depth
At a bit depth of 24 we see the file size of 231 KB and so can infer that this is the automatic value that was selected.
Paint.NET PNG save dialog with "8bit" level selected for Bit depth
At 8 bit we see the file size drop to 54.6KB but this is at the cost of image quality. You’ll notice that the blurred leaves around the text aren’t as smooth.
Paint.NET PNG save dialog with "8bit" level selected for Bit depth plus dithering and transparency set to zero
If we then take the settings to their absolute lowest and set the dithering and transparency threshold all the way down to zero the size of the file only gets down to 41.2KB and what were intended to be blurred leaves in the background no longer look like the original due to the inability to have the number of different colors in the file to create this effect.

As we can’t create a version of the desired image as a PNG that fits within the imposed size limit we need to consider other options.

Only JPEG and PNG files are supported for ads so that limit makes our decision of what other format to use easy for us.

If we weren’t limited in this way the selection of a format only becomes slightly more complicated. As a very simple way of determining which to use, PNGs are better for line based drawings and JPEGs are better when using photos or gradients. As you might expect a question on the differences between image formats has been asked on StackOverflow and there’s a very good summary of the differences in one of the answers.

As a JPEG of the highest quality, the file size is 90.1KB
Paint.NET JPEG save dialog with 100% quality level selected
Paint.NET provides a single setting when saving a JPEG file but it’s a very powerful setting. By adjusting the quality of the image that is output we can create a file that is usable within the imposed restriction.
In this case we need to lower the quality to just 74% to get what we need.
Paint.NET JPEG save dialog with 74% quality level selected
This image also preserves adequately smooth blurring of the leaf background which was the effect I was trying to achieve.
Paint.NET isn’t the only option for controlling the size of saved images. Gimp is another free to that also allows control over the output file. In fact it provides even more options than Paint.NET to control the output. The difference between the two applications is that Paint.NET shows the preview in the same window as the setting, while GIMP updates the image in the original window.
GIMP JPEG export dialog
Whichever program you use to create your banner and interstitial images there are two final tips I’d like to share.
  1. Make the image size as small as possible without impacting quality. This will allow the image/ad to load faster and therefore be potentially seen by more people.
  2. Test your image on an actual device to make sure it still looks as good on a small screen as it does on the monitor you upload it on.

I hope this helps you when preparing the images you use for your ads but if you still have any questions please get in touch via support.adduplex.com
Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Reddit