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.

Codec

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

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.

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.

<video autoplay muted playsinline>

  <!-- Mobile -->
  <source src="video-mobile.webm" type="video/webm" media="(max-width: 767px)">
  <source src="video-mobile.mp4" type="video/mp4" media="(max-width: 767px)">

  <!-- Tablet -->
  <source src="video-tablet.webm" type="video/webm" media="(max-width: 1024px)">
  <source src="video-tablet.mp4" type="video/mp4" media="(max-width: 1024px)">

  <!-- Desktop -->
  <source src="video-desktop.webm" type="video/webm">
  <source src="video-desktop.mp4" type="video/mp4">

  Dein Browser unterstützt HTML5-Videos nicht.
</video>

So funktioniert der Code oben im Detail:

• Der <video>-Tag ist der Rahmen und enthält alle Quellen sowie das Fallback.
• Die <source>-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 <source>-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.

• 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).
• <source media="(...)"> – 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
  
  

<iframe
  src="https://www.youtube.com/embed/VIDEOID"
  loading="lazy"
  allowfullscreen
></iframe>

Auch für Mobile, Tablet und Desktop getrennt möglich:

<iframe src="https://www.youtube.com/embed/mobileID" media="(max-width: 767px)" loading="lazy"></iframe>
<iframe src="https://www.youtube.com/embed/tabletID" media="(max-width: 1024px)" loading="lazy"></iframe>
<iframe src="https://www.youtube.com/embed/desktopID" loading="lazy"></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.

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.