Wie man Web-Video-Dateien mit dem AV1-Codec kleiner macht (2025)

• Mit dem neuesten AV1-Videoformat lässt sich die Dateigröße von Videos im Web um das 20- bis 40-Fache reduzieren
• YouTube und Netflix haben AV1 als Videocodec der nächsten Generation eingeführt, und große Browser wie Chrome, Safari und Firefox unterstützen ihn
• Dieser Leitfaden erklärt Strategien zur AV1-Codec-Kodierung und Methoden zur Optimierung

Überblick über Codecs und Container

• Formate für statische Bilder: WebP, JPEG und PNG werden von den meisten Browsern unterstützt. In modernen Browsern kann AVIF verwendet werden
• Struktur von Videodateien:
  • Video-Codec: Bestimmt die Videokompressionsstrategie, z. B. H.264, HEVC, VP9 oder AV1
  • Audio-Codec: Bestimmt die Audiokompressionsstrategie, z. B. MP3, Opus oder AAC
  • Container: MP4, MOV, WebM usw.; speichert Video- und Audiostreams, Untertitel und Metadaten

Einführung in den AV1-Codec

• Der AV1-Codec wurde erstmals im März 2018 veröffentlicht
• Kann im Vergleich zu HEVC/VP9 sowie H.264/VP8 Dateien erzeugen, die um bis zu 30–50 % kleiner sind
• Vorteile:
  • Auch bei niedriger Bitrate ist eine hohe Bildqualität möglich
  • Kaum sichtbarer Qualitätsverlust durch die Kompression
• Nachteile:
  • Langsame Kodierungsgeschwindigkeit
  • Nur auf neueren Geräten unterstützt (iPhone 15+, MacBook M3 usw.)
  • Für die Kompatibilität müssen sowohl AV1- als auch H.264-Versionen bereitgestellt werden

Wie man AV1 derzeit nutzt

• Auswahl von Container und Codecs
  • Container: MP4 ist am beliebtesten und wird empfohlen
  • Audio-Codec: Opus wird empfohlen (effizient und kostenlos)
• Dateien für maximale Kompatibilität vorbereiten
  • Für Desktop- und moderne mobile Browser (Chrome, Safari, Firefox, Edge usw.)
    • MP4-Container + AV1-Video-Codec + Opus-Audio-Codec
    • Nutzerabdeckung: etwa 74 % (Stand September 2023)
  • Für ältere Safari- und macOS-Versionen
    • MP4-Container + H.264-Video-Codec + AAC-Audio-Codec
    • Nutzerabdeckung: etwa 19 %
  • Zur erweiterten Unterstützung älterer iPhones und Macs (optional)
    • MP4-Container + HEVC-Video-Codec + AAC-Audio-Codec

So erstellt man AV1-Videodateien

1. FFmpeg installieren

• Mac: brew install ffmpeg
• Linux: FFmpeg über die jeweilige Distribution installieren
• Windows: Siehe Installationsanleitung

2. H.264-Datei erstellen (für die Unterstützung älterer Geräte)

• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.h264.mp4

3. AV1-Datei erstellen (für die Unterstützung neuerer Geräte)

• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a libopus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.av1.mp4
• Durch Anpassen des crf- oder qp-Werts lässt sich das Verhältnis zwischen Qualität und Dateigröße steuern

4. HEVC-Datei erstellen (falls erforderlich)

• HEVC-Kodierung zur Unterstützung älterer iPhones und Macs
• ffmpeg -i SOURCE.mov -map_metadata -1 -c:a aac -c:v libx265 -crf 24 -preset veryslow -pix_fmt yuv420p -movflags +faststart -tag:v hvc1 -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" video.hevc.mp4

Erklärung wichtiger FFmpeg-Optionen

• -i SOURCE.mov: Legt die Eingabedatei fest
• -map_metadata -1: Entfernt unnötige Metadaten
• -c:a libopus: Wählt den Audio-Codec (Opus)
• -c:v libsvtav1: Wählt den Video-Codec (AV1)
• -crf 34, -qp 30: Passt Bildqualität und Dateigröße an (je niedriger, desto höher die Qualität und desto größer die Datei)
• -preset veryslow: Stellt die Kodierungsgeschwindigkeit für die Erzeugung hochwertiger Dateien ein
• -pix_fmt yuv420p: Reduziert Farbdaten, um die Dateigröße zu verringern
• -movflags +faststart: Verkürzt die Startzeit beim Streaming
• -tile-columns 2 -tile-rows 2: Erhöht die Kodierungsgeschwindigkeit

Browser-Kompatibilität einrichten

• AV1 in modernen Browsern verwenden und in älteren Browsern auf H.264 zurückfallen

  <video controls width="600" height="400">  
    <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus">  
    <source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2">  
  </video>  
  

• Bei Unterstützung älterer iPhones und Macs kann zusätzlich eine HEVC-Datei eingebunden werden

  <source src="video.hevc.mp4" type="video/mp4; codecs=hvc1">  
  

GIF in AV1 oder H.264 umwandeln

• GIFs sind im Vergleich zu H.264 und AV1 20- bis 40-mal größer und verbrauchen zudem viel CPU und Strom → Umwandlung empfohlen
• GIF → H.264-Konvertierung
  • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:v libx264 -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.h264.mp4
• GIF → AV1-Konvertierung
  • ffmpeg -i IMAGE.gif -map_metadata -1 -an -c:a opus -c:v libsvtav1 -qp 30 -tile-columns 2 -tile-rows 2 -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" animation.av1.mp4
• Beispiel zum Ersetzen von GIFs in HTML

  <video autoplay loop muted playsinline width="600" height="400">  
    <source src="animation.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">  
    <source src="animation.h264.mp4" type="video/mp4">  
  </video>  
  

[laeyoung]

Auf Landingpages werden häufig Videos verwendet; es wäre einen Versuch wert. Ob es gut funktioniert oder ob es Ausnahmefälle gibt, wegen derer man es nicht nutzen kann.