GIF oder Video? GIF, MP4/WebM und animiertes WebP für kurze Animationen

Für kurze Animationen auf einer Website ist ein stummes, in Schleife laufendes MP4- oder WebM-Video meist die beste Wahl: Es ist in der Regel um ein Vielfaches kleiner als dasselbe GIF und zeigt volle Farben. Animiertes WebP liegt dazwischen – eine Bilddatei mit vollen Farben und Transparenz, die jeder aktuelle grosse Browser anzeigt. GIF bleibt das Format für Orte, die kein Video abspielen und WebP vielleicht nicht zeigen: E-Mail-Newsletter, viele Chat- und Ticketwerkzeuge und Dokumentationssysteme, die nur Bilder annehmen.

Dieser Vergleich betrachtet die Kandidaten – GIF, MP4/WebM-Video, animiertes WebP und kurz animiertes PNG (APNG) – nach Dateigrösse, Qualität, Farben, Ton, Autoplay und Unterstützung und zeigt, wie Sie im Browser zwischen ihnen umwandeln. Er beschreibt die Formate allgemein; die tatsächliche Grösse hängt immer vom Inhalt und von den Einstellungen ab.

GIF, Video, animiertes WebP und APNG auf einen Blick

Dateigrösse und Qualität: warum Video meist viel kleiner ist

Der Unterschied liegt darin, wie jedes Format Bewegung komprimiert. GIF komprimiert jeden Frame verlustfrei, mit einer Palette von höchstens 256 Farben; ein Encoder kann nur den geänderten Bereich speichern, doch jedes geänderte Pixel wird vollständig gespeichert. Video-Codecs wie H.264, VP9 oder AV1 sagen jeden Frame aus den vorherigen voraus und speichern nur den verbleibenden Unterschied, verlustbehaftet. Bei Kameraaufnahmen oder einer Bildschirmaufnahme mit Scrollen wird ein Video dadurch meist um ein Vielfaches kleiner – und sieht besser aus.

Auch die Qualität unterscheidet sich. GIF muss Verläufe und Hauttöne in Punktmuster auflösen. Video zeigt volle Farben, kann bei niedriger Qualitätseinstellung aber scharfe Schrift und feine Linien verwischen. Animiertes WebP kann für Oberflächengrafiken verlustfrei oder für fotoähnliche Inhalte verlustbehaftet sein und behält weiche Transparenz. APNG ist verlustfrei und farbecht – sauber, aber oft gross; es passt eher zu kleinen Grafiken mit Transparenz als zu Filmaufnahmen. Die Formate selbst vergleicht WebP vs. AVIF vs. JPEG vs. PNG.

Autoplay, Schleifen und Ton auf einer Website

Ein GIF oder ein animiertes WebP verhält sich wie ein Bild: Es startet, sobald es geladen ist, läuft so oft, wie die Datei es vorgibt, und die Lesenden erhalten keine Pausentaste. Ein Video ist ein Element, das Sie steuern. Für eine GIF-ähnliche Schleife ist das übliche Markup ein stummes Video, das von selbst läuft – Browser erlauben automatisches Abspielen in der Regel nur ohne Ton:

<video autoplay muted loop playsinline poster="demo-poster.jpg" width="640" height="360">
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
</video>

muted macht Autoplay möglich, playsinline verhindert, dass Handys das Video im Vollbild öffnen, und poster zeigt ein Standbild, bis das Video startet – Frames extrahieren erstellt eines. Ergänzen Sie controls oder eine eigene Pausentaste, wenn die Schleife länger als ein paar Sekunden läuft: Das Erfolgskriterium 2.2.2 der WCAG 2.2 (Stufe A) verlangt eine Möglichkeit, bewegte Inhalte zu pausieren, zu stoppen oder auszublenden, die automatisch starten, länger als fünf Sekunden dauern und neben anderen Inhalten erscheinen – siehe Understanding «Pause, Stop, Hide» auf w3.org (Englisch).

E-Mail, Chat und Dokumentation: wo Video oft nicht läuft

Ausserhalb Ihrer eigenen Website entscheidet das empfangende Programm, was läuft:

• E-Mail-Newsletter. Video läuft in E-Mail-Programmen selten, und animiertes WebP ist ebenfalls nicht verlässlich. Ein animiertes GIF wird weitgehend angezeigt, manche Programme zeigen allerdings nur den ersten Frame. Halten Sie es klein, legen Sie die Botschaft in den ersten Frame, oder verwenden Sie ein Standbild, das zu einer Seite mit dem Video verlinkt.
• Chat und Messenger. Viele nehmen GIFs und kurze Videos an, wandeln das Gesendete aber unter Umständen um oder komprimieren es neu; das Verhalten unterscheidet sich je nach App und ändert sich mit Updates.
• Dokumentation, Wikis und Ticketsysteme. Viele nehmen Bilder an, aber keine Videos, oder spielen Video nur über einen eingebetteten Player ab. Ein kurzes GIF funktioniert überall; wo Video angenommen wird, ist es leichter.
• Ihre eigene Website oder Ihr Shop. Sie bestimmen das Markup, deshalb ist eine stumme MP4-/WebM-Schleife oder ein animiertes WebP meist besser als ein GIF – eine Produktdemo auf einer Shopseite lädt als kurzes Video schneller.

Zwischen GIF und Video umwandeln, direkt im Browser

SchweizerIMG hat für jede Richtung ein Werkzeug. Beide laufen in Ihrem Browser: Das Video und die Frames werden auf Ihrem Gerät verarbeitet und nie hochgeladen – siehe die Sicherheitsseite.

• Video zu GIF macht aus einem kurzen Clip ein animiertes GIF, WebP oder PNG (APNG). Wählen Sie den Ausschnitt (Anfang und Ende in Sekunden), die Frames pro Sekunde, die Breite – leer heisst die des Videos, höchstens 480 Pixel –, die Geschwindigkeit und die Anzahl Wiedergaben. Für GIF regeln die Formateinstellungen Farben, Dithering und Palette.
• GIF zu Video wandelt ein animiertes GIF, WebP oder PNG in ein MP4- oder WebM-Video mit demselben Timing um. Automatisch wählt MP4 (H.264), wenn Ihr Browser es erstellen kann, sonst WebM. Legen Sie eine Qualität oder eine Bitrate fest, wie oft sich die Animation im Video wiederholt, und den Hintergrund für transparente Bereiche – die Videos enthalten keine Transparenz.
• Der GIF- und Animationseditor kürzt, schneidet zu, verkleinert und erleichtert eine Animation, die ein GIF bleiben muss – siehe GIF verkleinern.
• Frames extrahieren speichert einzelne Frames eines Videos oder einer Animation, für ein Vorschaubild oder einen Ersatz in E-Mails.

Die Videowerkzeuge brauchen einen aktuellen Browser, der Video kodieren und dekodieren kann (WebCodecs). Welche Formate er erstellen kann, unterscheidet sich je nach Browser, und wo MP4 nicht verfügbar ist, wird WebM verwendet – siehe unterstützte Browser. Videoaufträge laufen nacheinander. Die längste Clipdauer, die die Videowerkzeuge lesen, hängt vom Plan ab; welche Pläne Video zu GIF und GIF zu Video umfassen, steht auf der Preisseite.

So wählen Sie das passende Format

• Hero oder Produktdemo auf Ihrer Website: eine stumme MP4-/WebM-Schleife mit Vorschaubild.
• Kleine Oberflächen-Schleife auf Ihrer Website: ein Video oder animiertes WebP, wenn Transparenz nötig ist oder es sich wie ein Bild verhalten muss.
• E-Mail-Newsletter: ein kleines GIF mit der Botschaft im ersten Frame – oder ein Standbild, das zum Video verlinkt.
• Chat, Tickets und Wikis, die nur Bilder annehmen: ein GIF, gekürzt und mit wenigen Farben.
• Animation über wechselnden Hintergründen: animiertes WebP oder APNG; GIF ergibt harte Kanten, Video keine Transparenz.
• Alles mit Ton: ein Video – kein Bildformat trägt Audio.

Häufige Fragen

Ist MP4 immer kleiner als GIF?

Meistens, nicht immer. Bei Kamera- und Bildschirmaufnahmen ist das Video in der Regel um ein Vielfaches kleiner. Eine winzige Icon-Animation mit wenigen einfarbigen Frames kann als GIF genauso klein sein. Wandeln Sie um und vergleichen Sie: Das Ergebnis zeigt, welche Datei leichter ist.

Kann ich ein MP4-Video in einen E-Mail-Newsletter einbauen?

Anhängen können Sie es, doch die meisten E-Mail-Programme spielen ein Video in der Nachricht nicht ab. Üblich ist ein animiertes GIF oder ein Standbild, das zu einer Seite mit dem Video verlinkt.

Bleibt beim Umwandeln eines GIF in ein Video die Transparenz erhalten?

Nein. Videos aus GIF zu Video haben keine Transparenz: Transparente Bereiche werden mit der gewählten Hintergrundfarbe gefüllt. Brauchen Sie Transparenz, behalten Sie die Animation als WebP oder APNG.

Warum habe ich eine WebM-Datei statt einer MP4 erhalten?

Mit Automatisch erstellt das Werkzeug MP4 (H.264), wenn Ihr Browser es kann, sonst WebM – nicht jeder Browser kann H.264 kodieren. WebM läuft in aktuellen Versionen der grossen Browser; brauchen Sie MP4, versuchen Sie es mit einem anderen Browser.

Öffnen Sie die Animationswerkzeuge, lesen Sie unterstützte Bildformate, oder erstellen Sie ein kostenloses Konto.