Web Graphics - Creating Ad Banners
IAB Recommendations ...
It was once estimated that there were over 200 sizes of advertising banners in use on the Web. Back in the 1990's, in a bid to reduce the number of sizes, a joint IAB/CASIE initiative recommended a range of eight sizes for web advertising banners and buttons. Using these sizes has always been voluntary and it is a little disheartening to see how many advertising banners or buttons are still being created using non-standard sizes. In spite of this, I do urge you to create your banners using the recommended sizes because they do point the way towards some very desirable standardization and using standard sizes for your banners will demonstrate a degree of professionalism that is not in evidence with other size banners.
The early IAB/CASIE recommendations also stipulated a maximum size for web banners of 11 KB and a maximum of three frames for animated banners. I must admit to breaking the three frames recommendation but have always adhered strictly to the 11 KB size recommendation. It is worth reminding ourselves that advertising banners are guests on other sites Web pages and it is not fair to overburden their pages with bloated size banners that take a long time to load. It is also very clearly in the interest of advertisers that their banners should load as quickly and efficiently as possible otherwise the user may well have navigated away from the banner by the time the banner is ready to be displayed.
- IAB: (Internet Advertising Bureau). At the time of updating this page (July, 2005) the IAB appears to be the only organization actively encouraging Internet advertising standards.
- CASIE: (Coalition for Advertising Supported Information and Entertainment). CASIE on the other hand appears to have evaporated. I can find plenty of references to CASIE on the Web but their Website appears to have disappeared altogether.
Banner File Formats ...
If you are creating an advertising banner then in my experience, your options are limited to three possible formats, GIF, JPG or PNG. If you want to create an animated banner then the only realistic option is to use the animated GIF format but be aware that you are limited to 256 colours with this format. For non-animated banners displaying simple line art and/or text then you can use the standard GIF format or the PNG format. Finally, if you want to display gradients or photographic like images that require more than 256 colours then you should use the JPG format but be aware that JPG files cannot be animated.
- Static GIF: This is by far the most popular format for creating non-animated banners that contain line art drawings or text. You can also create banners with transparent sections at no extra overhead in size. Photographic type images or gradients can also be used but special handling is required to reduce the number of colours to below 256 because this is the maximum number of colours a GIF file can contain.
- Animated GIF: This is the only realistic format for creating animated banners. All the features of a static GIF file apply but you will require an image manipulation program that is designed to handle animated GIF files.
- JPEG: Ideal for non-animated, protographic type images or images that contain a lot of gradients. JPEG files support up to 16 million colours but be aware that JPEG is a 'lossy' format so create your banners using a different format and then save a copy of the final version as JPEG. JPEG files can be heavily optimized for publication on a web page without any obvious signs of quality loss.
- PNG: PNG files can do most things that GIF and JPEG formats can do but this format has been very slow to catch on, possibly because of a lack of proper support from the major graphics applications which seem to produce very large PNG files. Use GIF or JPEG for web banners.
- BMP: The BMP format is Microsoft's own proprietary format and this format can be displayed in Microsoft browsers but not in any other browser that I know of. The BMP format is a non-lossy format but the file sizes are comparatively large. Avoid for web banners.
- Flash: We are beginning to see the appearance of Macromedia Flash animation advertising banners but apparently, many web sites ban them out of hand. Flash banners should be fine if the users browser has Flash installed and enabled but large numbers of web browsers are not 'Flash enabled'. Avoid using for web banners.
Banner and Button Sizes ...
This section displays a size indicator graphic for each of the IAB/CASIE banner and button recommended sizes together with a corresponding example ad banner, randomly downloaded from the Web. We also take the opportunity to discuss the various merits of each of the example banners.
468 x 60 Full Banner
I created this animated GIF banner several years ago. It has eighteen frames which well exceeds the three-frames recommendation but even with eighteen frames it weighs in at a lightweight 6.15 KB in download size, well below the 11 KB maximum size limit. This size of banner (468x60) is the most popular size for larger banners.
234 x 60 Half Banner
This professional looking half banner is a static GIF that contains gradients. It has a size of 4.33 KB, well below the 11 KB maximum limit but I would like to see the size reduced to approximately half it's present size. In spite of this, it is well done.
120 x 240 Vertical Banner
This animated GIF banner contains eight frames, each consisting of the same photographic images. It has a size of 14.4 KB which exceeds the 11 KB maximum limit by some 40%. Had they opted to create a single-frame JPG file they could have reduced the size to 7.5 KB or less and I do feel that the animated GIF size could be reduced by experimenting with a reduced number of colours, different graphics package optimizations and/or the use of a specialist animation package. I tried merging similar colours which brought the number of colours down from 128 to 32 and I then re-optimized the animation which produced a more acceptable download size of 10.9 KB. There was no discernable difference in appearance.
120 x 90 Button 1
This animated GIF button contains eleven frames and weighs in at a heavyweight size of 21.1 KB, well exceeding the 11 KB maximum limit. Perhaps they should experiment with different optimization techniques and/or specialist animation packages to reduce this size. I tried optimizing the button and was immediately able to reduce the size down to 10.9 KB. This example also reminds us that GIF files can contain transparent areas and you should note that GIF transparency should have no effect on the size of the graphic because transparent pixels are simply treated as one of the colours.
120 x 60 Button 2
This animated GIF button contains seven frames and has a size of 7.43 KB, well below the 11 KB maximum limit. Top marks.
125 x 125 Square Button
This animated GIF button contains four frames and has a size of 11.7 KB, nearly meeting the 11 KB maximum limit. I tried reducing the number of colours fron 256 to 128 and then re-optimized the animation. This immediately produced a download size of 10.98 KB with scope for further reduction.
88 x 31 Micro Bar
This animated GIF button contains fourteen frames and has a size of 4.38 KB, well below the 11 KB maximum limit. I do not see too much scope for improvement except perhaps from a specialist animation package. Well done.
728 x 90 Leaderboard
This is one of the new generation of larger web advertisements, intended to acknowledge that a lot more users now have faster broadband connections as opposed to the slower dialup connections that were in the ascendency when the earlier banner size recommendations came into being. I have not found any recommendation as to a maximum download size for this size of banner so I have calculated a size of 16 KB as a maximum target size. I arrived at this size by scaling up from the earlier recommendation of 11 KB maximum size for a 468 x 60 banner.
I have checked a small number of leaderboard banners that are published on the Web and found sizes ranging from 7 KB to 29 KB. The CorelDRAW GIF animation displayed above complies with the 'three frames' recommendation but weighs in at 27 KB which I find a little disheartening because I am of the opinion that the animation could easily be optimized for the web without any appreciable loss in quality. Incidentally, the primary reason that I selected the CorelDRAW banner as an example is because their Graphics Suite includes Corel PHOTO-PAINT which can be used to create web banners, both static and animated.
Link Directly To This Page ...
help support free information on the Internet ...
Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.
the link displayed ...
select/copy the link Markup ...