Making Images Work for Banners

When Flash was king, we were stuck with a lousy 40K file size limit for a standard ad unit. Now with the death of Flash and the rise of HTML5, we are given an opportunity to do slightly more creative things with banner ads. With the recent draft specifications released by the Interactive Advertising Bureau (IAB), we are given more flexibility with file size, but we still need to be mindful that the extra room can quickly get used up. Choosing the right kind of assets and knowing how to use them will allow you to get more and create better results for your banners. Below we will talk about two different formats and how to use them.

JPG Formats and How to Use Them

JPG format is a lossy compressed file format. This makes it useful for storing photographs at a smaller size than a BMP. Lossy means the image is made even smaller, but at a detriment to the quality. When saving your images in JPG format, you get lower file size, but the quality of the image can be impacted.

Below I’ll compare the same image while showing the different stages of compression and how it affects the overall quality of the image.

Image of peacock with tail feathers expanded at 164K Image of peacock with tail feathers expanded at 37K Image of peacock with tail feathers expanded at 24K

Image of piled paper maps at 115K Image of piled paper maps at 23K Image of piled paper maps at 12K

Image of city lights in fog at sunrise at 51K Image of city lights in fog at sunrise at 8K Image of city lights in fog at sunrise at 5K

The Details

When looking at a JPG, there is no good way to know how much file size an image is going to require. When comparing two different images side by side, they could be equal in dimensions, but that does not mean they will be equal in file size. Many factors can play a huge part in file size, such as the amount of colors, details, and just how busy the overall image looks.

Below demonstrates the same size/dimension images with the various file sizes.

Image of a river running through a city at night at 128K Image of a kayaker on a lake in the mountains at 119K Image of a lake in the mountains with a cloudy sky at 91K

Image of glaciers and the ocean under a blue sky at 79K Image of a stone hallway made up of arches at 110K Image of a woman hiking mountain trails at sunrise at 99K

PNG Formats and How to Use Them

PNG format is a lossless compression file format, which makes it a common choice for use on the Web. Lossless means that the image is made smaller, but at no detriment to the quality. When saving out your images in PNG format, you get better overall image quality, but that will sometimes result in higher file size.

Below we will compare the same image in PNG and JPG format.

PNG thumbs-up neon "like" sign at 71KJPG thumbs-up neon "like" sign at 21K

Asset Size Matters

There are also a few things to keep in mind when creating PNG assets. If the image asset needs to have transparency, then we want to keep the overall dimension of that asset smaller. The larger the image asset needs to be, the larger the file size.

Below demonstrates the different sizes and file sizes after being compressed.

Large PNG image of a bomb with a lit fuse at 168K Medium PNG image of a bomb with a lit fuse at 108K Small PNG image of a bomb with a lit fuse at 72K

Resources

Qualia and Strong AI