Was ist das beste Videoformat fürs Web?
| Format | Video-/Audio-Codec | Läuft in | Dateigröße | Einsatz |
|---|---|---|---|---|
| MP4 | H.264 / AAC | Jedem Browser und Gerät | Referenz | Standard und Fallback |
| WebM | VP9 / Opus | Allen aktuellen großen Browsern | Oft etwa 30 % kleiner | Primäre Quelle auf der eigenen Website |
| MP4 oder WebM | AV1 / Opus oder AAC | Chrome, Firefox, Edge; Safari mit AV1-Hardware | Am kleinsten | Websites mit viel Traffic, die doppelt kodieren können |
| MOV, AVI, MKV | Verschiedene | Nicht zuverlässig in Browsern | — | Vor dem Einbinden auf einer Website konvertieren |
Kurz gesagt: Kodieren Sie MP4 (H.264, AAC), damit das Video überall läuft, und fügen Sie zuerst eine WebM-Quelle (VP9) für Browser hinzu, die die kleinere Datei nutzen können. Für YouTube, Vimeo oder soziale Netzwerke genügt MP4.
Warum die Videogröße für Websites wichtig ist
Video ist eines der größten Assets auf den meisten Webseiten. Ein schlecht optimiertes Hero-Video oder ein Hintergrund-Clip kann Megabytes zum Seitengewicht hinzufügen und wirkt sich direkt aus auf:
- LCP (Largest Contentful Paint): Wenn das Video das größte Element ist, bestimmt seine Ladezeit diese Core-Web-Vital-Metrik
- Bandbreitenkosten: Das Ausliefern von 10-MB-MP4s an Millionen von Besuchern summiert sich schnell
- Mobile Erfahrung: Nutzer mit Mobilfunkverbindungen leiden am meisten unter großen Videodateien
- SEO-Ranking: Google nutzt Core Web Vitals als Ranking-Signal
WebM + VP9 vs MP4 + H.264 fürs Web
Bei identischer visueller Qualität (SSIM/VMAF abgeglichen) erzeugt WebM mit VP9-Codierung Dateien, die 30–50% kleiner sind als MP4 mit H.264. Für eine Website, die monatlich 100 GB MP4-Video ausliefert, könnte der Wechsel zu WebM 30–50 GB Bandbreite einsparen.
Anschauliches Beispiel für einen 30-sekündigen 1080p-Clip (die tatsächlichen Größen hängen vom Inhalt ab):
| Format | Codec | Dateigröße | Qualität |
|---|---|---|---|
| MP4 | H.264, CRF 23 | ~10 MB | Referenz |
| WebM | VP9, CRF 30 | ~6 MB | Ähnlich |
Browser-Unterstützung im Jahr 2026
WebM VP9 wird im Jahr 2026 von 97%+ der globalen Browser unterstützt:
- Chrome: seit Version 29 (2013)
- Firefox: seit Version 28 (2014)
- Edge: seit Version 14 (Chromium-basiert seit 79)
- Safari: aktuelle Versionen — der letzte große Nachzügler
Nur IE11 und sehr alte Safari-Versionen bieten keine Unterstützung und repräsentieren im Jahr 2026 einen vernachlässigbaren Marktanteil.
Das HTML5-Video-Fallback-Muster
Der empfohlene Ansatz besteht darin, WebM zuerst mit MP4 als Fallback über das HTML5-Element <source> auszuliefern:
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
Der Browser lädt und spielt die erste Quelle, die er unterstützt. Da 97%+ der Browser WebM unterstützen, erhält die überwiegende Mehrheit der Besucher die kleinere Datei. Der MP4-Fallback stellt sicher, dass die verbleibenden ~3% das Video trotzdem sehen.
Die Attribute autoplay loop muted playsinline lassen das Video sich wie ein GIF verhalten — automatische Wiedergabe, Schleife, stumm und inline auf mobilem Safari.
Auswirkung auf Core Web Vitals
Der Wechsel von MP4 zu WebM verbessert direkt die Web-Performance-Metriken:
- LCP-Verbesserung: Kleinere Dateien laden schneller und verbessern den Largest Contentful Paint
- Geringere Bandbreite: Bessere mobile Erfahrung, besonders bei langsamen Verbindungen
- Google-Empfehlung: Lighthouse und web.dev empfehlen explizit optimierte Videoformate
Unsere VP9-Codierungseinstellungen
Unser Konverter verwendet diese VP9-Einstellungen, optimiert für die Web-Auslieferung:
- CRF 30: in der visuellen Qualität ungefähr vergleichbar mit H.264 CRF 23
- cpu-used 3: ausgewogene Codierungsgeschwindigkeit für Online-Dienste
- row-mt 1: zeilenbasiertes Multithreading für schnellere Codierung
- Opus 128k Audio: hohe Audioqualität für die meisten Inhalte
- -b:v 0: rein qualitätsbasierte Codierung (ohne Bitrate-Obergrenze)
- yuv420p, gerade Abmessungen: 8-Bit-Farbe mit 4:2:0, die jeder VP9-Decoder abspielt; Breite und Höhe werden auf gerade Zahlen gerundet
Für eine tiefergehende VP9-Konfiguration siehe unseren VP9-Codierungseinstellungs-Leitfaden.
WebM-Alphakanal (Transparenz)
VP9 in WebM unterstützt Alphakanal-Transparenz — ein einzigartiger Vorteil gegenüber H.264/MP4. Dies ermöglicht transparente Video-Overlays auf Websites: animierte Logos, Charaktere, Effekte, die sich nahtlos in jeden Hintergrund einfügen. Verwenden Sie -pix_fmt yuva420p in FFmpeg, um mit Alpha zu codieren.
AV1: Der nächste Schritt
AV1 ist der offene Codec der nächsten Generation der Alliance for Open Media. Er komprimiert besser als VP9, codiert aber deutlich langsamer. Browser-Unterstützung: Chrome 70+, Firefox 67+ und Safari 17+ auf Geräten mit AV1-Hardware-Dekodierung. Für Sites mit starker Videonutzung ist AV1 die Zukunft — aber VP9 bleibt 2026 für die meisten Anwendungsfälle die praktische Wahl.
Videoformat vs. Codec: Was ist der Unterschied?
Ein Videoformat (Container) ist die Dateihülle: MP4, WebM, MOV, MKV. Ein Codec legt fest, wie Bild und Ton darin komprimiert sind: H.264, VP9, AV1, AAC, Opus.
Browser brauchen beides passend: Eine MP4-Datei mit H.264 läuft überall, eine MP4-Datei mit H.265 eventuell nicht. Wenn ein Leitfaden „MP4 verwenden“ empfiehlt, ist MP4 mit H.264-Video und AAC-Audio gemeint.