GIF, MP4 oder WebM: welches Format für Loops

GIF oder MP4 entscheidet sich danach, wo der Loop läuft. Auf Websites und in Social Media ist MP4 (und sein offener Cousin WebM) fast immer die richtige Wahl: Die Dateien sind meist deutlich kleiner, die Farbe ist glatt und die Wiedergabe effizient. GIF ist an einer Stelle weiter richtig, in E-Mails, weil die meisten Postfächer animierte GIFs zeigen und nur sehr wenige Video abspielen. Alles andere in diesem Leitfaden ist Detail zu dieser Regel.

Was jedes Format eigentlich ist

GIF ist ein Bildformat aus den späten 1980ern, das mehrere Bilder halten kann. Es speichert jedes Bild mit einer Palette aus höchstens 256 Farben und komprimiert jedes Bild für sich. MP4 und WebM sind Videoformate. Sie nutzen moderne Video-Codecs, etwa H.264 in MP4 und VP9 oder AV1 in WebM, die speichern, was sich zwischen Bildern ändert, statt jedes Bild vollständig. Bei einem Loop, in dem sich der größte Teil des Bildes langsam ändert, ist dieser Unterschied enorm.

Warum Farbverläufe als GIF schlecht aussehen

Ein sanfter Farbverlauf über ein Bild mit 1080 Pixeln Breite kann Tausende verschiedene Farben nutzen. Ein GIF-Bild kann höchstens 256 halten. Der Encoder hat zwei Möglichkeiten: Farben auf die nächste in der Palette runden, was sichtbare Streifen erzeugt, oder Pixel benachbarter Farben streuen, um die Zwischentöne vorzutäuschen, was Dithering heißt, gesprenkelt aussieht und Dateien größer macht. Keines sieht aus wie der Farbverlauf, den du gestaltet hast.

Körnung hilft ein wenig, weil verrauschte Bilder Palettengrenzen besser verbergen als saubere. Die echte Lösung ist aber, GIF nicht zu nutzen, wo Video möglich ist. Banding im Farbverlauf erklärt dasselbe Problem bei Standbildern.

MP4 oder WebM für Websites

Ersetze auf einer Website GIFs durch ein Video-Element, das sich wie eines verhält: automatisch abspielend, stumm, in Schleife und inline. Der Leitfaden von web.dev zum Ersetzen animierter GIFs durch Video erklärt den Ansatz. Biete WebM zuerst an, weil es oft kleiner ist, und MP4 als Fallback, das fast überall läuft.

<!-- Instead of <img src="loop.gif" alt=""> -->
<video autoplay muted loop playsinline width="600" height="600"
       poster="loop-poster.jpg">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
</video>

Zwei weitere Formate sind wissenswert. Animiertes WebP und animiertes AVIF sind Bildformate, die wie ein GIF in einem gewöhnlichen img-Tag genutzt werden, aber mit voller Farbe und deutlich besserer Kompression. Moderne Browser unterstützen beide. Sie sind praktisch, wo ein CMS oder eine Plattform nur Bilder akzeptiert, aber nicht für E-Mails. Für Hintergründe in voller Breite lies Videohintergründe auf Websites.

Loops für Social Media

Soziale Plattformen sind um Video herum gebaut, und MP4 ist das Format, das alle akzeptieren. Wo eine Plattform einen GIF-Upload annimmt, behandelt sie ihn oft anders als ein normales Video, deshalb ist ein GIF selten ein Vorteil. Exportiere deinen Loop als MP4 in der Größe der Plattform, in H.264, und lass die Plattform den Rest tun. Animierte Posts gegen statische behandelt Größen und Einstellungen.

Loops in E-Mails: weiterhin GIF

Die meisten E-Mail-Clients spielen kein Video ab, deshalb ist ein animiertes GIF der praktische Weg, Bewegung in eine E-Mail zu bringen. Halte es klein und sieh das erste Bild als Fallback: Manche Clients, darunter manche Versionen des klassischen Outlook für Windows, zeigen nur das erste Bild. Setze die Botschaft in dieses Bild, damit nichts verloren geht. Unsere Leitfäden zu E-Mail-Header-Design und Farbverläufen in E-Mails behandeln den Rest.

1. 1

   Kurz halten

   Zwei bis sechs Sekunden reichen in einer E-Mail völlig, jedes Bild fügt Gewicht hinzu.

2. 2

   Größe und Bildrate senken

   Exportiere in der Breite, in der es angezeigt wird, oft 600 Pixel, und mit niedrigerer Bildrate, etwa 10 bis 15 Bilder pro Sekunde, für langsame Bewegung.

3. 3

   Die Botschaft in Bild eins setzen

   Lesende, die nur das erste Bild sehen, sollten trotzdem den Punkt verstehen.

4. 4

   Die Dateigröße prüfen

   Große GIFs laden auf Handys langsam. Ist es schwer, kürze Länge, Größe oder Farben vor allem anderen.

Zwischen GIF und MP4 konvertieren

ffmpeg, ein kostenloses Kommandozeilen-Tool, beherrscht beide Richtungen. Um aus einem Video ein gutes GIF zu machen, braucht es eine eigene Palette aus dem Video selbst, ein GIF in MP4 zu verwandeln ist einfacher.

# MP4 to GIF: 15 fps, 600 px wide, with a palette made from the clip
ffmpeg -i loop.mp4 -vf "fps=15,scale=600:-1:flags=lanczos,split[a][b];[a]palettegen[p];[b][p]paletteuse" -loop 0 loop.gif

# GIF to MP4: H.264, even dimensions, ready for the web
ffmpeg -i loop.gif -movflags +faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" loop.mp4

# MP4 to WebM (VP9)
ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an loop.webm

Welches Format du nutzt, auf einen Blick

Machst du Loops in Gradiently, exportiert das Studio beides: ein Video (MP4, wo dein Browser aufnehmen kann, sonst WebM) bis 1080p und ein GIF mit wählbarer Qualität, das unter 15 MB bleibt. Achte darauf, dass der Loop sauber schließt, welches du auch wählst, siehe nahtlose Loops.