Animierte Banner: Länge, Loops und ein starkes Schlussbild

Bewegung kann den Blick lenken, doch jede Plattform setzt ihr Grenzen: bei der Länge, bei den Wiederholungen und beim Gewicht. Dieser Ratgeber zeigt, welche Grenzen gelten, wie Sie Zyklus und Loops planen, was ins Schlussbild gehört und wann HTML5, GIF oder MP4 die richtige Wahl ist.

Die Grenzen: 15 oder 30 Sekunden

Die Plattformen begrenzen Loops also nach Zeit, nicht nach Anzahl. Und die Regel von drei Loops? In den Dokumenten des IAB Tech Lab steht keine Anzahl, nur die Grenze von 15 Sekunden.^[1] Die Regel „höchstens dreimal“ stammt aus den Vorgaben einzelner Publisher, etwa von Apple News, das animierte GIFs auf drei Durchläufe und 15 Sekunden begrenzt.^[7]

Läuft dasselbe Banner über mehrere Wege, richten Sie sich nach der strengsten Grenze. Mit 15 Sekunden erfüllen Sie alle oben genannten. Das IAB begrenzt außerdem die Rechenlast: Eine aktive Anzeige soll höchstens 30 % der CPU beanspruchen.^[1]

Zyklus mal Durchläufe

Ein Animationszyklus ist ein vollständiger Durchgang vom ersten Auftritt bis zum Ende des stehenden Schlussbilds. Die Rechnung ist einfach: Zykluslänge mal Anzahl der Durchläufe darf die Grenze nicht überschreiten.

• 5 Sekunden mal 3 Durchläufe ergeben 15 Sekunden, genau die Grenze des IAB.
• 4,5 Sekunden mal 3 ergeben 13,5 Sekunden und lassen etwas Luft.
• Ein Zyklus von 8 Sekunden passt nur einmal in 15 Sekunden.

Planen Sie so, dass schon der erste Durchlauf die ganze Botschaft zeigt. Ob jemand die Wiederholung sieht, wissen Sie nicht. Sizewright arbeitet mit Zyklen von etwa 5 Sekunden für ruhige und souveräne Bewegung und 4,5 Sekunden für energische, und mit ein bis drei Durchläufen innerhalb der Grenze des Formats: 15 Sekunden für Display, 30 für die anderen Kanäle.

Video auf Social-Plattformen

In Feeds, Stories und Reels läuft Bewegung als Video, und dort zählen Mindestlängen statt Loop-Regeln. LinkedIn nimmt Videos ab 3 Sekunden an und empfiehlt 15 bis 30,^[8] Pinterest verlangt mindestens 4 Sekunden und empfiehlt für Videoanzeigen 6 bis 15,^[9] und TikTok verlangt für reservierte In-Feed-Anzeigen 5 bis 60 Sekunden bei einer Empfehlung von 9 bis 15.^[10] Ein einzelner Banner-Zyklus von 4,5 Sekunden wäre für reservierte TikTok-Anzeigen also zu kurz. Sizewright liefert TikTok-Videos nie kürzer als 5 Sekunden und hält alle Social-Formate innerhalb von 30.

Das Schlussbild: vollständig und lange genug

Wenn die Animation endet, bleibt ihr letztes Bild stehen, solange die Anzeige zu sehen ist. Dieses Schlussbild ist deshalb das wichtigste Bild der ganzen Animation.

• Vollständig. Logo, Überschrift, Angebot und Button stehen alle da, wie in einem statischen Banner. Eine Animation, die mit einem leeren Hintergrund oder einem Zwischenstand endet, verschenkt die Fläche.
• Lange genug. Halten Sie das Schlussbild mindestens drei Sekunden, damit es gelesen werden kann, bevor ein weiterer Durchlauf beginnt. Sizewright hält es mindestens so lange.
• Deckungsgleich mit dem Ersatzbild. Wo ein Adserver statt der Animation das Ersatzbild zeigt, sollte es dieselbe Botschaft tragen.

300 × 250

728 × 90

Die Reihenfolge der Auftritte

Gute Animation folgt der Lesereihenfolge. Zuerst erscheint das Bild, dann die Überschrift, dann der Text, zuletzt der Button. Jedes Element kommt einzeln, mit kurzem Abstand zum vorigen, sodass das Auge der Bewegung folgen kann. Bewegt sich alles gleichzeitig, weiß das Auge nicht, wohin.

Ein einmaliges Pulsieren des Buttons am Ende lenkt den Blick dorthin, wo geklickt werden soll. Mehr braucht es nicht: Google lehnt stroboskopartiges Flackern und Blinken ab, und Adform untersagt Anzeigen, die wackeln oder mit 5 bis 30 Wechseln pro Sekunde flackern.^[3][6]

Sizewright bietet acht Auftritte: Einblenden, Aufsteigen, von links oder von rechts einschieben, Hineinzoomen, Aufdecken, langsamer Zoom und einmal pulsieren.

HTML5, GIF oder MP4

HTML5 bleibt bei jeder Pixeldichte scharf und animiert flüssig, braucht aber das Paket, das der jeweilige Adserver erwartet. Das GIF nehmen viele Plattformen an, auch Google Ads ohne HTML5-Freischaltung, es zahlt dafür aber mit weniger Farben und weniger Bildern pro Sekunde. Auf Social-Plattformen läuft Bewegung als Video; dort ist MP4 die passende Datei.

Dateigewicht im Blick

Jede Bewegung kostet Kilobyte. Google Ads erlaubt 150 KB für ein GIF und 600 KB für ein HTML5-ZIP, Adform 300 KB entpackt für ein Desktop-Banner.^[2][5][11] Das IAB rechnet pro Format und empfiehlt, die Animation in den Nachladevorgang zu legen, den Subload, statt in den ersten Ladevorgang.^[1]

Drei Hebel helfen beim HTML5-Banner:

1. CSS statt Skriptbibliothek. Eine Animation aus CSS-Keyframes braucht keine Bibliothek, die erst geladen werden muss.
2. Schriften reduzieren. Eine Schrift, die nur die Zeichen des Banners enthält, wiegt einen Bruchteil der vollen Datei.
3. Bilder schrittweise komprimieren. Senken Sie die Qualität in kleinen Schritten, bis das Paket passt, statt auf einmal zu viel.

Animierte Banner mit Sizewright

Sizewright animiert jedes Format eines Sets, ohne Aufpreis: je nach Plattform als HTML5 mit dem clickTag des jeweiligen Adservers, als GIF oder als MP4, dazu immer ein statisches Bild. Die HTML5-Animation besteht aus reinen CSS-Keyframes, Schriften werden auf die verwendeten Zeichen reduziert, und jeder Export wird vor dem Download auf Länge, Durchläufe und Bildrate geprüft. Im Editor passen Sie Auftritt, Verzögerung und Dauer jedes Elements an, ebenso Zykluslänge und Durchläufe. Mehr dazu unter Animierte HTML5-Banner; die Grenzen jeder Plattform stehen in den Werbemittel-Spezifikationen, etwa für Google Ads und Adform.