Warum GIFs in der Extraktionsphase schief gehen

Die meisten schlechten GIFs werden erkannt, bevor eine GIF-Software geöffnet wird. Jemand extrahiert jedes Bild eines Fünf-Sekunden-Clips, holt sich 150 Bilder, setzt sie zusammen und erhält am Ende eine 14-MB-Datei, die eine Chat-App nicht einbetten möchte. Der Instinkt ist dann, stärker zu komprimieren, was es matschig macht, ohne es viel kleiner zu machen.

Das eigentliche Problem liegt im Upstream. Ein GIF ist kein Videocodec – es verfügt über keine Bewegungskompensation, keine nennenswerte Inter-Frame-Vorhersage und eine feste Obergrenze von 256 Farben pro Frame. Jedes Einzelbild kommt einem eigenständigen Bild nahe. Diese einzelne Tatsache bestimmt jede Entscheidung unten.

Die Reihenfolge, in der Sie nachdenken sollten, ist also: Legen Sie zuerst die Anzahl der Frames fest, dann die Palette und kümmern Sie sich erst dann um die Komprimierung.

Schritt 1: Wählen Sie das Abtastintervall

Die Frage ist nicht „wie viele Frames hat die Quelle“, sondern „wie viele benötigt die Bewegung tatsächlich“. Einige grobe Ausgangspunkte:

  • 10–12 fps – die Arbeitseinstellung. Flüssig genug für Gesten, UI-Demos und die meisten Reaktionsclips. Bei einer 30-fps-Quelle ist das jedes dritte Bild; mit 60 fps, alle 5.
  • 15 fps – für kontinuierliche Bewegung, bei der 12 zu blinken beginnt, wie ein Kameraschwenk oder ein hüpfendes Objekt.
  • 5–8 fps – für folienähnliche Inhalte: ein sich aufbauendes Diagramm, ein Vorher/Nachher, ein langsamer Zoom. Sieht oft eher gewollt als billig aus.
  • 24+ fps – lohnt sich selten. Die Dateigröße verdoppelt sich ungefähr bei 12 Bildern pro Sekunde und die meisten Betrachter können es in einer kleinen Bildschleife nicht erkennen.

Im Frame-Extraktor, verwenden Sie den Modus „Frame Rate (FPS)“ und geben Sie den Teiler ein: 3 für jeden dritten Frame, 5 für jeden fünften. Die Anzahl der Frames wird während der Eingabe aktualisiert. Dies ist die Zahl, die tatsächlich Ihre Dateigröße vorhersagt.

Zulässigkeitsprüfung vor dem Extrahieren: die beabsichtigte Frameanzahl mit etwa 30–60 KB multipliziert. Das ist ein realistischer Maßstab für einen 480 Pixel breiten GIF-Rahmen nach Palettenreduzierung. Sechzig Frames ergeben etwa 2–3 MB. Wenn das Ihr Budget übersteigt, schneiden Sie die Frames jetzt aus – das ist weitaus effektiver als eine spätere Komprimierung.

Schritt 2: Halten Sie die Dauer kurz

GIF hat keinen langen Anwendungsfall. Zwei bis vier Sekunden decken fast alles ab, was als Schleife funktioniert, und der Schleifenpunkt ist wichtiger als die Länge: Ein Clip, der in der Nähe des Anfangs endet, wird als kontinuierlich gelesen, während ein Clip, der mitten in der Bewegung schneidet, die Aufmerksamkeit bei jeder Wiederholung auf die Nahtstelle lenkt.

Verwenden Sie den Zeitbereichsschieberegler, um vor dem Extrahieren zuzuschneiden, anstatt Frames danach zu löschen. Die Zeitstempel sind beim Ziehen sichtbar, sodass Sie den Out-Punkt auf derselben Position wie den In-Punkt platzieren können.

Schritt 3: Verstehen Sie die 256-Farben-Grenze

Dies ist die Einschränkung, die die Leute überrascht, und es lohnt sich, sie zu verstehen, anstatt sie zu bekämpfen.

Jeder GIF-Frame wird in eine Palette von höchstens 256 Farben indiziert. Ihr Quellvideo hat Millionen. Etwas muss den Unterschied wegwerfen, und wie es funktioniert, entscheidet darüber, wie das Ergebnis aussieht.

Zwei Strategien, und die richtige hängt ganz vom Inhalt ab:

  • Dithering streut Pixel benachbarter Palettenfarben, um die fehlenden vorzutäuschen. Farbverläufe – Himmel, sanftes Licht, Schatten auf einem Gesicht – kommen damit weitaus besser zurecht. Der Preis hierfür ist ein sichtbares Fleckenmuster und eine merklich größere Datei, da dieses Rauschen die Komprimierung zunichte macht.
  • Kein Dithering ergibt flache, saubere Farbflächen und viel kleinere Dateien. Ideal für Bildschirmaufnahmen, UI-Demos, Strichzeichnungen und alles mit großen, gleichmäßigen Bereichen. Bei fotografischen Farbverläufen erzeugt es harte Streifen.

Praktische Regel: Bildschirminhalt, kein Zittern. Kameraaufnahmen, Dithering weiter. Wenn Sie sich nicht sicher sind, exportieren Sie beide und betrachten Sie sie in der tatsächlichen Größe – der Unterschied ist offensichtlich und dauert eine Minute.

Dies ist auch der Grund für das Extrahieren nach PNG ist die richtige Entscheidung, auch wenn das endgültige GIF 256 Farben hat. Jedes JPEG-Element in der Quelle wird zu einer Farbe, für die die Palette einen Eintrag vornehmen muss. Das Einspeisen sauberer, verlustfreier Frames in den Palettenschritt gibt dem Quantisierer einen besseren Ausgangspunkt.

Schritt 4: Passen Sie die Frame-Verzögerung an das von Ihnen extrahierte Intervall an.

GIFs speichern keine Bildrate. Sie speichern eine Verzögerung pro Bild in Hundertstelsekunden – und hier werden viele GIFs letztendlich mit der falschen Geschwindigkeit abgespielt.

Die Arithmetik ist einfach: Verzögerung = 100 ÷ Ihr Ziel-fps.

  • 12 fps → Verzögerung 8 (0,08 s)
  • 10 fps → Verzögerung 10 (0,10 s)
  • 15 fps → Verzögerung 7 (gerundet auf 6,67)
  • 5 fps → Verzögerung 20 (0,20 s)

Zwei Dinge, die Sie wissen sollten. Erstens ist die Rundung real: 15 fps können nicht genau ausgedrückt werden, sodass die Schleife leicht driftet. Für alles, wo es auf das Timing ankommt, bevorzugen Sie 10, 12,5, 20 oder 25 fps, die sich sauber aufteilen. Zweitens begrenzen die meisten Browser Verzögerungen stillschweigend auf unter 2 (0,02 s) bis zu 10 – sodass ein mit 50 fps erstelltes GIF für die meisten Betrachter mit 10 fps abgespielt wird, bei der fünffachen Dateigröße und ohne jegliche Glätte.

Schritt 5: Schneiden Sie die Größe in der Reihenfolge zu, die funktioniert.

Wenn die Datei immer noch zu groß ist, wenden Sie diese der Reihe nach an. Jedes kostet weniger Qualität pro gespeichertem Byte als das darauffolgende.

  1. Reduzieren Sie die Abmessungen. Durch Halbierung der Breite wird die Pixelanzahl geviertelt. Ein 480 Pixel breites GIF ist für die meisten Einbettungskontexte ausreichend. 800+ sind selten notwendig.
  2. Drop-Frames. Beim Wechsel von 15 auf 10 fps wird ein Drittel der Daten aus einer Änderung entfernt, die die meisten Zuschauer nicht bemerken werden.
  3. Kürzen Sie den Clip. Rücksichtslos. Fast jedes GIF hat am Anfang oder am Ende eine Sekunde, die nichts tut.
  4. Reduzieren Sie die Palette unter 256. 128 oder sogar 64 Farben oft unsichtbar auf dem Bildschirminhalt und deutlich kleiner.
  5. Dithering ausschalten wenn Sie es eingeschaltet haben und der Inhalt es aushält.

Beachten Sie, dass „stärker komprimieren“ nicht auf der Liste steht. Die Komprimierung von GIF erfolgt verlustfrei LZW – es gibt keine Qualitätseinstellung. Alles, was Sie tun können, ist eine Entscheidung darüber, welche Daten überhaupt einbezogen werden sollen.

Wenn Sie überhaupt kein GIF erstellen sollten

Es lohnt sich im Klartext zu sagen, weil es viel Aufwand spart:

  • Alles über fünf Sekunden. Ein MP4 oder WebM hat einen Bruchteil der Größe und eine bessere Qualität. Die meisten Plattformen, die „GIFs“ akzeptieren, konvertieren sie jetzt ohnehin intern in Video.
  • Fotografischer Inhalt mit viel Farbverlauf. 256 Farben sind einfach nicht genug und keine Palette Ein Trick behebt das Problem.
  • Alles, das Audio benötigt. GIF hat keine und die Schleife fühlt sich falsch an, wenn die Quelle einen Takt hatte.
  • Alles über 800 Pixel breit. Bis dahin ist die Größeneinbuße so schwerwiegend, dass Video die richtige Antwort ist.

GIF verdient genau in einer Situation seinen Platz: eine kurze, stille, automatisch abspielende Schleife, die überall ohne Player funktionieren muss. Darin ist es immer noch ungeschlagen – vorausgesetzt, die verwendeten Frames wurden bewusst ausgewählt.

Ein ausgearbeitetes Beispiel

Angenommen, Sie möchten ein GIF von einem Dreisekündige UI-Interaktion aus einer 60-fps-Bildschirmaufnahme, weniger als 1 MB.

  1. Zuschneiden auf die 3,2 Sekunden, die die Interaktion enthalten, wobei das letzte Bild nah am ersten liegt.
  2. Extrahieren im FPS-Modus mit N = 5 – jedes fünfte Bild mit 60 fps ergibt 12 fps, also etwa 38 Bilder. PNG-Ausgabe.
  3. Zusammenbauen bei Verzögerung 8, Dithering aus (es handelt sich um Bildschirminhalte mit flachen Farben).
  4. Skalieren auf 600 Pixel Breite, wenn die Quelle größer war.
  5. Überprüfen Sie das Ergebnis. Etwa 38 Frames flacher UI-Inhalte landen normalerweise deutlich unter 1 MB. Wenn nicht, reduzieren Sie die Palette auf 128 Farben, bevor Sie etwas anderes berühren.

Das Ganze dauert ein paar Minuten und jeder Schritt ist eine Entscheidung, die Sie getroffen haben, und nicht eine Vorgabe, die Sie geerbt haben.