Video-Codec (Web)
Ein Video-Codec ist ein Verfahren zur Komprimierung von Video für die Web-Auslieferung. H.264 dient als breiter Fallback, AV1 und das Container-Format WebM bringen moderne Komprimierung mit spürbar kleineren Dateien bei gleicher Bildqualität.
Die Codec-Wahl gehört auf dieselbe Konfigurations-Ebene wie Bildoptimierung und Lazy Loading. Einmal sauber eingerichtet wirkt sie auf jedes ausgelieferte Web-Video – ein zentraler Hebel für Core Web Vitals und Übertragungs-Volumen.
In einfachen Worten
Roh-Video-Material ist sehr groß – eine Minute in 4K kann mehrere hundert Megabyte umfassen. Codecs reduzieren dieses Volumen erheblich, indem sie nur die Veränderungen von Bild zu Bild speichern, nicht jedes Einzelbild vollständig. Im Web haben sich drei Standards etabliert: H.264 ist universell von allen Browsern unterstützt und dient als Fallback, H.265 komprimiert stärker, ist aber nicht in allen Browser-Konfigurationen verfügbar, und AV1 ist die modernste Generation mit deutlich kleineren Dateien bei gleicher Qualität und mittlerweile breiter Unterstützung in aktuellen Browsern. WebM ist kein Codec, sondern ein Container-Format, das in der Regel AV1 oder VP9 als Codec einsetzt. Eine produktive Konfiguration liefert mehrere Codecs an, der Browser wählt automatisch die für ihn passende Variante über die source-Elemente innerhalb des video-Elements.
Wozu brauche ich das?
Pflicht-Entscheidung bei jeder Web-Video-Ausspielung – Hero-Video, Erklärvideo, Hintergrund-Schleife, eingebettetes Vorschau-Video auf Produkt-Seiten. Wer ausschließlich H.264 ausspielt, liefert moderne Browser mit überdimensionierten Dateien aus; wer ausschließlich AV1 ausspielt, verliert Zuschauer mit älteren Geräten. Standard ist eine Mehr-Format-Auslieferung: AV1 oder WebM als bevorzugter Codec, H.264 als universeller Fallback, automatisch vom Browser ausgewählt.
Beispiel aus der Praxis
Eine typische Konstellation in der Hotellerie: Ein zwölf Sekunden langes Hero-Video wird in 1920 × 1080 Bildpunkten ausschließlich als H.264 ausgespielt und liegt bei rund vier Megabyte. Mobile Besucher mit eingeschränkter Mobilfunk-Verbindung warten mehrere Sekunden, bevor das Video startet – die Absprung-Rate steigt. Mit einer zusätzlichen AV1-Codierung (gleiche visuelle Qualität, deutlich kleinere Datei) und automatischer Browser-Auswahl über mehrere source-Elemente fällt die Warte-Zeit auf einen Bruchteil. Der Largest Contentful Paint bleibt im grünen Bereich, weil das Poster-Frame zuerst geladen wird und das Video erst danach im Hintergrund nachzieht. Eine ergänzende WebVTT-Untertitel-Spur sichert zusätzlich die Auto-Play-Muted-Kompatibilität auf mobilen Geräten.
Wirtschaftlicher Nutzen
Codec-Optimierung ist eine einmalige Konfigurations-Entscheidung in der Produktions- oder Encoding-Strecke mit nachhaltiger Wirkung. Sie wirkt auf drei Achsen: spürbar kleinere Datei-Größen (AV1 reduziert das Volumen gegenüber H.264 deutlich), schnellere Ladezeiten besonders im mobilen Segment und geringere Hosting- und Auslieferungs-Kosten bei traffic-abhängiger Abrechnung. Für video-lastige Websites – Hotellerie, Industrie, Produkt-Demonstrationen – ist es eine der wirkungsvollsten Performance-Investitionen, weil sie ohne Inhalts-Veränderung wirkt und mit jedem ausgelieferten Video skaliert. Im Verbund mit Bildoptimierung und Lazy Loading entsteht ein konsistentes Konfigurations-Bild, das die Core-Web-Vitals-Werte langfristig stützt.
Typische Fehler
- Nur einen einzigen Codec im source-Element ausgeliefert – moderne Browser bekommen keine kleinere Variante, ältere Geräte keine universelle Fallback-Datei.
- Bitrate zu hoch gewählt – über 6 Mbit/s für ein 1080p-Hintergrund-Video bringt keinen sichtbaren Qualitäts-Gewinn, kostet aber spürbar Ladezeit.
- Audio-Spur in stummen Hero-Videos belassen – überflüssige Datei-Größe, die nie abgespielt wird.
- Bei der AV1-Encodierung die langsamste Voreinstellung verwendet – stundenlange Encoding-Zeit für minimale Größen-Vorteile gegenüber der ausgewogenen Voreinstellung.
- Kein Poster-Frame im video-Element definiert – der sichtbare Bereich ist leer, bis der erste Frame geladen ist.
Worauf achten?
- Mindestens zwei Codecs parallel ausliefern: AV1 oder WebM bevorzugt, H.264 als universeller Fallback.
- Bitrate moderat halten: 1080p bei 4 bis 6 Mbit/s für Inhalts-Video, 2 bis 3 Mbit/s für stille Hintergrund-Schleifen.
- Audio-Spur entfernen, wenn das Video stumm ausgespielt wird.
- Poster-Frame definieren und als priorisiertes Bild ausliefern, damit der Largest Contentful Paint nicht leidet.
- Lazy Loading ausschließlich für Videos unterhalb des sichtbaren Bereichs aktivieren – nicht für Hero-Sequenzen.
Häufig gestellte Fragen
Was ist ein Video-Codec?
Ein Verfahren zur Komprimierung von Video, das Bild-Veränderungen statt vollständiger Einzelbilder speichert. Für die Web-Auslieferung relevant sind vor allem H.264 (universell unterstützt), H.265 (besser komprimiert, eingeschränkte Unterstützung) und AV1 (moderne Generation mit der stärksten Komprimierung).
Welcher Codec ist die beste Wahl?
Eine Mehr-Format-Konfiguration: AV1 oder WebM als bevorzugter Codec, H.264 als universeller Fallback. Der Browser wählt automatisch die für ihn passende Variante. So bekommen moderne Geräte kleinere Dateien, ältere Geräte trotzdem ein lauffähiges Video.
Welche Bitrate ist sinnvoll?
1080p mit 4 bis 6 Mbit/s für inhaltsstarke Videos, 2 bis 3 Mbit/s für stille Hintergrund-Schleifen. Höhere Bitraten bringen kaum sichtbaren Qualitäts-Gewinn, erhöhen aber spürbar die Datei-Größe und Lade-Zeit.
Was ist mit der Audio-Spur in stummen Videos?
Bei stumm ausgespielten Hero-Videos oder Hintergrund-Schleifen sollte die Audio-Spur entfernt werden. Sie wird ohnehin nie abgespielt und vergrößert die Datei unnötig. Auf vielen Encoding-Werkzeugen ist das eine einzelne Option, kein eigener Arbeits-Schritt.
Was unterscheidet WebM von AV1?
WebM ist ein Container-Format, AV1 ist ein Codec. WebM verwendet üblicherweise AV1 oder VP9 als Codec im Inneren. In der Praxis werden die Begriffe häufig synonym genutzt; technisch korrekt ist die Unterscheidung zwischen Container (Verpackung) und Codec (Komprimierungs-Verfahren).