How to make banner ads faster (without making them worse)

The expensive part of a display campaign is almost never the first banner. It is the ninth. You have signed off the concept, the copy is approved, and then someone asks for a leaderboard, a skyscraper, a half page and a mobile banner — and the work starts again, because none of those is the square with the sides trimmed off.

Most of the time lost in banner production is spent re-solving a problem that was already solved, at a different aspect ratio. Here is where it actually goes, and what to do about it.

Decide the hardest size first

Teams instinctively design the 300×250 first, because it is comfortable and it looks like a poster. Then they meet the 728×90 leaderboard, discover there is no vertical room for a headline, a subline and a button, and rebuild the idea.

Start with the constraint instead. If your concept survives a leaderboard, it will survive everything else. The two sizes worth designing against before any other are the ones with no room in the direction your layout depends on:

• 728×90 — no vertical room. Your headline gets one line.
• 160×600 — no horizontal room. Long words break badly.
• 320×50 — the mobile banner, where only one message fits at all.

Write the copy before the layout

A banner has room for roughly six words of headline and a four-word button. Deciding those six words after the layout exists means the layout is already wrong — you end up shrinking type to fit a sentence that was never going to work at 300 pixels wide.

Write the headline, the subline and the call to action as plain text first. If they do not persuade anyone in a text editor, no amount of animation will fix them.

Animate once, and stop

Ad networks require animation to stop. Google Ads allows up to 30 seconds and a maximum of three loops, and the practical answer is shorter than you think: entrances inside the first two seconds, a single beat of movement afterwards, then hold the final frame.

That final frame matters more than the animation does. It is what a viewer sees for the remaining time they are on the page, and it is what a static fallback is generated from. If the last frame does not sell on its own, the banner does not work.

Respect the weight budget from the start

The initial load budget is 150 KB for most networks. That is not much once a photograph is involved, and discovering it at export time means going back through every size to recompress. Decide early whether the concept is photographic or typographic — a typographic banner is nearly free, and a photographic one needs its images sized for the largest placement and no larger.

One document, not nine files

The habit that costs the most time is treating each size as a separate file. Nine files means a copy change is nine edits, nine chances to introduce a typo, and nine re-exports. It also means the ninth banner is always the one nobody checked.

A single responsive document that lays itself out per aspect ratio removes that entirely. Fix the copy once and every size has it. This is how Bannerbloom works: one document, tagged layers, an animation timeline declared separately from the markup, and every IAB size rendered from the same source.

What this looks like in practice

The banner at the top of this post was generated from a single prompt describing a court-booking service, then adjusted by hand — the athlete nudged down a few pixels, the ball removed, the headline retimed. It is real HTML, CSS and a GSAP timeline, and it is the same file that would ship to a network, not a picture of one.

That is the useful test for any banner tool: ask whether what you are previewing is the artefact you will deliver, or a rendering of it. If it is a rendering, the work of turning it into something a network will accept is still ahead of you.

A short checklist

• Design the leaderboard and the skyscraper before the square.
• Write the six words before you open a layout.
• Entrances done inside two seconds; stop by five.
• Make the final frame work with no motion at all.
• Keep the initial load under 150 KB.
• Keep one source document, and let the sizes come from it.
• Check the smallest size last, on a phone, at arm’s length.