How to optimize your banners for the web

Creator / Banner Advertising Basics / January 12th, 2009 / 4 Comments »

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 the BannerSnack image editor to do that (just click Edit image) or use a computer program 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. 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).

If your banner is too big (in KB) you can reduce the size by reducing the image quality when you resave it.

3. 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

4 Responses to “How to optimize your banners for the web”

  1. MOGAJI Gbenga says:

    This was quite useful and I will have to implement it.I have a falsh banner on a site quite slow,the I knew that I didnt crop the picture to the size I want.I will have to make amends.Thanks

  2. Michael says:

    Optimizing flash banners starts in Photoshop to firstly optimize the graphics you need for the movie. Its crucial to the end size of the flash movie…

  3. [...] Read more in depth information on how to optimize your banners for the web. [...]

  4. Isa Anderson says:

    This article might be useful for the amateur designer but NOT for professionals. I wish there was a way that banner snack will further compress web banners as a whole like flash does. I make banners for the google content network and they only allow files to be 50KB or less. If I use banner snack to create those banners I can ONLY use one background image and animate the text ONLY in order to end up with a small file. Even if I crop & optimize images in photoshop to the maximum, I end up with HUGE file sizes when I finish the banner in banner snack.

Add new comment

Your comment