Animation guide

Animated banner ads: HTML5 vs GIF, loop rules, and file limits

Choose the right format, keep the message readable, and check the animation and file rules before an ad reaches the platform.

  • Updated October 2026
  • 6 min
  • Specs checked October 2026
Short answer

Use HTML5 when the idea needs controlled motion, sharper text or separate moving elements. Use GIF for a simple sequence only when the chosen platform accepts it and the finished file stays within its current limit.

How animated banners should work

An animated banner still has to communicate at a glance. Movement should guide the eye from the main message to the offer and then to the call to action. If every object moves at once, the viewer has no clear place to look.

Build the story as a short sequence. Start with the strongest point, add only the detail needed to understand it, and finish with a frame that makes sense when motion stops. Important text should remain on screen long enough to read. Small legal copy and essential conditions should not flash past as transitional frames.

  • Keep one clear visual priority in each frame.
  • Make the final frame useful after the animation ends.
  • Check the platform rule and exported file before upload.
Rendered example of an HTML5 advertising banner inside a browser window
HTML5 banner example illustrated by bannerty.com.

HTML5 vs animated GIF

HTML5 and GIF can show the same broad idea, but they package it differently. HTML5 combines code and assets in a compressed bundle. Individual elements can move independently, so text and shapes can remain clean while images animate. A GIF stores a sequence of image frames in one file. It is simpler, but extra frames, colours and image detail can make the file heavier or reduce visual quality when compressed.

CriterionHTML5Animated GIF
File sizeA compressed bundle of code, images and other assets. The whole bundle must meet the placement limit.A single image file containing every frame. More frames and detail usually require more data or stronger compression.
Quality and controlSupports separate elements, controlled timing and crisp text or vector shapes when built that way.Uses raster frames with a limited colour palette, so gradients and detailed imagery can lose quality.
Platform supportDepends on the platform, campaign type and account eligibility. The package must follow that platform's rules.Depends on whether the chosen placement accepts animated GIF uploads. Some placements may treat it as a static image or reject it.

Format characteristics and IAB animation limits checked in October 2026. Confirm the current file cap and accepted format in the advertising platform before export.

Loop rules and duration

The IAB animation limits are a maximum duration of 15 seconds and no more than 3 loops. Design to the stricter rule when a platform or publisher sets one. A loop count is not a reason to repeat every message. A short sequence that settles on the call to action is usually easier to follow than constant motion.

File limits are separate from duration. An ad can meet the time rule and still be rejected because its bundle or image is too large. Check the exported file, not just the working design. Remove unused assets, avoid oversized source images, and test the final archive or GIF against the selected placement.

Need a complete animated ad set?

The Set + HTML5 package covers a master design, animated HTML5 sizes and a backup image for each delivered HTML5 size.

See Set + HTML5

A practical production process

Animation is easiest to control after the static hierarchy works. Approving the message and master layout first also prevents the same copy or spacing problem from being repeated across every size.

  1. Approve the static storyDecide what the opening, supporting and final frames must say. Check the final frame without motion.
  2. Animate one masterSet the timing and movement on a representative size. Review readability, pace and the transition into the final frame.
  3. Adapt and inspect every sizeRecompose the idea for wide, square and tall placements. Export each file, check its weight and test the exact package that will be uploaded.

This guide does not replace the rules shown inside an advertising platform or publisher account. Accepted formats, file caps and HTML5 eligibility can vary by placement and can change. Check them before production and again before upload.

Questions

Is HTML5 always better than GIF?

No. HTML5 gives more control over movement and element quality, but it requires the correct package and platform support. A GIF can suit a simple frame sequence when the placement accepts it and the exported file meets the cap.

Can an animated banner loop forever?

Do not plan on endless movement. The IAB limits are 15 seconds and 3 loops maximum. A platform or publisher may impose a stricter rule.

What should remain on the final frame?

Keep the brand, the main message and the call to action visible. The frame should still explain the offer after the animation has stopped.