Animierte GIFs heute: wo sie funktionieren und wie Sie ein GIF verkleinern

Um ein GIF zu verkleinern, reduzieren Sie, was die Datei speichern muss: weniger Frames, weniger Pixel pro Frame und weniger Farben. Kürzen, jeden zweiten Frame weglassen, verkleinern und eine kleinere Palette machen ein GIF oft deutlich leichter, ohne dass die Animation leidet. Wo andere Formate angenommen werden, ist animiertes WebP oder ein kurzes Video meist der grössere Schritt.

Dieser Ratgeber zeigt, wo animierte GIFs noch gute Arbeit leisten, warum das Format so schwere Dateien erzeugt, wie Sie eines mit dem GIF- und Animationseditor Schritt für Schritt verkleinern, wann ein Standbild aus Frames extrahieren die bessere Wahl ist und wie Animationen barrierefrei bleiben. Alles Beschriebene läuft in Ihrem Browser; die Dateien werden nie hochgeladen.

Wo animierte GIFs noch gut funktionieren

GIF stammt aus den späten 1980er-Jahren und ist trotzdem das einzige Animationsformat, das fast jedes Programm ohne Player anzeigt. Darin liegt sein ganzer Vorteil, und das erklärt, wo es weiterhin hingehört:

• E-Mail-Newsletter. Die meisten E-Mail-Programme zeigen ein animiertes GIF direkt in der Nachricht; Videos laufen dort selten. Manche Programme zeigen nur den ersten Frame – er muss die Botschaft also allein tragen.
• Anleitungen und Hilfeseiten. Eine Schleife von drei Sekunden mit einem Klick in einem Einstellungsfenster erklärt mehr als ein Absatz – und viele Wiki- und Helpdesk-Systeme nehmen Bilder an, aber keine Videos.
• Chat und interne Werkzeuge. Messenger, Ticketsysteme und Projektboards zeigen GIFs direkt in der Vorschau.

Auf Ihrer eigenen Website sieht es anders aus: Dort bestimmen Sie das Markup, und ein Video oder ein animiertes WebP erledigt fast immer dieselbe Aufgabe mit einer kleineren Datei. Der Vergleich von GIF, Video und animiertem WebP geht diese Wahl im Detail durch.

Warum GIF-Dateien so gross werden

Ein GIF speichert jeden Frame als Bild mit höchstens 256 Farben, verlustfrei komprimiert – effizient für einfache Grafiken Ende der 1980er-Jahre und der Grund, warum ein paar Sekunden Bildschirmaufnahme mehr wiegen können als das Video, aus dem sie stammen. Das Format ist in der GIF89a-Spezifikation auf w3.org (Englisch) festgelegt; seine Grenzen in der Praxis:

• 256 Farben pro Frame. Fotos, Verläufe und Schatten haben weit mehr. Der Encoder wählt eine Palette und ahmt den Rest mit Dithering nach – feinen Punktmustern, die körnig wirken und sich schlecht komprimieren lassen.
• Verlustfrei, Frame für Frame. GIF komprimiert Flächen gleicher Pixel gut und Bildrauschen schlecht. Ein Encoder kann nur den Teil speichern, der sich seit dem vorherigen Frame geändert hat – doch Kamerabilder ändern sich überall, ständig.
• Jedes Pixel mal jeder Frame. Die Grösse wächst mit Breite × Höhe × Anzahl Frames. Die doppelte Breite heisst ungefähr viermal so viele Pixel.
• Kein Ton, einfache Transparenz. Ein GIF hat keine Tonspur, und ein Pixel ist entweder ganz transparent oder ganz deckend – weiche Schatten werden zu harten, ausgefransten Kanten.

GIF verkleinern: die Stellschrauben

Jede Stellschraube entfernt einen anderen Teil dessen, was die Datei speichert. Gehen Sie ungefähr in dieser Reihenfolge vor – die ersten sparen viel und fallen den Betrachtern kaum auf:

Ganz ohne Änderung optimiert das Werkzeug die Animation einfach neu und gibt nie eine grössere Datei als das Original zurück.

Schritt für Schritt: ein GIF im Browser verkleinern

1. 1

   Animation öffnen

   Öffnen Sie den GIF- und Animationseditor und fügen Sie ein animiertes GIF, WebP oder PNG hinzu. Das Werkzeug bearbeitet eine Animation pro Durchgang und zeigt ihre Frames auf einer Zeitleiste, nummeriert ab 1.

2. 2

   Weglassen, was niemand braucht

   Legen Sie unter Frames den ersten und den letzten beibehaltenen Frame fest, um Vorlauf und Pause am Ende zu entfernen, und tragen Sie einzelne zu löschende Frames ein. Versuchen Sie dann Jeden n-ten Frame weglassen mit 2 oder 3: Die Dauer eines weggelassenen Frames geht an den Frame davor, die Animation behält also ihre Länge.

3. 3

   Frames verkleinern

   Schneiden Sie auf den Bereich zu, in dem etwas geschieht, und ändern Sie dann die Grösse – für einen Newsletter oder eine Hilfeseite reicht die Breite, die man tatsächlich sieht. Unter Interpolation hält Nächster Nachbar (Pixel-Art) Pixelgrafiken scharf; Lanczos (am schärfsten) passt für alles andere.

4. 4

   Farben reduzieren

   Senken Sie unter Formateinstellungen → GIF die Farben schrittweise. Aufnahmen flacher Oberflächen sehen oft mit weit weniger als 256 unverändert aus; fotoähnliche Aufnahmen brauchen mehr. Dithering Keine ergibt bei flachen Grafiken die kleinsten Dateien, Floyd–Steinberg glättet Verläufe, und die Palette Eine für alle Frames hält die Farben über die Schleife ruhig.

5. 5

   Wiedergaben und Format wählen

   Wiedergaben legt fest, wie oft die Animation läuft (0: endlos). Behalten Sie unter Speichern als GIF für E-Mail und Chat, oder wählen Sie WebP, wo es angenommen wird.

6. 6

   Vergleichen und das Beste behalten

   Vergleichen Sie das Ergebnis mit dem Original. Jeder Durchgang ist ein Vorgang; eine andere Einstellung ist ein weiterer Durchgang.

Die Animation wird von Ihrer Festplatte gelesen, im Speicher Ihres Browsers bearbeitet und wieder auf Ihrem Gerät gespeichert; über die Animation erfährt unser Server nur, dass das Werkzeug lief. Wie das funktioniert, erklären wo meine Bilder verarbeitet werden, ausführlicher Bilder im Browser bearbeiten: so funktioniert es und die Sicherheitsseite. Prüfen Sie vor dem Teilen einer Bildschirmaufnahme auch, was sie nebenbei zeigt: Namen, E-Mail-Adressen, eine Benachrichtigung, die kurz aufgetaucht ist.

Barrierefreie GIFs: Blitze, Bewegung und Alternativen

Eine Animation, die sich von selbst bewegt, kann ablenken, und eine, die blitzt, kann schaden. Die Web Content Accessibility Guidelines (WCAG 2.2) enthalten zwei Erfolgskriterien, die direkt für GIFs gelten:

• Höchstens drei Blitze pro Sekunde. Erfolgskriterium 2.3.1 (Stufe A) besagt, dass Inhalte in keinem Zeitraum von einer Sekunde mehr als dreimal blitzen dürfen, ausser die Blitze bleiben unter den festgelegten Schwellenwerten – siehe Understanding «Three Flashes or Below Threshold» auf w3.org (Englisch).
• Längere Bewegung muss sich stoppen lassen. Nach Erfolgskriterium 2.2.2 (Stufe A) braucht bewegter Inhalt, der automatisch startet, länger als fünf Sekunden dauert und neben anderem Inhalt erscheint, eine Möglichkeit zum Pausieren, Stoppen oder Ausblenden. Ein GIF auf einer Seite hat keine Pausentaste – halten Sie Schleifen also kurz, setzen Sie Wiedergaben auf wenige Durchläufe statt endlos, oder zeigen Sie ein Standbild, das zur Animation verlinkt.

Geben Sie der Animation einen Alternativtext, der sagt, was sie zeigt («Ein Klick auf Exportieren öffnet das Formatmenü»), und legen Sie nie Informationen nur in die späteren Frames: Wer ein Standbild, nur den ersten Frame oder gar nichts sieht, soll die Botschaft trotzdem erhalten.

Alternativen: Standbild, animiertes WebP oder Video

Manchmal ist die leichteste Animation gar keine. Frames extrahieren speichert die Frames eines animierten GIF, WebP oder PNG – oder eines Videos – als einzelne Bilder: alle Frames, jeden n-ten, einen Bereich oder die Frames zu bestimmten Zeitpunkten, als JPG, PNG, WebP, AVIF und weitere Formate. Typische Einsätze:

• Ein Vorschau- oder Ersatzbild für E-Mail-Programme, die nur den ersten Frame zeigen, oder für ein gedrucktes Handbuch.
• Ein sauberer Frame für Orte, an denen Animationen nicht erlaubt sind.

Animiertes WebP speichert volle Farben und weiche Transparenz und ist meist deutlich kleiner als dasselbe GIF. Alle aktuellen grossen Browser zeigen es an; E-Mail-Programme und manche Apps tun das nicht verlässlich. Der GIF- und Animationseditor speichert jede Animation, die er öffnet, als WebP (oder als animiertes PNG, APNG), und Video zu GIF kann aus einem Clip direkt WebP schreiben. Der Vergleich der Bildformate stellt WebP neben JPEG, PNG und AVIF.

Ein kurzes Video in MP4 oder WebM ist auf Websites meist die kleinste Möglichkeit überhaupt. GIF zu Video macht aus einem animierten GIF, WebP oder PNG ein Video mit demselben Timing – als MP4 oder WebM, je nachdem, was Ihr Browser erstellen kann. Die Videowerkzeuge brauchen einen aktuellen Browser; siehe unterstützte Browser.

Häufige Fragen

Warum ist mein GIF grösser als das Video, aus dem es stammt?

Weil ein Video die Änderungen zwischen den Frames verlustbehaftet speichert, ein GIF dagegen die Pixel jedes Frames verlustfrei und mit höchstens 256 Farben. Kamerabilder und scrollende Bildschirmaufnahmen ändern fast jedes Pixel, also muss das GIF fast alles immer wieder speichern.

Ändert die Geschwindigkeit die Dateigrösse?

Kaum. Die Geschwindigkeit ändert nur, wie lange jeder Frame gezeigt wird. Um Platz zu sparen, reduzieren Sie die Anzahl Frames – durch Kürzen oder mit Jeden n-ten Frame weglassen.

Laufen animierte GIFs in E-Mail-Newslettern?

In den meisten E-Mail-Programmen ja. Manche zeigen nur den ersten Frame – gestalten Sie ihn deshalb als vollständige Botschaft. Video und animiertes WebP sind in E-Mails weit weniger verlässlich.

Beginnen Sie mit den Animationswerkzeugen – welche Pläne den GIF- und Animationseditor umfassen, steht auf der Preisseite – oder erstellen Sie ein kostenloses Konto. Wenn Sie Newsletter und Hilfeinhalte für Kundinnen und Kunden vorbereiten, zeigt die Seite für Agenturen, wie die Werkzeuge in diese Arbeit passen.