Was ist ein HTML5 Banner? Aufbau, Größen, Google-Ads-Regeln und Kosten
Ein HTML5 Banner ist eine Mini-Website in einer ZIP-Datei: der Standard für animierte Display-Werbung. Aufbau, Größen, Google-Ads-Regeln und Kosten im Überblick.
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 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.
Zur Einordnung: HTML5 Banner leben im Display-Netzwerk und im Programmatic-Einkauf. Meta und LinkedIn nehmen keine HTML5-ZIPs an. Dort lädst du Bilder oder Videos hoch, und die Plattform baut die Anzeige daraus selbst.
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, ganz ohne Video oder Bibliothek.
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 des Adservers durch.
Der HTML-Code: das Grundgerüst
Wer den Banner-HTML-Code zum ersten Mal sieht, erkennt eine ganz normale kleine Webseite:
<!doctype html>
<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script>var clickTag = "https://beispiel.de";</script>
<style>/* Layout + @keyframes-Animation */</style>
</head>
<body>
<a href="javascript:window.open(window.clickTag)">
<!-- Bild, Text, Button -->
</a>
</body>
</html>So sieht so ein Banner fertig aus. Das Motiv unten ist ein echtes 300 × 250: kein Bild, sondern HTML und CSS, animiert per Keyframes und über den clickTag verlinkt.
Zwei Zeilen sind Pflicht und banner-spezifisch: das ad.size-Meta (sagt dem Adserver die Größe) und die clickTag-Variable von oben. Der Rest ist gewöhnliches HTML und CSS. Alles zusammen wird als ZIP exportiert und auf der Werbeplattform hochgeladen.
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 statt acht Einzeldesigns. Die exakte Liste kommt vom Vermarkter oder aus dem Mediaplan.
Google-Ads-Anforderungen: Gewicht, Dateien, Konto
Für hochgeladene HTML5-Anzeigen nennt Google Ads klare Grenzen (Stand: August 2026): maximal 600 KB pro ZIP, höchstens 40 Dateien, erlaubt sind HTML, CSS, JS, GIF, PNG, JPG und SVG. Alles muss lokal in der ZIP liegen; externe Requests sind tabu, ausgenommen Google Fonts und wenige von Google selbst gehostete Bibliotheken.
Warum liest man dann überall „150 KB“? Weil 150 KB der Initial-Load-Richtwert der IAB-Guidelines sind und in den Spezifikationen vieler Vermarkter stehen; bei Google Ads gelten die 150 KB für statische und GIF-Bildanzeigen. Praktisch heißt das: Baue auf die Spec des strengsten Placements, das du buchst. Wer unter 150 KB bleibt, ist überall auf der sicheren Seite.
Eine Hürde, die kaum jemand auf dem Schirm hat: HTML5-Anzeigen hochladen darf nur, wessen Google-Ads-Konto älter als 90 Tage ist und über 9.000 US-Dollar Gesamtausgaben hat (oder wer AMPHTML nutzt bzw. freigeschaltet wurde). Kleinere Konten bleiben bei responsiven Displayanzeigen: Da baut Google die Anzeige aus deinen Bildern und Texten selbst.
Knapp wird das Gewicht trotzdem schnell. 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. Loops sind erlaubt, aber nur bis zu dieser Grenze; viele Vermarkter setzen in ihren Specs engere Werte. 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
transformundopacityanimieren, das rendert die Grafikkarte flüssig
Und: Liefere 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.
Die häufigsten Design-Fehler
Ein 300×250-Banner ist eine winzige Bühne, und ein Blick dauert unter einer Sekunde — dieselbe Blicklogik wie beim Leseverhalten in der Print-Werbung. Daran scheitern die meisten Banner:
- Zu viele Botschaften. Eine Aussage, ein CTA. Wer drei Argumente unterbringen will, bringt keins unter. Die Hook-Prinzipien sind dieselben wie bei Print-Anzeigen.
- Zu kleine Schrift. Was auf deinem Monitor lesbar wirkt, ist im 320×50-Banner auf dem Smartphone Deko.
- Endframe ohne Logo und CTA. Der letzte Frame ist der, den die meisten sehen. Wenn dort nur ein Stimmungsbild steht, war die Animation umsonst.
- Landingpage passt nicht zum Versprechen. Das Banner macht nur das Versprechen; einlösen muss es die Seite dahinter. Wenn die langsam lädt oder am Banner vorbeiredet, ist das Mediabudget verbrannt — dann liegt das Problem im Webdesign, nicht in der Anzeige.
Zwei ehrliche Einschränkungen noch: 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.
HTML5 Banner erstellen: Tool oder Handarbeit?
Für Standard-Banner brauchst du keinen Entwickler. Google Web Designer ist kostenlos und exportiert fertige ZIPs inklusive clickTag und ad.size-Meta. 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.
Was kostet ein HTML5 Banner?
Selbst gebaut kostet ein Banner nur Zeit, das Tool ist gratis. Beim Designer wird pro Set kalkuliert, und die Logik ist überall gleich: Das Master-Design (meist 300×250) kostet am meisten, die Größenadaptionen deutlich weniger, weil Design und Animation stehen. Ein Set aus 5 bis 8 Größen ist darum nicht fünf- bis achtmal so teuer wie ein Einzelbanner.
Preistreiber sind Animationsaufwand, die Zahl der Motive und Sprachversionen sowie Dynamik wie Produktfeeds. Lass dir einen Festpreis pro Set geben, nicht pro Stunde. Und ehrlich eingeordnet: Die Produktion ist fast immer der kleinste Posten der Kampagne. Das Mediabudget dahinter kostet ein Vielfaches, und genau deshalb lohnt es sich, am Banner nicht zu sparen: Es ist der billigste Hebel der ganzen Kampagne.
Häufige Fragen
Was ist ein clickTag?
Eine JavaScript-Variable, über die der Adserver die Ziel-URL ins Banner reicht. So steuert die Kampagne das Klick-Tracking zentral und kann das Ziel ändern, ohne das Banner neu zu bauen. Ohne korrekten clickTag fällt das Banner bei der Prüfung des Adservers durch.
Gilt für HTML5 Banner 150 KB oder 600 KB?
Beides, je nach Kontext: Google Ads erlaubt für hochgeladene HTML5-ZIPs bis zu 600 KB (Stand: August 2026); 150 KB gelten dort für Bildanzeigen. Die 150 KB sind zugleich der Initial-Load-Richtwert der IAB und stehen in vielen Vermarkter-Specs. Wer unter 150 KB bleibt, ist überall sicher.
Wie viele Bannergrößen brauche ich?
Für eine Standard-Kampagne meist 5 bis 8, exportiert aus einem Master-Design. Die fünf wichtigsten (300×250, 728×90, 160×600, 300×600, 320×50) decken den Großteil der Placements ab; die exakte Liste nennt dir der Vermarkter.
Kann ich HTML5 Banner bei Meta oder LinkedIn schalten?
Nein. Meta und LinkedIn nehmen keine HTML5-ZIPs an, dort lädst du Bilder oder Videos hoch und die Plattform rendert die Anzeige selbst. HTML5 Banner laufen im Display-Netzwerk und im Programmatic-Einkauf über Adserver.
Banner brauchst du auch?
Selbst bauen oder bauen lassen
Für den Standardfall gibt es hier ein kostenloses Tool: Texte und Bild rein, fertigen HTML5-Banner raus — mit ad.size und clickTag, in allen gängigen Formaten. Soll es nach deiner Marke aussehen statt nach Vorlage, gestalte ich dir die Banner von Hand.