HTML5 is a flexible language that has transformed the way ad units are built and delivered seamlessly on desktops, smartphones and tablets. While switching from Flash to HTML5, we often use online tools and end up with a big file sizes. This, leads to the misconception that HTML5 ads are heavier than flash.
Note: If built correctly, an HTML5 creative file size can be smaller than the Flash version.

What IAB says

The Interactive Advertising Bureau (IAB) defines a file size of 35KB (compressed) initial load for the creative and 100KB for total creative size. This can be achieved if designers follow best practices while building a creative. An HTML5 ad uses Javascript, CSS, giving opportunities to compress files and reduce the total file size.

Ways to Reduce HTML5 Creative File Size

1. Compress Wherever Possible

HTML5 provides several methods to compress files:

  • For Images using SVG (Scalable Vector Graphics) instead of GIF, JPG and PNG can greatly reduce Image file sizes.
  • CSS renders colour and gradients more efficiently than an image.
  • In case of Videos opt for mp4 which are compressed to the limit.
  • Use techniques like byte-serving to download partial content and optimize for auto-play video.
  • Use Code minifiers that eliminate unwanted spaces and characters from the code.
  • Use PNG crushers to compress images and videos.

2. Reduce Number of Files

  • Less files consume lesser bandwidth, which helps to load the creative faster.
  • Use sprite sheets for multiple display assets and animation, commonly used for parallel downloads.

3. Assets and Resources Delivery

  • Package assets to allow for maintaining a persistent connection.
  • All assets and files should be delivered using Gzip and use relative paths.
  • Minimise or compress where applicable to reduce the file load size.

4. Improve time-to-visual start and complete download

In order to provide the fastest time for a visual experience do the following:

  • Combine all supporting files (JS toolkits, libraries, HTML, and CSS) whenever possible.
  • Use well-distributed, cached libraries to provide supporting files instead of providing them with the ad.
  • Check device, bandwidth and tailor supporting files and other elements to the environment and experience.

Advantages of HTML5 Creative

  • Render ads like mini webpages and reduce development and operational costs.
  • Run an existing creative on different devices and screen sizes.
  • Works flawlessly on all browsers and mobile OS without relying on 3rd Party plug-ins.
  • Display content and ad units in an engaging manner to boost user interactions.
  • Deliver richmedia ads formats – expansion, wallpaper and transparency layers.

 

Click on the link to view the sample of an HTML5 file size before (4MB) and after (2MB) compression.

 

Contact ZEDO Technical Support team at support@zedo.com  with Queries and Suggestions

 

 

0 0