Was ist ein HTML5 Banner?

Was ist ein HTML5 Banner? Die kurze Antwort

Ein HTML5 Banner ist eine animierte Werbeanzeige, die mit HTML, CSS und JavaScript gebaut wird — den gleichen Technologien wie jede Website. Technisch ist es eine Mini-Website in einer ZIP-Datei: eine HTML-Datei, dazu Bilder, Styles und Skripte. Der Adserver spielt sie in einem iFrame auf der Publisher-Seite aus.

Seit Adobe Flash Ende 2020 abgeschaltet wurde, ist HTML5 der einzige Standard für animierte Display-Werbung. Gegenüber statischen Bannern (JPG, PNG) kann ein HTML5 Banner drei Dinge mehr: flüssig animieren, auf Interaktion reagieren und Inhalte dynamisch laden — etwa Preise aus einem Produktfeed. Ohne Plugin, direkt im Browser.

Wie ein HTML5 Banner technisch funktioniert

Drei Schichten, klar getrennt:

HTML — die Struktur

Definiert, was im Banner steckt: Text, Bildcontainer, der Button.

CSS — Design und Animation

Farben, Schrift, Layout. Die Animation läuft über @keyframes und Transitions — kein Video, keine Bibliothek nötig.

JavaScript — der clickTag

Der wichtigste Job von JavaScript im Banner ist unscheinbar: der clickTag. Das Banner verlinkt nicht fest auf eine URL, sondern auf eine Variable, die der Adserver beim Ausspielen mit dem Kampagnen-Link befüllt. So trackt die Kampagne Klicks zentral und kann das Ziel jederzeit ändern. Ein Banner ohne korrekten clickTag fällt bei der Prüfung durch.

Alles zusammen wird als ZIP exportiert und auf der Werbeplattform hochgeladen. Die rendert das Banner direkt im Browser des Nutzers.

Die wichtigsten Bannergrößen

Fünf Formate decken den Großteil der Placements ab:

• Medium Rectangle (300×250 px) — das meistgebuchte Format, Desktop und Mobile
• Leaderboard (728×90 px) — Header-Bereich auf Desktop
• Wide Skyscraper (160×600 px) — Seitenleisten
• Half Page (300×600 px) — viel Fläche, hohe Sichtbarkeit
• Mobile Banner (320×50 px) — Standard auf dem Smartphone

Für eine Kampagne exportierst du meist 5 bis 8 Größen — aus einem Master-Design, nicht als acht Einzeldesigns. Die exakte Liste kommt vom Vermarkter oder aus dem Mediaplan.

Die 150-KB-Grenze: das eigentliche Handwerk

Die härteste Grenze setzt Google Ads: maximal 150 KB pro ZIP, höchstens 40 Dateien, und alles muss lokal in der ZIP liegen — externe Requests sind nicht erlaubt (Stand: Juli 2026). Die IAB-Richtlinien nennen dieselben 150 KB als Initial Load; Plattformen mit „Polite Load“ dürfen nach dem Seitenaufbau Assets nachladen, Google Ads nicht — dort zählt jedes Byte von Anfang an.

150 KB klingen machbar, sind aber schnell weg. Ein eingebundener Webfont kann allein einen großen Teil des Budgets fressen. Deshalb aus der Praxis:

• Bilder als WebP, Logos und Grafiken als SVG
• Systemschriften nutzen oder den Webfont auf die benötigten Zeichen subsetten
• Animation in CSS statt als Videodatei oder GIF
• Das Gewichts-Budget vor dem Design verteilen, nicht hinterher komprimieren

Das ist dieselbe Disziplin wie bei schnellen Ladezeiten auf Websites — nur mit hartem Limit statt Richtwert.

Animation: Regeln und Praxis

Google Ads verlangt: Animation stoppt nach spätestens 30 Sekunden, danach steht ein statischer Frame. Viele Vermarkter setzen die Grenze enger, oft bei 15 Sekunden. Schnelles Blinken und Flackern ist generell tabu.

So baue ich Banner-Loops:

• Kurzer Loop von wenigen Sekunden, zwei bis drei Durchläufe
• Der letzte Frame steht — mit Logo, Botschaft und Call-to-Action
• Nur transform und opacity animieren, das rendert die Grafikkarte flüssig

Und: Liefer immer ein statisches Fallback-Bild mit, ein JPG oder PNG in Bannergröße. Viele Adserver verlangen es für Umfelder, die kein HTML5 rendern. Der Aufwand ist minimal — es ist ohnehin dein letzter Frame.

Wo HTML5 Banner an Grenzen stoßen

Ein 300×250-Banner ist eine winzige Bühne. Eine Botschaft, ein CTA — mehr passt nicht. Wer drei Argumente unterbringen will, bringt keins unter. Die Hook-Prinzipien sind dieselben wie bei Print-Anzeigen: erst Aufmerksamkeit, dann genau eine Aussage.

Dazu zwei ehrliche Einschränkungen: Ad Blocker verhindern auf vielen Desktops, dass das Banner überhaupt lädt. Und seit Third-Party-Cookies verschwinden, ist die Erfolgsmessung gröber geworden — plane Kampagnen nicht auf die zweite Nachkommastelle.

Die wichtigste Grenze steht aber hinter dem Klick: Das Banner macht nur das Versprechen. Einlösen muss es die Seite dahinter. Wenn die Landingpage langsam lädt oder am Banner-Versprechen vorbeiredet, ist das Mediabudget verbrannt — dann liegt das Problem im Webdesign, nicht in der Anzeige.

Brauchst du dafür einen Entwickler?

Für Standard-Banner: nein. Google Web Designer ist kostenlos und exportiert fertige ZIPs inklusive clickTag. Damit kommst du für die meisten Kampagnen ans Ziel.

Handarbeit lohnt sich, wenn es eng wird: dynamische Produktfeeds, besondere Animationsmechaniken oder ein Gewichts-Budget, das der Tool-Export nicht hält. Dann zahlt sich aus, dass ein HTML5 Banner eben doch nur eine kleine Website ist — alles, was im Web geht, geht auch hier. Nur in 150 KB.