Author: Bryan Vorel, Multimedia Programmer

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.

1_1 1_2 1_3

2_1 2_2 2_3

3_1 3_2 3_3

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.

4 5 6

7 8 9

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.

like2like1

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.

bomb1 bomb2 bomb3

References

  1. Unsplash.com.