GIF, MP4 oder WebM: derselbe Clip in jedem Format

GIF stammt von 1987. Es wurde für einfache Grafiken über langsame Modems entworfen, bekam zwei Jahre später Animation und ist bis heute die Art, wie die meisten Menschen eine kurze Schleife teilen. Um zu sehen, was das kostet, haben wir zwei 10-Sekunden-Clips in gleicher Größe in ein GIF, ein MP4 und ein WebM verwandelt und die Dateien verglichen.

Der Test

Wir haben zwei Clips erstellt, je 10 Sekunden Full-HD-Video mit 30 Bildern pro Sekunde, per Code gezeichnet, damit sich jedes Originalbild später zum Vergleich neu zeichnen ließ:

• Ein Kameraclip: ein langsamer Schwenk über ein Foto eines Bergsees, mit leichtem Rauschen versehen, wie eine Aufnahme vom Handy.
• Eine Bildschirmaufnahme: ein App-Fenster, in dem Text getippt wird, ein Diagramm wächst und ein Mauszeiger sich bewegt.

Jeder Clip wurde in 480 × 270 umgewandelt, einer typischen Größe für ein GIF, mit denselben Encodern wie in unseren Werkzeugen: dem Video-in-GIF-Konverter mit seinen Standardwerten von 12 Bildern pro Sekunde und 128 Farben (und einmal mit 24 Bildern pro Sekunde) und dem Video-Konverter für MP4 mit H.264 und WebM mit VP9, beide mit 231 Kilobit pro Sekunde. Dann haben wir acht Bilder jeder Datei mit den Originalbildern per SSIM verglichen, einem Wert dafür, wie ähnlich zwei Bilder aussehen, wobei 1 identisch bedeutet.

Ergebnisse

Beim Kameraclip ist der Abstand enorm. Das GIF war 16-mal so groß wie das MP4, zeigte weniger als die Hälfte der Bilder und schnitt trotzdem schlechter ab. Die Bildrate auf 24 zu verdoppeln, verdoppelte die Datei auf 10,5 MB, mehr als 30-mal das MP4, ohne das Bild zu verbessern.

Die Bildschirmaufnahme ist gnädiger zu GIF, weil einfarbige Flächen und scharfer Text gut zu seiner Grenze von 256 Farben passen. Es erreichte 0,988, nah an den Videos, aber die Datei war immer noch fast fünfmal so groß wie das MP4.

Wie der Unterschied aussieht

GIF, 5,3 MBMP4, 336 KB

GIF kann pro Bild nur 256 Farben nutzen, und unser Konverter nimmt 128, sofern Sie nicht mehr verlangen. Ein Foto hat Hunderttausende, also wählt der Encoder für jedes Bild eine Palette und ersetzt jedes Pixel durch die nächstgelegene Farbe daraus. Weiche Flächen wie das Wasser zerfallen in Streifen, das feine Rauschen der Aufnahme wird zu harten Punkten, und da jedes Bild seine eigene Palette bekommt, flimmern ruhige Bereiche leicht.

Warum GIF so viel größer ist

Der Hauptgrund: Ein GIF speichert jedes Bild als eigenes Bild. Es komprimiert jedes verlustfrei, kann aber nicht sagen „dieses Bild ist das vorige, etwas nach links verschoben“. Manche GIF-Werkzeuge speichern nur den Teil jedes Bildes, der sich geändert hat, was bei Bildschirmaufnahmen mit ruhigem Hintergrund hilft, aber jede Kamerabewegung ändert jedes Pixel.

Videocodecs bauen genau auf dieser Idee auf. H.264 und VP9 sagen jedes Bild aus den vorherigen voraus, speichern nur, was die Vorhersage falsch hatte, und werfen Details weg, die das Auge nicht vermissen wird. Deshalb wiegen 30 Bilder pro Sekunde Video weniger als 12 Bilder pro Sekunde GIF.

MP4 oder WebM?

Bei gleicher Bitrate war VP9 in einer WebM-Datei beim Kameraclip 13 % kleiner als H.264 in einem MP4, bei etwas höherem Wert. Bei der Bildschirmaufnahme war es umgekehrt: Der H.264-Encoder nutzte bei den ruhigen Teilen weniger als sein Budget und war kleiner, beide bei nahezu perfekter Qualität. Der größere Unterschied ist die Kompatibilität:

• MP4 mit H.264 läuft überall: in jedem Browser, auf jedem Handy und Fernseher, in jedem Messenger und Videoschnittprogramm. Es ist der sichere Standard.
• WebM mit VP9 läuft in allen aktuellen Browsern und ist im Web verbreitet, aber manche Apps und ältere Apple-Geräte kommen schlecht damit zurecht.

Für eine Seite, die Sie selbst betreiben, ist WebM eine gute Wahl. Für alles, was Sie anderen schicken, nehmen Sie MP4.

Wann ein GIF noch sinnvoll ist

• E-Mail. Die meisten E-Mail-Programme zeigen GIFs und spielen kein Video ab. Ein kurzes, kleines GIF ist immer noch der Weg, Bewegung in einen Newsletter zu bringen.
• Orte, die nur Bilder annehmen, etwa manche Foren, Chat-Werkzeuge und Dokumentationssysteme.
• Winzige Schleifen mit wenigen Farben: ein Ladekreisel, eine kurze Bildschirmaufnahme einer Schaltfläche, ein Sticker.

Viele Websites, die „GIFs“ zeigen, darunter die großen GIF-Suchdienste und sozialen Netzwerke, liefern sie im Hintergrund tatsächlich als Video aus, genau aus den oben genannten Gründen. Auf Ihrer eigenen Webseite können Sie dasselbe tun: Ein Video-Element mit autoplay, muted, loop und playsinline verhält sich wie ein GIF, läuft auf Handys und kostet einen Bruchteil der Daten.

<video src="loop.mp4" autoplay muted loop playsinline></video>

Wenn Sie doch ein GIF erstellen

• Halten Sie es kurz. Die Größe wächst mit jedem Bild. Zwei bis vier Sekunden reichen für eine Schleife meist aus.
• Halten Sie es klein. 480 Pixel Breite genügen für die meisten Zwecke; jede Verdopplung der Breite vervierfacht ungefähr die Größe.
• Nutzen Sie 10 bis 15 Bilder pro Sekunde. Mehr Bilder kosten mehr, als sie bringen.
• Vermeiden Sie Kameraaufnahmen, wo Sie können. Bildschirmaufnahmen und Animationen komprimieren viel besser.

Mit dem Video-in-GIF-Konverter wählen Sie den Teil des Videos, die Breite, die Bildrate und die Anzahl der Farben, und er zeigt die erwartete Zahl der Bilder, bevor Sie beginnen. Um einen GIF-artigen Clip stattdessen in ein viel kleineres Video zu verwandeln, nutzen Sie den Video-Konverter. Beide laufen in Ihrem Browser.