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.
Realer Vergleich am selben 30-sekündigen 1080p-Clip:
| Format | Codec | Dateigröße | Qualität (VMAF) |
|---|---|---|---|
| MP4 | H.264, CRF 23 | 10 MB | 94.2 |
| WebM | VP9, CRF 30 | 6 MB | 94.1 |
Browser-Unterstützung im Jahr 2026
WebM VP9 wird von 97%+ der globalen Browser im Jahr 2026 unterstützt:
- Chrome: seit Version 29 (2013)
- Firefox: seit Version 28 (2014)
- Edge: seit Version 14 (Chromium-basiert seit 79)
- Safari: seit Version 16.6 (2023) — 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: entspricht H.264 CRF 23 in visueller Qualität
- cpu-used 3: ausgewogene Codierungsgeschwindigkeit für Online-Dienste
- row-mt 1: zeilenbasiertes Multithreading für schnellere Codierung
- Opus 128k Audio: transparente Audioqualität, bei diesem Bitrate besser als AAC
- -b:v 0: rein qualitätsbasierte Codierung (ohne Bitrate-Obergrenze)
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 Open-Codec der nächsten Generation der Alliance for Open Media. Er bietet eine zusätzliche Kompressionsverbesserung von 30% gegenüber VP9, codiert aber 5–10x langsamer. Die Browser-Unterstützung wächst (Chrome 70+, Firefox 67+, Safari 17+). Für Sites mit starker Videonutzung ist AV1 die Zukunft — aber VP9 bleibt 2026 für die meisten Anwendungsfälle die praktische Wahl.