How to optimize your banners for the web

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

3 Comments

  1. MOGAJI Gbenga March 5, 2009
  2. Michael July 15, 2010
  3. Isa Anderson February 10, 2013

Leave a Reply

Your email address will not be published. Required fields are marked *