Webvideos optimal speichern

Formate und Codecs

Videos bestehen nicht nur aus Bild und Ton, sondern aus klar definierten technischen Grundlagen. Wer versteht, wie Formate und Codecs zusammenspielen, kann Qualität, Dateigröße und Kompatibilität gezielt beeinflussen.

Viele verwechseln Container/Format und Codec – beides ist aber entscheidend für Webvideos.

Container / Format

Der Container ist die „Hülle“ eines Videos. Er bestimmt, welche Arten von Audio, Video und Untertiteln enthalten sein können.

• MP4 (.mp4)
  Sehr weit verbreitet, unterstützt Video + Audio + Untertitel, Nutzung für Webseiten, Social Media und YouTube
• WebM (.webm)
  offener Container, speziell für Web optimiert, Nutzung in modernen Browsern und HTML5-Video
• OGG / OGV (.ogv)
  offener Container, weniger verbreitet, Nutzung für alte Webprojekte und alternative Browserr verbreitet    Alte Webprojekte, alternative Browser-Unterstützung

Codec

Der Codec beschreibt, wie die Videodaten komprimiert werden. Unterschiedliche Codecs können im gleichen Container existieren.
 

• H.264 / AVC
  hohe Kompatibilität und gute Qualität, aber größere Dateien, typische Container MP4 und MOV
• H.265 / HEVC
  sehr effiziente Kompression, aber lizenzpflichtig und nicht überall unterstützt, typische Container MP4 und MOV
• VP8 / VP9
  Open Source und modern, aber nicht auf allen Geräten unterstützt, typischer Container WebM
• AV1
  sehr effiziente Kompression und kleine Dateien, aber langsames Encoding und eingeschränkte Unterstützung, typische Container WebM und MP4 (experimentell)

FPS und Bitrate

Die Bildrate und die Bitrate bestimmen maßgeblich, wie flüssig und hochwertig ein Video wirkt. Kleine Anpassungen in diesen beiden Bereichen haben oft spürbare Auswirkungen auf die Wahrnehmung – und auf die Dateigröße.

Die Framerate (FPS) entscheidet, wie flüssig ein Video wirkt:

• 30 FPS - Standard fürs Web und Social Media
• 60 FPS - Für schnelle Bewegungen

Die Bitrate steuert die Datenmenge pro Sekunde Video. Höhere Bitrate = bessere Qualität, aber größere Datei.

• 1080p bei 30 FPS: 8-12 Mbit/s
• 1080p bei 60 FPS: 12-20 Mbit/s
• 4K bei 30 FPS: 25-35 Mbit/s
• 4K bei 60 FPS: 35-45 Mbit/s

Responsive Videos für Mobile, Tablet und Desktop

Moderne Websites sollten Videos so ausliefern, dass sie auf allen Geräten schnell laden und bestmöglich aussehen. Unterschiedliche Versionen für verschiedene Bildschirmgrößen machen den Unterschied.

HTML5 ermöglicht es, verschiedene Videoquellen je nach Gerät zu laden.
 

So funktioniert der Code oben im Detail:

• Der -Tag ist der Rahmen und enthält alle Quellen sowie das Fallback.
• Die -Elemente werden von oben nach unten geprüft. Der Browser nimmt die erste Quelle, deren media-Bedingung passt und deren type er versteht.
• Die beiden Zeilen mit media="(max-width: 767px)" liefern die Mobile-Version (erst WebM, dann MP4 als Fallback).
• Die Zeilen mit media="(max-width: 1024px)" sind für Tablets gedacht.
• Die letzten beiden -Elemente ohne media sind der Standard für größere Displays (Desktop).
• Der Text Dein Browser unterstützt HTML5-Videos nicht. wird nur angezeigt, wenn kein HTML5-Video abgespielt werden kann.

Wichtige Video-Attribute erklärt:

• autoplay – Startet das Video automatisch beim Laden der Seite (funktioniert nur mit muted).
• muted – Schaltet den Ton aus, notwendig für Autoplay.
• playsinline – Verhindert auf iOS, dass das Video im Vollbild gestartet wird.
• loop – Spielt das Video endlos ab (optional).
• controls – Zeigt Play/Pause und die Browser-Steuerung (optional).
• preload – Steuert, wie viel der Browser vorlädt (optional: none / metadata / auto).
• poster – Vorschaubild, das angezeigt wird, bevor das Video startet (optional).
•  – Lädt je nach Bildschirmgröße unterschiedliche Dateien.

Social Media & YouTube

Videos wirken auf Social Media und auf YouTube unterschiedlich gut, je nachdem, wie sie exportiert und hochgeladen werden. Jede Plattform bringt eigene Anforderungen und typische Qualitätsstufen mit.

Social Media

• Framerate: 30 FPS
• Bitrate: 8–20 Mbit/s
• Codec: H.264
• Immer vom Mastervideo exportieren (nie von Social-Downloads).

YouTube

• YouTube passt Auflösung, Codec und Bitrate automatisch an.
• Einbettung per iFrame

Mastervideo-Workflow – Qualität sichern

Ein sauberer Produktionsablauf sorgt dafür, dass Videos in jeder Variante gleichbleibend gut aussehen – vom Masterfile bis zu einzelnen Formaten für Web, Social oder mobile Geräte.

1. Mastervideo exportieren
   H.264 oder AV1, hohe Bitrate, 30–60 FPS
2. Geräte-Varianten erstellen
   Smartphone 480–720p, Tablet 720–1080p, Desktop 1080p–4K
3. Social Media-Versionen erstellen
   Plattformgerecht komprimieren
4. Nie von Social-Media-Downloads arbeiten
   Qualitätseinbußen vermeiden

Übersichtstabelle Geräte & Plattformen

Je nach Plattform unterscheiden sich empfohlene Auflösungen, Codecs und Bitraten erheblich. Die folgende Übersicht zeigt, welche Einstellungen sich für verschiedene Endgeräte und Einsatzzwecke bewährt haben.

• Mastervideo 
  4K / Original, 30–60 FPS, 25-45 Mbit/s, Codec H.264 / AV1, Basis für alle Varianten
• Desktop
  1080p-4K, 30-60 FPS, 8-35 Mbit/s, Codec H.264 / VP9, höchste Qualität
• Tablet
  720p-1080p, 30 FPS, 5-15 Mbit/s, Codec H.264, moderate Qualität
• Smartphone
  480p-720p, 30 FPS, 3-8 Mbit/s, Codec H.264, für mobiles Datenvolumen optimiert
• Instagram / TikTok / Facebook
  max. 1080p, 30 FPS, 8-20 Mbit/s, Codec H.264, Plattformkompression unvermeidlich
• YouTube (Embed)
  360p-4K automatisch, 30-60 FPS, Bitrate plattformabhängig, Codec H.264 / VP9, automatische Anpassung

Wenn Formate, Codecs und Export-Einstellungen bewusst gewählt werden, bleiben Webvideos flexibel einsetzbar – von der eigenen Website bis zu Social Media – ohne spürbare Kompromisse bei der Qualität.