Ein bewegter Hintergrund im großen Bildbereich ganz oben auf der Startseite, im Webdesign „Hero“ genannt, macht Eindruck. Meist ist er ein Video, und ein Video kostet Ladezeit. Es gibt eine zweite Möglichkeit: Der Browser rechnet die Bewegung selbst. Ich habe das auf meiner eigenen Website umgestellt und gemessen, was es bringt.
Mein früheres Hero-Video hat mit Standbild 828 KB übertragen, ein live berechneter Hintergrund rund 11 KB, also etwa ein Fünfundsiebzigstel. Bei Bewegung ohne echte Aufnahmen gewinnt die Berechnung deutlich. Wenn Sie reale Menschen oder Orte zeigen, bleibt ein selbst gehostetes Video die richtige Wahl. Pflicht sind in beiden Fällen eine Pause-Möglichkeit und Rücksicht auf reduzierte Bewegung.
Das ist kein Film. Tippen Sie in die Wellen, oder wechseln Sie das Motiv unten im Bild:
Wie ein live berechneter Hintergrund funktioniert
Ein Video ist eine fertige Bildfolge, die der Browser herunterlädt und abspielt. Ein live berechneter Hintergrund überträgt stattdessen eine kurze Rechenvorschrift, und die Grafikkarte des Besuchers erzeugt daraus jedes Bild selbst. Die Technik dahinter heißt WebGL und steckt seit Jahren in allen gängigen Browsern. Daraus ergeben sich drei Unterschiede:
- Die Datei ist winzig, weil nur die Regel übertragen wird, nicht ihr Ergebnis.
- Es läuft nie gleich und nie zu Ende. Es gibt keine Schnittstelle, an der eine Schleife neu beginnt.
- Es kann reagieren, auf Maus, Finger oder die Tageszeit. Das Video kann das nicht.
Animierter Hintergrund gegen Hero-Video: die gemessenen Zahlen
Die Zahlen stammen von krassniggdigital.com, meiner Unternehmenswebsite, die ich im Oktober 2026 umgestellt habe. Übertragene Größe, gemessen komprimiert mit gzip, so wie der Server die Dateien schickt:
- Hero-Video mit Standbild: 774 KB Video im platzsparenden Format WebM und 54 KB Standbild, zusammen 828 KB
- Grundprogramm für den animierten Hintergrund und Gestaltungselemente, die alle Motive brauchen: 9,3 KB, und das nur beim ersten Seitenaufruf, danach kommt es aus dem Zwischenspeicher des Browsers
- Ein Motiv: je nach Aufwand 1,5 KB (Wellen) bis 10,9 KB (ein Globus mit Küstenlinien)
- Ein ganzes Logo aus Partikeln: 5,6 KB, davon das Logo selbst 0,5 KB
- Meine Startseite mit drei Motiven zur Auswahl: 18,2 KB
Googles Messwerkzeug PageSpeed Insights hat nach der Umstellung am 26. Oktober 2026 für die fünf geprüften Seiten eine Leistung von 98 bis 100 auf dem Handy und 100 am Computer gemeldet, jeweils mit zwei Durchläufen. Eine Vergleichsmessung derselben Seiten mit Video habe ich nicht, denn gleichzeitig ist die Website auch auf einen neuen Unterbau umgezogen. Eindeutig ist nur der Unterschied in der Datenmenge.
Was ein animierter Hintergrund den Besucher wirklich kostet
Der kleine Download ist nur die halbe Wahrheit, denn gerechnet wird beim Besucher. Für 60 Bilder pro Sekunde hat jedes Bild 16,7 Millisekunden Zeit, und was der Hintergrund davon braucht, fehlt dem Rest der Seite. Gemessen habe ich das auf einem Apple M1 in Chrome bei 1.440 × 900 Punkten auf einem Bildschirm mit doppelter Pixeldichte (Retina):
- Wellen: 2,8 bis 3,3 Millisekunden Grafikkarte pro Bild, gedeckelt auf 60 Bilder pro Sekunde
- Lorenz-Attraktor, eine Kurve aus der Chaostheorie: 1,2 Millisekunden
- Schwarzes Loch, das aufwendigste Motiv: 8,5 bis 9,6 Millisekunden bei reduzierter Auflösung, gedeckelt auf 30 Bilder
Auf einem iPhone SE von 2020 hat ein Logo aus Partikeln im Ruhezustand 29 von 30 Bildern pro Sekunde bei voller Auflösung geschafft. Den Akkuverbrauch habe ich nicht gemessen, und ein sparsamer Standbild-Hintergrund bleibt in diesem Punkt unschlagbar.
Deshalb gehören ein paar Regeln fest in die Technik. Auf meiner Website, und in dem Beispiel oben, gelten diese:
- Weggescrollt heißt angehalten. Wenn der Bereich nicht sichtbar oder der Browser-Tab im Hintergrund ist, rechnet nichts.
- Auflösung und Bildrate passen sich an. Wenn die Bilder zu langsam werden, sinkt die Auflösung. Auf Touch-Geräten sind höchstens 30 Bilder pro Sekunde erlaubt.
- Ohne WebGL bleibt ein Farbverlauf. Die Seite sieht dann schlicht aus und funktioniert genauso.
Animation auf der Website: Pause und reduzierte Bewegung
Bewegung ist für manche Menschen mehr als ein Stilmittel: Sie lenkt beim Lesen ab, und manchen Menschen wird davon körperlich übel. Zwei Dinge stehen deshalb außer Frage, das heißt, sie müssen sein:
Ein Pause-Knopf. Die Richtlinien für barrierefreies Web verlangen in WCAG 2.2, Kriterium 2.2.2 eine Möglichkeit zum Anhalten, wenn sich etwas automatisch länger als fünf Sekunden neben anderem Inhalt bewegt. Im Beispiel steht der Knopf neben den Motiven.
Die Einstellung für reduzierte Bewegung. Wer in den Bedienungshilfen von Windows, macOS, iOS oder Android „Bewegung reduzieren“ eingeschaltet hat, teilt das dem Browser mit. Im Beispiel gibt es dann nur ein Standbild, das sich erst auf Berührung ändert.
Ob und wann für Ihre Website das Barrierefreiheitsrecht greift, ist eine eigene Frage. Das Kriterium ist hier als Maßstab genannt, nicht als Aussage über Ihre Pflichten.
Wann ein Video trotzdem die bessere Wahl für den Hintergrund ist
Live-Berechnung ist nicht immer die richtige Antwort:
- Echte Aufnahmen lassen sich nicht berechnen. Ihr Team, Ihre Werkstatt, Ihre Räume: Dafür brauchen Sie ein Video, und dann lieber auf dem eigenen Server als über eine fremde Plattform.
- Der Text muss lesbar bleiben. Ein unruhiger Hintergrund schadet, ob berechnet oder gefilmt. Eine dunkle Fläche hinter der Schrift, wie im Beispiel, ist meist nötig.
- Das Motiv muss etwas sagen. Bewegung um der Bewegung willen trägt nichts zu Ihrer Botschaft bei. Auf meiner Seite für WordPress-Wartung schlägt deshalb ein Überwachungsmonitor, auf der für KI-Beratung lernt ein kleines Netz. Das Motiv erzählt, was die Seite anbietet.
- Auf kleinen Bildschirmen ist weniger oft mehr. Auf meinen Leistungsseiten läuft die Szene erst ab rund 1.300 Pixel Breite, auf dem Handy wird nicht einmal die Datei geladen. Auf einem schmalen Bildschirm stünde sie nur blass hinter dem Text.
Ein solcher Hintergrund braucht Programmierarbeit. Ohne Vorkenntnisse in WebGL würde ich ihn nicht selbst schreiben, auch wenn eine KI dabei kräftig mithilft: Performance und Barrierefreiheit prüft sie Ihnen nicht auf Ihrer Hardware. Wie eigener Code überhaupt in WordPress kommt, beschreibe ich in meinem Artikel eigenen Code in WordPress einbauen. Was Sie darüber hinaus für eine schnelle Website tun können, lesen Sie in meinem Beitrag Optimierung in WordPress, einfach erklärt. Weitere Effekte zum Ausprobieren finden Sie in der Website-Werkstatt.
