Muss ich sowohl MP4 als auch WEBM erzeugen?

Wenn Sie es auf Ihrer eigenen Website einsetzen: ja, denn beide gemeinsam bereitzustellen bringt zugleich Effizienz und Kompatibilität. Moderne Browser nehmen das kleinere WEBM, ältere fallen auf MP4 zurück. Müssen Sie sich für eine einzige Datei entscheiden, ist MP4 die sicherere Wahl – es funktioniert überall. Der Vorteil von WEBM liegt allein in der Dateigröße und beträgt meist 20–30 %.

Was passiert, wenn ich mein transparentes GIF in ein Video umwandle?

Die Transparenz geht verloren. Gängige Videocodecs führen keinen Alphakanal, und transparente Pixel werden in der Regel mit Schwarz oder Weiß gefüllt. Muss die Transparenz erhalten bleiben, wählen Sie statt eines Videos animiertes WEBP oder APNG; beide unterstützen 8-Bit-Alpha und liefern ein besseres Ergebnis als die binäre Transparenz von GIF.

Ist animiertes WEBP genauso klein wie ein Video?

Nein, es ist meist zwei- bis dreimal größer. Dafür ist es etwa ein Drittel so groß wie ein GIF und bewahrt die Transparenz. Die Reihenfolge lautet also: Video am kleinsten, WEBP in der Mitte, APNG größer, GIF am größten. Ist keine Transparenz nötig, ist ein Video stets effizienter.

Soll ich meine GIF-Dateien nach der Umwandlung löschen?

Löschen Sie sie nicht sofort. Bewahren Sie sie eine Weile auf, denn manche Umgebungen können nach wie vor GIF verlangen – E-Mail-Newsletter, alte Forenbeiträge, einige Content-Management-Systeme. Zudem müssen Sie auf die Quelle zurückgreifen können, falls Ihnen ein Problem bei der Umwandlung auffällt. Haben Sie eine seitenweite Massenumwandlung vorgenommen, können Sie die Dateien nach einigen störungsfreien Wochen archivieren.

GIF in MP4 oder in WEBM umwandeln? Ein Vergleich der Zielformate

Sie haben sich entschieden, Ihr GIF umzuwandeln. Nun stellt sich die Frage nach dem Ziel: MP4, WEBM, animiertes WEBP oder APNG? Alle vier sind kleiner als GIF, und alle vier gehen unterschiedliche Kompromisse ein. In diesem Beitrag sehen wir uns an, welches Format wann das richtige ist.

Die vier Zielformate in Kürze

MP4 (H.264): Das verbreitetste Videoformat. Universelle Unterstützung.

WEBM (VP9): Ein offenes Videoformat. Bei gleicher Qualität kleiner als MP4, wird von modernen Browsern unterstützt.

Animiertes WEBP: Verhält sich wie ein Bildformat (Verwendung im <img>-Element), unterstützt volle Farbe und Alphatransparenz.

APNG: Die animierte Variante von PNG. Volle Farbe, 8-Bit-Alpha, verhält sich wie ein Bild.

Vergleichstabelle

Für ein GIF mit 5 Sekunden, 480 × 270 und 15 fps grob geschätzt:

| Kriterium | GIF (Quelle) | MP4 | WEBM | WEBP anim. | APNG | |---|---|---|---|---|---| | Typische Größe | 4 MB | 400 KB | 300 KB | 1,2 MB | 2,5 MB | | Alphatransparenz | Binär | Keine | Keine | 8 Bit | 8 Bit | | HTML-Element | <img> | <video> | <video> | <img> | <img> | | Automatische Wiedergabe | Von Haus aus | Attribut | Attribut | Von Haus aus | Von Haus aus | | Browserunterstützung | Universell | Universell | Modern | Modern | Modern | | E-Mail-Unterstützung | Gut | Keine | Keine | Keine | Schwach | | Volle Chroma-Auflösung | Ja | Nein (4:2:0) | Nein (4:2:0) | Ja | Ja |

Die letzte Zeile ist wichtig: Videoformate speichern die Farbinformation in halber Auflösung (4:2:0-Chroma-Unterabtastung), was an scharfen Farbkanten eine leichte Unschärfe erzeugt. WEBP und APNG tun das nicht.

Szenario 1: Produktanimation auf der Website

Sie wird auf der Seite automatisch abgespielt, Transparenz ist nicht nötig.

Sieger: WEBM und MP4 gemeinsam.

<video autoplay muted loop playsinline poster="vorschau.jpg">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

Moderne Browser nehmen das kleinere WEBM, ältere fallen auf MP4 zurück. Zwei Dateien zu erzeugen ist ein geringer Mehraufwand, bringt aber sowohl Effizienz als auch Kompatibilität.

Müssen Sie sich für eine einzige Datei entscheiden, nehmen Sie MP4; der Vorteil von WEBM liegt bei 20–30 % Größenunterschied, und dafür lohnt es sich womöglich nicht, ein Kompatibilitätsrisiko einzugehen.

Szenario 2: Logoanimation mit transparentem Hintergrund

Der dahinterliegende Seiteninhalt soll sichtbar bleiben.

Sieger: animiertes WEBP.

Videoformate unterstützen Alphatransparenz in der Praxis nicht. In diesem Szenario scheiden MP4 und WEBM vollständig aus.

WEBP gegen APNG:

| Aspekt | WEBP anim. | APNG | |---|---|---| | Dateigröße | Kleiner | 2–3-mal größer | | Browserunterstützung | Moderne Browser | Etwas breiter | | Verlustbehaftete Option | Ja | Nein (immer verlustfrei) |

WEBP ist meist die bessere Wahl, weil es dank seines verlustbehafteten Modus deutlich kleinere Dateien erzeugt und die Unterstützung in modernen Browsern ausreicht.

APNG bevorzugen Sie dann, wenn verlustfreie Qualität zwingend nötig ist (etwa bei einer pixelgenauen Oberflächenanimation) und die Dateigröße zweitrangig bleibt.

Beide sind der binären Transparenz von GIF weit überlegen – mit 256 Transparenzstufen liefern sie weiche Kanten, die ausgefransten Ränder von GIF entfallen.

Szenario 3: Animation einer Bildschirmaufnahme (Oberflächenvorführung)

Eine Aufnahme, die die Bedienung einer Software zeigt und Text enthält.

Sieger: WEBM oder animiertes WEBP – achten Sie auf das Chroma-Problem.

In diesem Szenario kann die Chroma-Unterabtastung ein echtes Problem sein. Videocodecs speichern die Farbinformation in halber Auflösung, und das erzeugt an scharfen farbigen Textkanten Unschärfe. Oberflächentexte in kleiner Schrift können unlesbar werden.

Es gibt zwei Lösungen:

1. Verwenden Sie eine hohe Auflösung. Ist der Text in ausreichend vielen Pixeln dargestellt, fällt die Chroma-Weichzeichnung nicht auf. Behalten Sie die Bildschirmaufnahme in ihrer ursprünglichen Auflösung.

2. Verwenden Sie WEBP. WEBP bietet volle Farbauflösung und wendet keine Chroma-Unterabtastung an. Der Text bleibt scharf. Die Datei wird größer als ein Video, doch wenn die Lesbarkeit entscheidend ist, lohnt sich das.

Manche Videoencoder unterstützen das Profil 4:4:4 (volle Chroma-Auflösung). Nutzen Sie es, wenn verfügbar, prüfen Sie aber die Browserunterstützung.

Szenario 4: E-Mail-Newsletter

Sieger: GIF – wandeln Sie nicht um.

So gut wie kein E-Mail-Programm spielt Videos ab. Auch die Unterstützung für WEBP und APNG ist schwach.

Belassen Sie das GIF, wie es ist, optimieren Sie aber seine Größe: Dauer verkürzen (2–3 Sekunden), Auflösung senken (300–400 px), Bildrate reduzieren (10 fps) und bei Bedarf die Farbanzahl auf 128 verringern.

Und ein wichtiger Hinweis: Manche E-Mail-Programme (insbesondere einige Outlook-Versionen) zeigen nur das erste Einzelbild des GIFs. Gestalten Sie das erste Bild so, dass es für sich allein aussagekräftig ist.

Szenario 5: Schritt-für-Schritt-Vorführung in einem Blogbeitrag

Eine kurze Animation, die zeigt, wie ein Vorgang abläuft.

Sieger: MP4-/WEBM-Video – aber denken Sie an die Nutzerkontrolle.

In diesem Szenario steht eine Entscheidung zur Nutzererfahrung an. Eine automatisch abgespielte Animation kann ablenken, während der Nutzer noch den Text liest, und ihr ständiges Wiederholen kann störend wirken.

Alternative: Geben Sie dem Nutzer mit dem Attribut controls die Wiedergabekontrolle und verzichten Sie auf autoplay. Er startet die Animation, wenn er bereit ist, kann pausieren und zurückspulen.

Bei langen oder informationsreichen Animationen ist das meist die bessere Wahl. Bei kurzen, dekorativen Animationen ist die automatische Wiedergabe angemessen.

Szenario 6: Optimierung einer ganzen Website

Auf Ihrer Website liegen Dutzende GIFs, die Sie alle umwandeln wollen.

Sieger: WEBM plus MP4, mit systematischem Vorgehen.

Die Reihenfolge:

1. Bestandsaufnahme. Welche GIFs liegen wo, und wie groß sind sie? Beginnen Sie bei den größten Dateien; der Gewinn ist proportional.

2. Trennen Sie die transparenzbedürftigen Dateien ab. Diese gehören zu WEBP, nicht zu Video.

3. Erzeugen Sie für Videoziele ein Paar. WEBM plus MP4.

4. Aktualisieren Sie das HTML. Wandeln Sie <img src="x.gif"> in <video>-Blöcke um. Fügen Sie das Attribut poster hinzu.

5. Messen Sie. Vergleichen Sie mit Werkzeugen zur Seitengeschwindigkeit den Zustand vorher und nachher. Der Unterschied zeigt sich meist sofort.

6. Löschen Sie die GIFs nicht sofort. Bewahren Sie sie einige Wochen auf; falls Ihnen ein Problem auffällt, müssen Sie zurückkehren können. Außerdem brauchen Sie sie womöglich noch für E-Mail-Newsletter.

Qualitätseinstellungen

Ganz gleich, welches Format Sie wählen – die Einstellungen sind wichtig:

Für MP4/WEBM: Verwenden Sie CRF (konstanter Qualitätsfaktor). Für H.264 ist der Bereich 18–23 üblich, für VP9 28–33 (ein niedrigerer Wert bedeutet bessere Qualität). Bei Videos aus GIF-Quellen ist das Ausgangsmaterial ohnehin einfach, sodass auch höhere Qualitätseinstellungen zu vernünftigen Größen führen.

Für WEBP: Ein Qualitätswert zwischen 75 und 90 ist für die meisten Inhalte ein guter Kompromiss. Es gibt auch einen verlustfreien Modus, doch die Datei wird dann deutlich größer.

Allgemein: Erhöhen Sie die Auflösung nicht. Ist Ihr GIF 400 Pixel breit, fügt ein 800 Pixel breites Video keine Details hinzu, sondern vergrößert nur die Datei.

Die Entscheidung im Überblick

Entscheiden Sie anhand von drei Fragen:

1. Wird Transparenz benötigt? Ja → animiertes WEBP (oder APNG, falls verlustfrei erforderlich).

2. Handelt es sich um E-Mail oder eine alte Forenumgebung? Ja → als GIF belassen und nur optimieren.

3. Alle übrigen Fälle → WEBM und MP4 gemeinsam. Ist nur eine Datei möglich: MP4.

Ergänzender Hinweis: Bei Bildschirmaufnahmen mit scharfem Text kann die Chroma-Unterabtastung der Videoformate die Lesbarkeit verschlechtern. Halten Sie in diesem Fall die Auflösung hoch oder wechseln Sie zu WEBP.