HTML5 Challenges: File-Size & File-Count

A few tips on creating light and optimised html5 files for standard banners.

You will learn:

  • How to to reduce file-sizes of images and fonts.
  • Which tween engine to use
  • How to tackle complex animations
  • How to package files within the file-count

File-size.

Digitaland wrote this neat article with great tips on reducing the size of your html5 banners, highlighting these 5 key points:

  1. Compressing images.

    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.

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

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

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

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

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

  2. CDNs

    Sometimes publishers will allow downloads from Third-Party vendors, useful for Tween Engines and Web-fonts.

  3. No links for Styles and Scripts.

    In some cases, when packaging the ad, the css and javascript files might need to be merged into the HTML file.

Resources:

As Digitaland points out, knowing the specs can save a lot of time when using Creative Tech in briefings and strategy meetings.

Here are a few of the main html5 standard ad specs:

Google GDN

adform

Sizmek

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.

If you have any questions,

please email: article@properbanners.com


RECENT ARTICLES