As we’ve seen in the article called “Maximum recommended banner file size”, there are some restrictions regarding the banner ads’ file size. These restrictions are set by publishers in order to keep their pages decently quick to download. They are encompassed in an IAB standard.

Since it’s very easy to go over the line with the banner’s file size, let’s see some simple and quick ways to optimize your banner, whether it’s going to be a static or a flash animated one:

1. Crop or resize your images. If you are going to make a 300×250 px banner don’t load a picture of say 2400×1554 px. Use an image editor like Photoshop, Paint, Photo-Paint, IrfanView etc. to crop off the area of the picture you need.

If you need aproximately the whole picture, resize it, but be careful to constrain proportions. In this example you could resize the 2400×1554 px down to 16% of the original size, resulting a 408×264 px resized image. Now you can go further with the image optimization and crop this resized image to fit perfectly the 300×250 px size of the banner.

2. Adapt the pixel per inch (PPI) density for the web. Photographs and other images come in very different pixel density, like 180 PPI, 250 PPI, 300 PPI, 600 PPI and so on. The usual pixel density for the web is 72 PPI. 72 PPI is the usual density per inch a monitor can display. There are monitors and devices that can display more, but 72 is considered safe for two reasons: it’s good enough for a clear image and it’s small enough for the banner to keep its file weight decent.

3. Compress and save. In order to further optimize your images, you have to slightly compress them. The most common image format that is going to be used to make banner ads is the JPG. Save the image and set the compression level somewhere between 75-80%. If you use Photoshop choose File>Save as for Web or save it normally being careful to set the compression level to 8-9 (out of 12).

4. Flash banners only! Whether you use Adobe Flash or BannerSnack – The quick & easy banner maker, it is recommended not to use too many effects, transitions, filters and complex animations at one time, because most of the users’ computers aren’t that fast to support too complex flash animations.

I hope you’ll find the information above useful. I expect designers to come and suggest other techniques of optimization. They are the pros in this field after all.

Related article: How to reduce file size in BannerSnack

This entry was posted on Monday, January 12th, 2009 at 8:08 am and is filed under Banner Advertising Basics. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.