Poster-Frame
Der Poster-Frame ist das Standbild, das ein Browser anstelle eines Videos anzeigt, solange die Videodatei nicht geladen oder gestartet ist. Er füllt die Videofläche vom ersten Moment an und bestimmt bei prominent platzierten Videos den Largest Contentful Paint mit.
Der Poster-Frame gehört zur gleichen Auslieferungs-Ebene wie Bildoptimierung, Lazy Loading und die Codec-Wahl — er entscheidet darüber, ob ein Video die Ladezeit-Werte einer Seite stützt oder beschädigt.
In einfachen Worten
Videodateien sind die größten Objekte einer Website und brauchen auch bei guter Komprimierung spürbar länger als Bilder. Ohne Poster-Frame zeigt die Seite an der Videostelle eine leere Fläche, bis genug Daten geladen sind — ausgerechnet an der Position, die den stärksten Eindruck machen soll. Das Poster wird über das Attribut poster im video-Element hinterlegt und wie ein normales, optimiertes Bild ausgeliefert: sofort sichtbar, klein in der Dateigröße, priorisiert im Ladevorgang. Bei Hero-Videos übernimmt es die Rolle des Largest-Contentful-Paint-Elements; das Video selbst lädt danach im Hintergrund nach. Als Motiv eignet sich ein aussagekräftiges Bild aus dem Video — kein zufälliger erster Frame, der häufig unscharf, halb geschnitten oder schwarz ist.
Wozu brauche ich das?
Ein Poster-Frame gehört zu jedem Video auf einer Unternehmens-Website: zum Hero-Video im Startbereich, zum Imagefilm auf der Über-uns-Seite, zum Erklärvideo auf Leistungsseiten und zu eingebetteten Referenz-Videos. Bei bewusst zu startenden Videos ist er zugleich die Einladung zum Klick — ein starkes Poster-Motiv mit erkennbarem Inhalt erhöht die Startquote gegenüber einer grauen Fläche mit Abspielsymbol.
Beispiel aus der Praxis
Eine typische Konstellation im Handwerk: Ein Betrieb bindet ein Referenz-Video auf der Leistungsseite ein, ohne Poster zu definieren. Auf mobilen Verbindungen bleibt die Videofläche mehrere Augenblicke leer, der Largest Contentful Paint verschiebt sich nach hinten, und die Tempo-Werte der Seite verschlechtern sich messbar. Mit einem definierten Poster — ein Bild des fertigen Projekts, web-optimiert ausgeliefert — ist die Fläche sofort gefüllt, das Video lädt erst beim Start des Betrachters nach, und die Kennzahlen kehren in den grünen Bereich zurück. Der sichtbare Unterschied für Besucher: Die Seite wirkt vom ersten Moment an fertig.
Wirtschaftlicher Nutzen
Der Poster-Frame ist die günstigste Einzelmaßnahme der Video-Einbindung: ein zusätzliches Bild pro Video, einmalig definiert. Sein Hebel ist doppelt — er schützt die Ladezeit-Kennzahlen, die in die Bewertung durch Suchmaschinen einfließen, und er verbessert den ersten Eindruck genau an den Stellen, an denen ein Video platziert wurde, um Eindruck zu machen. Fehlt er, entwertet die leere Ladefläche einen Teil der Investition in die Videoproduktion.
Typische Fehler
- Kein Poster definiert — die Videofläche ist beim Seitenaufbau leer oder schwarz, und der Largest Contentful Paint verschiebt sich nach hinten.
- Der zufällige erste Frame des Videos wird als Poster verwendet — häufig ein Übergangsbild, unscharf oder ohne Aussage.
- Das Poster wird in Originalauflösung der Videoproduktion eingebunden statt als web-optimiertes Bild — der Ladezeit-Vorteil geht verloren.
- Poster und Videoinhalt passen nicht zusammen — der erste sichtbare Frame nach dem Start bricht optisch mit dem Standbild.
- Bei bewusst zu startenden Videos fehlt ein erkennbares Abspielsymbol auf dem Poster — Besucher erkennen nicht, dass sich hinter dem Bild ein Video verbirgt.
Worauf achten?
- Für jedes Video ein Poster definieren — auch für Videos unterhalb des sichtbaren Bereichs.
- Ein aussagekräftiges Motiv aus dem Video wählen, das als eigenständiges Bild funktioniert.
- Das Poster wie jedes Website-Bild optimieren: passende Auflösung, modernes Bildformat, komprimiert.
- Bei Hero-Videos das Poster priorisiert ausliefern, damit es den Largest Contentful Paint trägt, bevor das Video nachlädt.
- Auf mobilen Geräten prüfen, ob statt des Videos nur das Poster ausgeliefert wird — das spart Datenvolumen und schützt die Ladezeit.
Häufig gestellte Fragen
Was ist ein Poster-Frame?
Das Standbild, das ein Browser anstelle eines Videos anzeigt, solange die Videodatei nicht geladen oder gestartet ist. Es wird über das Attribut poster im video-Element hinterlegt und wie ein normales Bild ausgeliefert.
Warum ist der Poster-Frame wichtig für die Ladezeit?
Videodateien laden deutlich langsamer als Bilder. Ohne Poster bleibt die Videofläche beim Seitenaufbau leer, und bei prominent platzierten Videos verschiebt sich der Largest Contentful Paint nach hinten. Ein optimiertes Poster füllt die Fläche sofort und trägt die Tempo-Kennzahl, während das Video im Hintergrund nachlädt.
Welches Motiv eignet sich als Poster?
Ein aussagekräftiges Bild aus dem Video, das als eigenständiges Standbild funktioniert — ein erkennbares Motiv mit klarem Bezug zum Inhalt. Der zufällige erste Frame ist selten geeignet, weil er oft ein Übergangsbild ohne Aussage ist. Bei klick-zu-startenden Videos gehört ein erkennbares Abspielsymbol dazu.
Braucht auch ein automatisch startendes Hero-Video ein Poster?
Ja, gerade dort. Das Poster überbrückt die Ladephase des Videos, verhindert eine leere Fläche im wichtigsten Seitenbereich und dient auf mobilen Geräten als vollwertiger Ersatz, wenn das Video zugunsten des Datenvolumens gar nicht geladen wird.