HTML5 creatives best practices

To keep HTML5 creatives light, you should find a good compromise between image quality and file size. Here are some points to consider:

• use image files with few colors; indexed png or gif files are much lighter than JPEG files
• do not use transparency if it is not needed
• never use heavy file formats such as raw or bmp
• choose the lowest quality and the maximum compression rate to get the best quality with minimal weight

To reduce loading times for end users, you should reduce the number of files downloaded simultaneously (parallel HTTP requests).

In case of images, using sprites are a good strategy:

• combine all the image files into a single, large image file
• make use of the coordinates (X and Y) of each image file
• choose a CSS technique supported by all common browsers
• use the CSS to point to the image files using their coordinates (X and Y)

In case of javascript, merge all your scripts in a single javascript file. This leads to a single HTTP request, rather than multiple requests for each script.

If the HTML5 creative is served in a secure context, the HTML5 creative must load libraries (javascript file, css file, etc.) and any other resources with https. Check all the URLs inside the HTML5 creative and make sure that libraries and resources are called with https. Otherwise, browsers will issue a security warning and ad delivery will fail.

In your HTML5 creative, you may need visual effects and use common libraries such as jQuery, jQueryUI, jQueryMobile, Adobe Edge, etc. We do not recommend referencing such libraries as external libraries, but rather embed the library codes directly (physically) in your HTML5 creative.

Follow these guidelines to get light and clean code:

• use efficient and compact javascript
• use CSS3 if possible
• in the CSS, use global class names instead of inline styles for each tag
• minify code whenever possible to reduce file length
• use a YUI based library to compress code (e. g. http://refresh-sf.com/)

Even though modern browsers all support the common web standards (CSS, Javascript, HTML5), they slightly differ in the way they execute code. Check if all your file formats are compatible with the target browsers - for instance using a site like CanIUse.
For mobile advertising, consider mobile-specific events (swipe, pinch-to-zoom, touch, etc.) and set up HTML mobile properties (e. g. pixel ratio and viewport settings).

Videos in HTML5 creatives can be integrated using the <video></video> tags. Please refer to the IAB's guidelines on HTML5 creatives here (page 18). You fill find information about:

• video controls
• browser support
• video events
• autoplay and audio settings
• delivery and file size

When using animations, a crucial point to consider is performance in order to avoid overwhelming the CPU. Please refer to the IAB's best practices here (page 18).