Rich media developer's guide
Reduce HTML5 file size
A common complaint when switching from Flash to HTML5 is that HTML5 Creatives have large file sizes. The reason for this misconception is that Flash handles both creation and compression. In Flash, you create an authoring file (.FLA) and publish a final compressed file (.SWF).
Topics in this article:
Google Web Designer is a web application for HTML5 development that's integrated seamlessly with DoubleClick Studio and Asset Library. Google Web Designer's animation tools and components make it a friendly alternative for Flash users. In addition, Google Web Designer has built-in compression for images and code, Google web fonts support, SVG support, CSS animation support, and more. Get started with Google Web Designer
Before reducing file size, check out your current file size and review the following guidelines and terms.
Raw file size vs. compressed file size
To review your raw file size:
- In Studio, check your Total file size in the Manage files step of the DoubleClick Studio creative workflow.
- In Google Web Designer, click Publish > Publish locally to view Total Size (Raw) in the publish dialog.
Google Web Designer compresses creatives with the free software gzip. If you're not using Google Web Designer, you can download a free copy of gzip, compress them on your local workspace, and inspect the file size.
File size baseline
Enabler file size
The Enabler must be included in Studio creatives, but web browsers hold a cached copy, because the same script is loaded for every Studio creative. The size of the Enabler script is 25KB (compressed) and 75KB (raw).
See the IAB and DoubleClick guidelines for additional details:
Polite loading delays the loading of additional creative assets (like images and video) until the publisher's page is loaded. This is different than initial load, which refers to the size of the creative's .HTML file. Some publishers require polite loading, but it's a good idea to include it, even when it's not required. Learn how to set up polite load
Review your publisher's Rich Media HTML5 specs, which are typically different from their Rich Media Flash specs. Publishers may count file size based on the compressed gzip format, or they may prefer to count the raw file size. Individual publisher specs may differ from IAB specs depending on placement, ad type, etc. Some publishers may be more willing to compromise on build specs. Also take note of any limits for animation or video play time.
Before you attempt to reduce the size of an image, first consider whether an image is even necessary. Some image elements may be replaced with CSS styles. Below are suggestions and resources for reducing the number of images in your creative and for optimizing the images you need.Use CSS to create gradients or solid colors
GIF, JPG, and PNG images are pixel based (“raster”) and have larger sizes. SVGs are point-to-point based graphics (“vector”) and can greatly reduce file size.
Icon fonts are regular fonts that can be used just like standard fonts. They're often vector based, which reduces file size. If you use the same icons over and over, build your own icon font.
A sprite sheet is a single tiled image that is loaded once. With CSS, only individual tiles of the overall image are shown. Using a sprite sheet reduces the number of HTTP requests. The fewer HTTP requests, the faster your creative loads. It's still important to find the right compression for your sprite sheet.
If pixel based images are required, compress them as much as possible while preserving quality. You're probably familiar Photoshop’s Save For Web, but there are other online tools that offer advanced compression.
setInterval method for animations, and do not use the
setInterval method when hand coding.
requestAnimationFrame method, which is specifically made for animations.
Before uploading your CSS files to Studio, minify your CSS with a CSS Minifier.
Save time and code by deciding what browsers and devices your campaign will target. Don't add code for unsupported browsers or devices. This will also save you time during testing.Browser support resources
Browser and device support for DoubleClick Studio
Can I Use: Up to date browser support for JS and CSS properties
- Keep an uncompressed copy handy for future updates.
If you're using a font other than the standard web fonts, consider using Google Fonts, a large library of free fonts. In order to reduce file size, be sure to only request the characters you need from the font instead of the entire typeface.
However, it's also important to consider that only absolute URLs are cached by a browser. Although
http://fonts.googleapis.com/css?family=Philosopher&text=Hello will be the smallest size for a specific creative, it will still be seen as a separate request from
http://fonts.googleapis.com/css?family=Philosopher&subset=latin, which may already be cached in the browser history. Take advantage of caching whenever possible to make your creatives load faster.
Learn more about web fonts
Optimizing font requests with Google Web Fonts
Font subsetting for Typekit and self-hosted web fonts
Sarah is a DoubleClick Studio expert and author of this help page. Help her improve this article by leaving feedback below.