Zum Inhalt springen
websitefun.de

Werkzeug · Bilder

Animiertes GIF erstellen

Aus mehreren Bildern ein animiertes GIF bauen. Der Encoder rechnet im Browser, es wird nichts hochgeladen.

Läuft vollständig im Browser. Ihre Dateien verlassen das Gerät nicht.

Bilder hierher ziehen – die Reihenfolge lässt sich danach ändern

Mehrere Dateien möglich. Nichts wird hochgeladen.

Wann ein GIF die richtige Wahl ist und wann nicht

Das GIF-Format ist von 1987 und hat zwei Eigenschaften, die es bis heute am Leben halten: Es animiert, und es läuft in jeder Umgebung, die überhaupt Bilder anzeigt – in E-Mails, in Chatprogrammen, in Dokumentationen, in alten Foren. Kein Video-Codec kann das von sich behaupten.

Dafür zahlt es einen hohen Preis. Ein GIF speichert jedes Einzelbild vollständig, es gibt keine Kompression über die Zeit. Ein Video erkennt, dass sich zwischen zwei Bildern nur ein kleiner Teil verändert hat, und speichert nur die Differenz. Ein GIF kann das nicht. Deshalb ist eine fünf Sekunden lange Animation als GIF oft zehnmal so groß wie dieselbe Szene als stumme MP4-Datei.

ZweckRichtige Wahl
Kurze Bildschirmaufnahme in einer AnleitungGIF, wenn unter 3 Sekunden. Sonst Video.
Bewegtes Element in einer E-MailGIF. Videos werden in E-Mail-Programmen meist nicht abgespielt.
Ablauf in mehreren Schritten mit BeschriftungGIF mit langer Anzeigedauer, 800 bis 1500 ms je Bild.
Video mit Bewegung und FarbverläufenStumme MP4 oder WebM in Endlosschleife, deutlich kleiner.
Logo, das sich einmal aufbautAnimiertes SVG. Beliebig scharf, winzig.

Die drei Stellschrauben für die Dateigröße

Sie wirken nicht gleich stark. In dieser Reihenfolge:

  1. Die Breite. Die Datenmenge hängt an der Fläche. Von 960 auf 480 Pixel zu gehen entfernt drei Viertel aller Bildpunkte. Das ist mit Abstand der größte Hebel und bei einer Bildschirmaufnahme meist völlig unproblematisch.
  2. Die Anzahl der Bilder. Jedes Bild kostet vollen Platz. Bei einer Aufnahme mit 30 Bildern pro Sekunde lässt sich fast immer jedes zweite weglassen, ohne dass es auffällt.
  3. Die Farbanzahl. Weniger Farben heißt mehr Wiederholungen, und Wiederholungen sind genau das, was die Kompression im GIF findet. Bei Oberflächen und Grafiken sind 64 Farben oft nicht von 256 zu unterscheiden.

Warum 256 Farben die harte Grenze sind

GIF speichert kein Bild aus Farbwerten, sondern aus Verweisen auf eine Farbtabelle. Diese Tabelle hat höchstens 256 Einträge, weil ein Verweis genau ein Byte groß ist. Das ist keine Einstellung, sondern die Bauart des Formats.

Das Werkzeug bestimmt die Tabelle für alle Bilder gemeinsam, mit dem Median-Cut-Verfahren: Der Farbraum wird immer an der breitesten Stelle geteilt, bis die gewünschte Anzahl erreicht ist. Eine gemeinsame Tabelle für alle Bilder statt einer je Bild spart je Bild bis zu 768 Byte und verhindert, dass die Farben zwischen zwei Bildern springen.

Bei Fotos stößt das sichtbar an die Grenze: Ein Himmel mit sanftem Verlauf bekommt Streifen, weil die Zwischentöne fehlen. Wenn Ihr Material aus Fotos besteht, ist GIF das falsche Format – dann ist eine kurze Videodatei die ehrlichere Antwort.

Transparenz kennt im GIF nur an oder aus

Ein PNG kann einen Bildpunkt zu 40 Prozent durchsichtig machen. Ein GIF kann das nicht: Es hat genau einen Palettenplatz, der für „unsichtbar“ steht. Jeder Punkt ist entweder voll da oder gar nicht.

In der Praxis heißt das: Ein Logo mit harter Kante lässt sich sauber freistellen. Ein Logo mit weichem Schatten oder geglätteten Rundungen bekommt einen sichtbar harten, oft ausgefransten Rand. Wenn das stört, legen Sie das Motiv besser auf die Hintergrundfarbe, auf der es später steht, und schalten die Transparenz aus.

So gehen Sie vor

  1. Bilder in die Fläche ziehen. Alle sollten dasselbe Seitenverhältnis haben.
  2. Reihenfolge prüfen und mit den Pfeilen anpassen.
  3. Breite auf das einstellen, was das GIF später wirklich braucht.
  4. Anzeigedauer wählen: 70 bis 100 ms für Bewegung, 800 bis 1500 ms für Schritte.
  5. Auf „GIF bauen“ klicken, Vorschau prüfen, speichern.

Wenn Sie die Einzelbilder vorher noch zuschneiden müssen, damit alle gleich groß sind, erledigt das Bilder zuschneiden und skalieren. Was das Format historisch für das Web bedeutet hat und wo animierte GIFs heute noch Sinn ergeben, steht unter Animierte GIFs.

Häufige Fragen

Wie viele Bilder braucht eine flüssige Animation?

Für eine flüssige Bewegung etwa 12 bis 15 Bilder pro Sekunde, also eine Anzeigedauer von 70 bis 80 Millisekunden je Bild. Weniger wirkt ruckelig, mehr bringt kaum etwas, weil viele Betrachter Dauern unter 20 Millisekunden ohnehin auf 100 hochsetzen. Für eine Schrittfolge in einer Anleitung sind dagegen 800 bis 1500 Millisekunden je Bild richtig, damit man mitlesen kann.

Warum ist mein GIF so groß?

Drei Ursachen, in dieser Reihenfolge: zu viele Bildpunkte, zu viele Bilder, zu viele Farben. Ein GIF speichert jedes Bild vollständig, es gibt keine Videokompression über die Zeit. Halbe Kantenlänge bedeutet ein Viertel der Datenmenge – das ist der stärkste Hebel. Danach kommt die Bildanzahl, dann die Farbtabelle.

Wie viele Farben kann ein GIF?

Höchstens 256, das steht so im Format von 1987 und lässt sich nicht umgehen. Fotos sehen deshalb in einem GIF immer schlechter aus als in JPG. Für Bildschirmaufnahmen, Strichgrafiken und Logos reicht die Grenze dagegen bequem, dort kommt man oft mit 64 Farben aus.

Kann ich ein Video in ein GIF umwandeln?

Nicht mit diesem Werkzeug. Es baut ein GIF aus Einzelbildern, die Sie selbst mitbringen. Wenn Sie ein Video haben, ist ein GIF ohnehin selten die richtige Antwort: eine stumme MP4-Datei in Endlosschleife ist bei gleicher Länge und Qualität ein Vielfaches kleiner und wird von jedem Browser abgespielt.

Läuft die Animation endlos?

Wenn Sie den Haken für die Endlosschleife stehen lassen, ja. Ohne den Netscape-Erweiterungsblock, den das Werkzeug dafür schreibt, läuft ein GIF genau einmal durch und bleibt danach beim letzten Bild stehen.

Bleiben transparente Bereiche transparent?

Ja, wenn Sie die Transparenz einschalten. GIF kennt allerdings keine Halbtransparenz: ein Bildpunkt ist entweder ganz sichtbar oder ganz unsichtbar. Weiche Kanten aus einem PNG bekommen dadurch einen harten Rand. Bei Logos mit weichem Schatten sieht man das deutlich.