TinyPNG is the most used in the industry. You can upload and compress all images at once resulting in optimal file size. For further adjustments you can use Fireworks or Photoshop.

Using CSS styles and shapes.

Colorzilla’s gradient tool is perfect to obtain cross-browser results. Using CSS’s vast resources, you can create very complex shapes and enables the addition of effects and loops.

Fonts.

A great tip from Digitaland is to use Fontie to select the characters you need to load from the font (that is if you have a web-font). This shares the same process as the selecting of characters in a Flash built ad. If you don’t have the web-font then creating images in Photoshop is the only alternative option.

Choosing the best tween engine.

Greensock’s TweenMax and Lite are the industry’s favourite. They are powerful and have a low file-size. Using Css transitions is highly recommended as it is light as a feather and has the same capabilities as TweenLite, however, writing it can be very painful. AtomTween makes this very easy by compiling cross-browser CSS transitions just as you would write a TweenMax animation function.

Exploring other options

There are many other ways to achieve great animations. You can slice and repeat parts of an image, use gifs and sprite sheets. In the Ebook: HTML5 Banners Animation Guide you can find this explained in more detail.

File-Count

Now that we have seen how to optimise the file-size of html5 banners, sometimes a publisher might require the ad to contain a limit of files. In certain cases. your html, css, javascript, images and assets should not comprise of more than 12 files.

Sprite sheets

With InstantSprite, gather all images with the same extensions and create a sprite sheet. In css, the positioning of the images can be done using the background-position property.

Knowing how to manage your assets and achieve the best possible results is fundamental for the success of any project. These points and many others are described in detail in the e-Book: HTML5 Banners Animation Guide.