GIF zuschneiden

Kürze ein animiertes GIF auf den Teil, den du haben willst, ohne es in ein Standbild zu verwandeln oder seine Abspielgeschwindigkeit zu ändern.

1. 1

   GIF hinzufügen

   Zieh ein animiertes GIF auf die Ablagefläche oder klicke zum Durchsuchen. Animiertes WebP und APNG funktionieren ebenfalls. Die Datei wird auf deinem Gerät gelesen und nie hochgeladen.

2. 2

   Zuschnittrahmen festlegen

   Zieh ein Rechteck über das Bild, greif einen der acht Griffe, oder tippe exakte Werte für Links, Oben, Breite und Höhe. Wähl zuerst ein Seitenverhältnis, wenn das Ergebnis in einen festen Platz passen muss.

3. 3

   Prüfen, was sich bewegt

   Drück Bewegungsfeld zeigen. Eine gestrichelte Kontur legt sich um alles, was sich über die ganze Animation hinweg ändert — so siehst du, ob dein Rahmen das Motiv in einem Frame abschneidet, den du gerade nicht anschaust.

4. 4

   Zuschneiden und herunterladen

   Drück Zuschneiden, dann Herunterladen. Die Verzögerung jedes Frames, die Schleifenzahl und jede Transparenz kommen unverändert heraus, die Animation läuft also genau wie zuvor — nur kleiner.

Fast jedes GIF bringt etwas mit, das du nicht wolltest. Eine Bildschirmaufnahme fängt das ganze Fenster ein, während der interessante Teil ein einzelnes Feld ist. Ein aus einem Video gezogener Clip trägt oben und unten schwarze Balken, weil die Quelle Breitbild war und der Export nicht. Ein Reaktions-GIF hat ein Wasserzeichen in der Ecke oder dreißig Pixel Desktop-Hintergrund an einer Seite. Zuschneiden ist der Moment, in dem die Datei aufhört, eine Aufnahme zu sein, und anfängt, das zu sein, was du zeigen wolltest — und anders als Skalieren kostet es keine Qualität, denn die Pixel, die überleben, sind genau die Pixel, die hineingingen.

Zieh ein Rechteck oder tippe exakte Koordinaten, kürze einfarbige und transparente Ränder mit einem Druck, und sieh vor dem Schnitt, wo sich die Animation bewegt.

Liest GIF, animiertes WebP und APNG. Schreibt ein Standard-GIF89a und erhält Einzelbild-Verzögerungen, Schleifenzahl und Transparenz.

Was das Abschneiden der Ränder wirklich bringt

• Aufmerksamkeit. Eine 1200 Pixel breite Bildschirmaufnahme in einer 700 Pixel breiten Spalte zeigt der Leserin alles in halber Größe. Auf das entscheidende Feld zugeschnitten zeigt sie ihr eine Sache in voller Größe.
• Bytes, und zwar anteilig. Bei GIF folgt die Dateigröße der Pixelzahl sehr direkt. Die Hälfte des Bildes zu behalten entfernt grob die Hälfte der Daten, und anders als eine kleinere Palette entfernt es nichts, was du sehen kannst.
• Ein Platz, der passt. Emoji-Felder, Avatarrahmen und soziale Feeds haben feste Formen. Auf die Form zuzuschneiden ist der Unterschied zwischen den Platz ausfüllen und von fremden Regeln in ihm mit Balken eingerahmt werden.
• Was auch immer in der Ecke ist. Ein Mauszeiger, eine Taskleiste, eine Benachrichtigung, ein Wasserzeichen, ein Streifen einer anderen Anwendung. Zuschneiden ist die einzige Bearbeitung, die das vollständig entfernt statt es zu überdecken.

Ein Standbild zuzuschneiden sind vier Zahlen und ein Kopiervorgang. Ein animiertes GIF ist ein Stapel Frames, und das Format macht fast jede Annahme falsch, die man gern über sie treffen würde. Ein Frame hat nicht zwingend die Größe der Animation: Er darf ein kleineres versetztes Rechteck sein, das nur die seit dem letzten Frame geänderte Region speichert. Jeder Frame trägt eine Entsorgungsmethode, die sagt, was vor dem Zeichnen mit dem vorherigen Frame zu tun ist — stehen lassen, den Hintergrund wiederherstellen oder das wiederherstellen, was vorher da war. Jeder darf seine eigene Transparenzfarbe angeben, und jeder darf seine eigene Palette mitbringen. Ein Zuschneider, der die gespeicherten Frames als Bilder behandelt und sie dort schneidet, wohin der Nutzer gezeigt hat, liefert eine Ausgabe, die flackert, geistert oder Frames ganz verliert.

Was hier mit jedem Frame passiert

• Komponieren. Jeder Frame wird auf eine Leinwand in der logischen Größe der Animation gezeichnet, unter Beachtung von Versatz, Entsorgungsmethode und Transparenz — geschnitten wird also das Bild, das eine Betrachterin wirklich sähe, und nicht das Fragment, das die Datei zufällig gespeichert hat.
• Einmal schneiden. Das Zuschnittrechteck, der ovale Beschnitt, falls du einen gewählt hast, und die Ausgabegröße werden in einem einzigen Zeichenvorgang auf deiner Grafikhardware angewendet. Zuschneiden und Skalieren sind für eine Grafikpipeline derselbe Vorgang, beides zu verlangen kostet also nicht mehr als eines davon.
• Neu quantisieren. Eine Palette wird aus einer über die ganze Animation verteilten Stichprobe gebaut, nicht aus dem ersten Frame, dann wird jeder Pixel darauf abgebildet. Sie pro Frame zu bauen ist der Grund, warum Farben in anderen Werkzeugen sichtbar zwischen Frames wandern.
• Neu optimieren. Unveränderte Bereiche zwischen Frames werden in der neuen Größe wieder transparent markiert. Von dort kommt der größte Teil der Dateigröße eines GIFs, und genau das verhindert, dass ein Zuschnitt die Datei größer macht.

Das Flackerproblem, und warum es dafür keine Einstellung gibt

Der bekannteste GIF-Zuschneider im Netz bietet drei verschiedene Zuschnitt-Engines und eine Hilfeseite, die erklärt, dass seine schnelle Voreinstellung Animationen mit Frame-Differenzen kaputt macht, dass die langsamere funktioniert, aber jede Optimierung entfernt und größere Dateien erzeugt, und dass die dritte schlechtere Qualität hat, weil sie nicht kantenglättet. Das sind drei Arten, falsch zu liegen, präsentiert als Auswahl. Der Kompositionsschritt oben beseitigt die Frage: Es gibt in diesem Tool keinen Weg, der ein gespeichertes Fragment statt des zusammengesetzten Frames schneidet, es gibt also nichts umzuschalten und keine Einstellung, die ein Geisterbild erzeugen könnte.

Zwei der Bedienelemente hier stammen aus derselben Messung. Drück eines davon, und das Tool dekodiert die Animation einmal und beantwortet zwei Fragen dazu: wo der Inhalt ist und wo die Bewegung ist. Beide Antworten werden über alle Frames berechnet, nie aus dem ersten, und genau darin liegt der ganze Punkt.

• Das Inhaltsfeld. Der Hintergrund wird aus den vier Ecken des ersten Frames gelesen — eine Volltonfarbe oder Transparenz — und das Inhaltsfeld ist das engste Rechteck, das alles enthält, was nicht dieser Hintergrund ist, vereinigt über alle Frames. Ränder kürzen setzt deinen Zuschnitt darauf.
• Das Bewegungsfeld. Das engste Rechteck, das jeden Pixel enthält, der sich von einem Frame zum nächsten ändert. Bewegungsfeld zeigen zeichnet es als gestrichelte Kontur über das Bild, und das Tool warnt dich, wenn dein Zuschnitt hineinschneiden würde.
• Die Toleranz. Wie nah an der Hintergrundfarbe noch als Hintergrund zählt. Null bedeutet exakte Übereinstimmung, was für eine gleichmäßige Farbe richtig ist und für alles aus einem Video falsch, wo die Balken um ein paar Stufen gerastert sind. Zieh sie hoch, bis die Kontur ans Bild schnappt.

Warum die Vereinigung über alle Frames die einzig richtige Antwort ist

Stell dir eine Animation vor, in der ein kleiner Punkt über ein leeres Feld von links nach rechts wandert. Im ersten Frame ist der Inhalt ein zehn Pixel großes Quadrat nahe dem linken Rand. Kürz darauf, und du bekommst ein zehn Pixel großes GIF eines Punktes, der sofort aus dem Bild läuft — ein ordentliches Ergebnis, ein funktionierender Download und vollkommen falsch. Der Inhalt der ANIMATION ist die Vereinigung des Inhalts aller Frames, in diesem Beispiel also hundertsechzig Pixel breit. Dieses Tool misst diese Vereinigung, und sie wird gegen eine unabhängige Implementierung geprüft, die jeden Pixel jedes Frames ohne Abkürzungen abtastet — genau an diesem Testfall.

Der häufigste Fehler ist, auf das zuzuschneiden, was im gerade angezeigten Frame richtig aussieht. Eine Animation ist nicht ein Bild, und der Frame, den du zufällig ansiehst, ist nicht repräsentativ für sie — dafür ist die Bewegungsfeld-Überlagerung da. Der zweithäufigste ist, auf eine Zahl zuzuschneiden, die glatt klingt, statt auf die, die das Ziel verwendet. Finde vor dem Tippen heraus, in welcher Größe das Ziel tatsächlich darstellt.

Nach Material

• Bildschirmaufnahmen. Schneide auf das Feld zu, nicht auf das Fenster. Lass ein paar Pixel Rand um alles mit einer Umrandung, sonst wirkt die Umrandung wie ein Darstellungsfehler statt wie Teil der Oberfläche.
• Clips aus Video. Drück Ränder kürzen mit einer Toleranz um 8 bis 16. Letterbox-Balken aus einem Video-Export sind fast nie reines Schwarz, eine Toleranz von null lässt sie also stehen.
• Pixel-Art und Sprites. Schneide auf exakte Vielfache des Sprite-Rasters, und wenn du zusätzlich skalierst, nimm ganzzahlige Vielfache mit dem Resampling-Modus Pixel. Ein nicht ganzzahliger Faktor ergibt bei Pixel-Art selbst mit Nearest Neighbour ungleiche Blöcke.
• Alles mit einem bewegten Motiv. Zeig zuerst das Bewegungsfeld und stell sicher, dass dein Rahmen es enthält. Geht das nicht, verlässt das Motiv in der Quelle das Bild, und Zuschneiden kann das nicht beheben — kürze stattdessen die Animation.

Die Seitenverhältnisse, und wofür sie da sind

Quadratisch ist für Emoji, Avatare und alles, was in ein Raster geht. 4:3 und 3:2 passen zu älteren Bildschirmaufnahmen und zu Kameramaterial. 2:1 ist die breite Bannerform, und der Goldene Schnitt ist dabei, weil der bekannteste Zuschneider dieser Kategorie ihn anbietet und Leute ihn beim Namen verlangen. 16:9 ist die Form nahezu jeder Videoquelle, es ist also das, was du willst, wenn du einen Clip zugeschnitten hast und er weiterhin als Clip gelesen werden soll. 9:16 ist das Vollbild-Hochformat von Stories, Reels und Shorts, und 4:5 ist die höchste Form, die ein Instagram-Feed-Beitrag darstellt, ohne selbst zu beschneiden. Original sperrt auf das, was die Datei bereits ist, und das ist die richtige Wahl, wenn du einen Rand entfernst und die Proportionen erhalten bleiben sollen.

Auf ein Oval zuschneiden

Stell die Form auf Oval, und der Zuschnitt behält die größte Ellipse, die in dein Rechteck passt, und räumt die vier Ecken auf Transparenz oder auf eine Farbe deiner Wahl frei. Es ist derselbe einzelne Zeichenvorgang — das Oval ist eine Maske auf dem Vorgang, der ohnehin schon stattfand, kein zweiter Durchlauf — also bleiben das Timing, die Schleifenzahl und die Frameanzahl genauso unangetastet wie bei einem Rechteck. Eine ehrliche Einschränkung, und sie gehört zum Format und nicht zu diesem Werkzeug: Ein GIF speichert Transparenz als einen einzigen Palettenplatz und nicht als Alphakanal, deshalb ist die Kante des Ovals hart. Ein Pixel ist drin oder draußen, ohne weichen Übergang, und genau darum liest sich ein Oval auf unruhigem Hintergrund mit einer einfarbigen Umgebung besser als mit Transparenz.

• Dokumentation und README-Dateien. Schneide die Aufnahme auf das gezeigte Bedienelement zu. Wer der Anleitung folgt, muss den Rest des Fensters nicht sehen, und jeder Pixel davon sind Bytes, die geladen werden.
• Eigene Emoji. Quadratisch, eng auf das Motiv zugeschnitten, dann im selben Durchgang auf 128 mal 128 skaliert. Discord und Slack nutzen beide diese Größe für eigene Emoji.
• Fehlerberichte und Support-Verläufe. Zuschneiden ist auch Schwärzen: Ein Zuschnitt entfernt physisch, was in der Ecke war, während ein Weichzeichner oder ein schwarzer Kasten es in der Datei belässt.
• Beiträge in sozialen Netzwerken. Feeds rahmen alles mit Balken ein, was nicht ihre Form hat. Vorher auf 9:16 oder 4:5 zuzuschneiden ist der Weg, wie die Animation den Platz füllt statt in einem grauen Band zu sitzen.

Maße und Formen, die man sich merken sollte

Eigene Emoji bei Discord und Slack sind 128 mal 128. X rendert eingebettete Bilder bis 506 Pixel Breite. Die README-Spalte bei GitHub ist bei voller Breite 768 und in der Praxis etwa 700, und die meisten Dokumentationsthemes liegen zwischen 680 und 760. Instagram-Feed-Beiträge werden mit 1080 Breite dargestellt und akzeptieren 1:1, 4:5 und 1,91:1; Stories und Reels sind 9:16. Alles, was breiter ist als die Spalte, in der es landet, sind Bytes, die die Leserin lädt und nie sieht.

Die Eingabeliste ist geschlossen und wird im Dateidialog durchgesetzt, nicht erst in der Engine. Eine Datei, die dieses Tool nicht öffnen kann, wird in Millisekunden abgelehnt — mit einem Weg zu dem Tool, das sie öffnen kann, statt angenommen zu werden und später hinter einem Ladeindikator zu scheitern.

• GIF hinein. Animiert oder einzelbildig, interlaced oder nicht, mit globaler Palette oder eigener lokaler Palette je Frame. Frames, die nur ein versetztes Teilrechteck sind, werden auf die volle Leinwand komponiert, bevor irgendetwas geschnitten wird.
• Animiertes WebP und APNG hinein. Beide werden auf jedem Browser von unseren eigenen Demuxern gelesen und nicht von einem nativen Dekoder, Frames und Timing sind also überall identisch.
• GIF hinaus, immer. Ein Standard-GIF89a mit globaler Farbtabelle, Einzelbild-Verzögerungen, Entsorgungsmethoden und einer Netscape-Schleifenerweiterung, die die Schleifenzahl der Quelle trägt.
• Alles andere wird mit einem Weg abgelehnt. Ein Video geht zu Video zu GIF, ein Standbild zum GIF-Ersteller. Keines davon wird als Fehler mit deiner Datei beschrieben, denn das ist es nicht.

Was das Tool liest

GIF wird nativ dekodiert, wo der Browser einen Dekoder dafür hat, und sonst von unserem eigenen Reader — eine Animation öffnet sich also überall gleich, statt als ihr erster Frame anzukommen. Animiertes WebP und APNG gehen immer über unseren eigenen Reader, und genau das hält Framezahl und Timing über die Engines hinweg identisch. Ein Detail ist erwähnenswert: Der native Dekoder meldet die Wiederholungszahl eines endlos laufenden GIFs als Unendlich, was keine Zahl ist, die eine GIF-Datei speichern kann — sie wird zurück auf null übersetzt, die formateigene Kodierung für endlos, statt als das Ergebnis irgendeiner Rechnung herausgeschrieben zu werden.

Größen- und Stapelgrenzen

• Kostenlos. Eine Datei bis 50 MB und bis zu 300 Frames, Ausgabe bis 2048 Pixel an der langen Kante. In voller Qualität und mit jedem Bedienelement dieser Seite — der kostenlose Plan ist kein Zuschnitt geringerer Qualität, sondern einer für eine Datei.
• Pro. Bis zu 20 Dateien auf einmal, als ein ZIP heruntergeladen, ohne auferlegte Maßgrenze. Der Stapel ist, was Pro hier kauft, denn einen Ordner voller Aufnahmen einzeln zuzuschneiden ist die eigentliche Arbeit.
• Die Grenze, die beide Pläne teilen. Jeder Frame wird während der Bearbeitung auf volle Farbe entpackt, also begrenzt ein Speicherbudget die Arbeit, bevor sie beginnt, statt den Tab stehenbleiben zu lassen, während der Fortschrittsring weiterdreht.

Nichts wird hochgeladen. Die Datei wird auf deiner Maschine Frame für Frame dekodiert, jeder Frame komponiert und geschnitten, eine Palette über die ganze Animation gebaut, unveränderte Bereiche wieder transparent markiert und das Ergebnis als Standard-GIF89a geschrieben. Alles läuft in einem Hintergrund-Thread, damit die Seite bedienbar bleibt, und der Schnitt selbst läuft auf deiner Grafikhardware, wo sie verfügbar ist.

Warum dieselbe Datei jedes Mal gleich zugeschnitten wird

• Ein deterministischer Quantisierer. Median Cut, nicht der zufallsbasierte neuronale Quantisierer der meisten GIF-Bibliotheken, also ergibt dieselbe Eingabe mit denselben Einstellungen immer byteidentische Ausgabe.
• Identische Ergebnisse auf jedem Pfad. Der grafikbeschleunigte und der Prozessor-Pfad müssen dieselben Bytes erzeugen, nicht bloß ähnliche — ein Pfad, der einen anderen Paletteneintrag wählt, zeigte sich als Farbflackern zwischen Frames.
• Geometrie gegen eine andere Implementierung geprüft. Der Zuschnitt wird Pixel für Pixel damit verglichen, wie libvips dasselbe Rechteck aus derselben Datei schneidet, und die Randerkennung gegen einen separaten Durchlauf, der jeden Pixel jedes Frames liest.

Was ein Zuschneider nicht verändern darf

Vier Dinge müssen exakt so herauskommen, wie sie hineingingen: die eigene Verzögerung jedes Frames, die gesamte Abspieldauer, die Schleifenzahl und welche Pixel transparent sind. Ein Tool, das beim Zuschneiden umtaktet, liefert ein völlig gültiges GIF, das nur mit der falschen Geschwindigkeit läuft; eines, das Transparenz plattmacht, liefert ein Bild mit einem weißen Kasten drumherum; eines, das die Schleifenzahl voreinstellt, macht aus einer dreimal laufenden Animation eine endlose. Alle vier werden hier bei jedem Lauf gemessen statt angenommen, und die Zahlen stehen in der Ergebniszeile, damit du sie lesen kannst.

Gemessene Ergebnisse

• Genauigkeit des Zuschnitts Null. Der größte Unterschied je Kanal zwischen unserem Zuschnitt und libvips, das dasselbe Rechteck schneidet, ist 0 von 255 — ein Zuschnitt tastet nichts neu ab, das ist also eine Gleichheit und keine Toleranz.
• Randerkennung Exakt an einem 160 mal 120 großen Testfall mit 40 mal 30 Rand: 40, 30, 80 mal 60, übereinstimmend mit einem unabhängigen Durchlauf über alle Pixel.
• Die Vereinigung über alle Frames 160 Pixel breit gegenüber den 10, die ein Durchlauf über einen einzelnen Frame ergäbe, an einem Testfall mit wanderndem Punkt — der Unterschied zwischen einem richtigen Zuschnitt und einem selbstsicher falschen.
• Tempo 100 Frames von 480×270 auf 400×200 zugeschnitten in 145 ms; die Analyse der ganzen Animation an derselben Datei in 68 ms.

Das Zuschneiden ist hardwarebeschleunigt, wo dein Gerät es hergibt, und der beschleunigte und der Rückfallpfad sind als byteidentisch verifiziert. Der Zuschnitt selbst wird Pixel für Pixel gegen eine unabhängige Bildbibliothek geprüft. Gemessen auf der Referenzmaschine: 100 Frames von 480×270 zugeschnitten in 145 ms. Läuft auf deinem Gerät, nicht auf unseren Servern.

• GIF-Skalierer
• GIF-Kompressor
• GIF-Ersteller
• Video zu GIF
• GIF-Editor
• Alle GIF-Tools