Eine animierte GIF zeigt Bewegung, ein PNG zeigt ein einzelnes Standbild. Genau aus diesem Unterschied entsteht die häufigste Überraschung bei der Umwandlung: Aus einer GIF mit zwanzig Einzelbildern wird ein einziges PNG, und die Animation ist weg. Das ist kein Fehler des Konverters, sondern eine Eigenschaft der beteiligten Formate. Dieser Ratgeber erklärt, wie eine animierte GIF technisch aufgebaut ist, was beim Umwandeln über die Canvas-Schnittstelle des Browsers genau passiert und welche Wege es gibt, wenn Sie nicht nur ein Bild, sondern alle Frames oder eine animierte Ausgabe behalten möchten.
Wie eine animierte GIF aufgebaut ist
Eine GIF nach der Spezifikation GIF89a ist im Kern ein Container für mehrere Bilder. Sie beginnt mit einem Header und einer globalen Farbtabelle und enthält danach eine Folge sogenannter Image Descriptors, von denen jeder ein Einzelbild, einen Frame, beschreibt. Damit aus diesen Bildern eine Animation wird, sorgt eine Erweiterung, die Graphic Control Extension, vor jedem Frame für zwei zentrale Angaben: die Verzögerung bis zum nächsten Bild, gemessen in Hundertstelsekunden, und die Art, wie der vorherige Frame entsorgt wird, das sogenannte Disposal.
Eine GIF kann also mehrere Dutzend oder Hunderte Frames enthalten, jeweils mit eigener Anzeigedauer. Ein Loop-Marker, eine Netscape-Application-Extension, legt fest, wie oft die Animation wiederholt wird. Dieser Aufbau aus Frame, Verzögerung und Wiederholung ist das, was eine GIF lebendig macht. Wichtig ist die Erkenntnis dahinter: Die Bewegung steckt nicht in einem einzelnen Bild, sondern in der Abfolge vieler Bilder und der Zeit zwischen ihnen.
PNG ist ein Einzelbildformat
PNG, das Portable Network Graphics Format, ist in der internationalen Norm ISO 15948 beschrieben und wurde ursprünglich als verlustfreier Ersatz für GIF entworfen. Ein PNG speichert genau ein rechteckiges Rasterbild mit Farbkanälen und einem optionalen Alphakanal für Transparenz. Im klassischen Sinn kennt PNG keine Frames, keine Verzögerungen und keine Wiederholung. Es ist ein Standbild, kein Film.
Diese Beschränkung ist gewollt. PNG glänzt mit verlustfreier Kompression, voller Farbtiefe und sauberer Alphatransparenz, also genau dort, wo GIF mit seinen maximal 256 Farben pro Frame an Grenzen stößt. Für ein einzelnes Bild, etwa ein Logo mit weichen Kanten oder einen Screenshot, ist PNG ausgezeichnet. Für eine Animation ist es im Grundzustand schlicht nicht gemacht. Genau deshalb entsteht beim Umwandeln einer animierten GIF eine Entscheidung: Welcher der vielen Frames soll das eine PNG werden?
Was beim Umwandeln über Canvas passiert
Ein clientseitiger Konverter im Browser, wie er auf gif-png.de läuft, nutzt für die Umwandlung die HTML-Canvas. Der Ablauf ist denkbar schlicht: Die GIF wird in ein Bildelement geladen, dann auf eine Zeichenfläche, die Canvas, übertragen, und anschließend ruft das Tool die Methode toDataURL oder toBlob mit dem Typ image/png auf. Heraus kommt eine PNG-Datei, die exakt das wiedergibt, was im Moment des Zeichnens auf der Canvas zu sehen war.
Und genau hier liegt der entscheidende Punkt. Wenn der Browser eine animierte GIF in ein gewöhnliches Bildelement lädt und diese sofort auf die Canvas gezeichnet wird, ist der sichtbare Zustand in aller Regel der erste Frame. Die Canvas selbst hat keinen Begriff von Animation, sie ist eine statische Pixelfläche. Sie nimmt eine Momentaufnahme auf. Damit speichert der Konverter das erste, also das aktuell sichtbare Bild der Animation als PNG. Die übrigen Frames, ihre Verzögerungen und der Loop existieren auf der Canvas nicht und können daher auch nicht ins PNG gelangen.
Das ist keine Schwäche, sondern eine ehrliche Konsequenz der Formate. Ein PNG kann nun einmal nur ein Bild fassen. Für die meisten Anwendungsfälle, bei denen ein Standbild aus einer GIF gewünscht ist, ist genau das das gewünschte Ergebnis: ein scharfes, verlustfreies Einzelbild mit Transparenz, ohne Animation.
Alle Frames behalten: die drei Wege
Wenn ein einzelnes Bild nicht reicht, gibt es im Wesentlichen drei Möglichkeiten, mit den Einzelbildern einer animierten GIF umzugehen. Welcher Weg passt, hängt davon ab, ob Sie die Frames einzeln, alle auf einmal oder als neue Animation brauchen.
1. Frames einzeln extrahieren
Ein Frame-Extraktor oder GIF-Decoder liest jedes Einzelbild aus der GIF und speichert es als eigene PNG-Datei. Das verbreitetste Werkzeug dafür ist ffmpeg. Mit einem einzigen Befehl zerlegt es die Animation in durchnummerierte Bilder:
ffmpeg -i animation.gif frame_%03d.pngAus einer GIF mit fünfundzwanzig Frames entstehen so die Dateien frame_001.png bis frame_025.png. Der Platzhalter %03d sorgt für eine dreistellige, fortlaufende Nummerierung, sodass die Reihenfolge erhalten bleibt. Jede dieser PNG-Dateien ist ein verlustfreies Standbild eines Animationsschritts. Wer im Browser bleiben möchte, kann auf eine JavaScript-Bibliothek zurückgreifen, die das GIF89a-Format dekodiert und jeden Frame einzeln auf eine Canvas legt, um ihn dann als PNG zu exportieren. Das Prinzip ist dasselbe, nur eben clientseitig.
2. Frames in einem Sprite-Sheet bündeln
Für Spiele und Animationen im Web werden die Einzelbilder oft nicht getrennt, sondern in einem Sprite-Sheet zusammengefasst, also einem großen Bild, das alle Frames nebeneinander oder in einem Raster enthält. Ein solches Sheet lässt sich als eine einzige PNG mit Transparenz speichern und im Spiel oder per CSS Frame für Frame anzeigen. Den Aufbau übernehmen spezialisierte Sprite-Tools, die zuvor extrahierten Einzelbilder werden dabei zu einem PNG montiert.
3. Animation als animierbares Format ausgeben
Soll die Bewegung erhalten bleiben, ist die Umwandlung in ein einzelnes statisches Bild der falsche Weg. Stattdessen wählen Sie ein Format, das wie GIF mehrere Frames mit Verzögerungen speichert, aber moderner ist. Die drei wichtigsten Kandidaten sind APNG, animiertes WebP und animiertes AVIF. Sie behalten die Animation und liefern je nach Format bessere Farben, kleinere Dateien oder beides.
APNG, WebP und AVIF als animierbare Alternativen
APNG, das Animated Portable Network Graphics Format, ist eine Erweiterung von PNG. Es packt mehrere Frames samt Verzögerungen in eine Datei und bleibt dabei abwärtskompatibel: Ein Programm, das APNG nicht kennt, zeigt einfach den ersten Frame als gewöhnliches PNG an. APNG erbt von PNG die verlustfreie Kompression, die volle Farbtiefe und die saubere Alphatransparenz. Damit löst es zwei alte GIF-Schwächen auf einmal, die Beschränkung auf 256 Farben pro Frame und die nur einstufige Transparenz. Moderne Browser unterstützen APNG.
Animiertes WebP und animiertes AVIF gehen noch einen Schritt weiter. Beide nutzen Kompressionsverfahren aus der Videowelt und erzeugen bei gleicher Qualität meist deutlich kleinere Dateien als GIF oder APNG. WebP ist breit unterstützt und ein guter Allrounder, AVIF erreicht bei aufwendigen Bildern oft die beste Kompression, ist aber noch nicht überall verfügbar. Die Wahl ist damit ein Abwägen zwischen Kompatibilität und Dateigröße: APNG für maximale Verträglichkeit im PNG-Umfeld, WebP für einen guten Mittelweg, AVIF für kleinste Dateien dort, wo die Unterstützung gesichert ist.
Ziel und passendes Format im Überblick
Welches Format das richtige ist, ergibt sich aus dem Ziel. Die folgende Tabelle ordnet die häufigsten Vorhaben dem jeweils passenden Format zu und nennt den entscheidenden Hinweis dazu.
| Ziel | Passendes Format | Hinweis |
|---|---|---|
| Standbild, Vorschau, Thumbnail | PNG (ein Frame) | Erster sichtbarer Frame wird über Canvas gespeichert |
| Alle Frames einzeln analysieren | PNG je Frame | Per Frame-Extraktor oder ffmpeg, durchnummeriert |
| Sprite-Sheet für Spiele | PNG (Raster) | Frames extrahieren, dann zu einem Sheet montieren |
| Animation verlustfrei behalten | APNG | PNG-Erweiterung, volle Farben, fällt auf ersten Frame zurück |
| Animation klein und modern | WebP (animiert) | Deutlich kleiner als GIF, breite Browser-Unterstützung |
| Animation kleinstmöglich | AVIF (animiert) | Beste Kompression, Unterstützung vorab prüfen |
Wann ein Einzelbild reicht und wann nicht
Am Ende läuft alles auf eine Frage hinaus: Ist die Bewegung Teil des Inhalts oder nicht? Solange Sie nur ein repräsentatives Bild brauchen, reicht ein einzelnes PNG vollkommen aus und ist sogar die sauberere Lösung, weil das Ergebnis verlustfrei, scharf und transparent ist.
- Ein Einzelbild reicht: für eine Vorschau in einer Galerie, ein Thumbnail, ein Standbild als Platzhalter, ein repräsentatives Posterbild oder wenn ohnehin nur ein Moment der Animation gemeint ist.
- Alle Frames sind nötig: wenn Sie einen Bewegungsablauf Bild für Bild analysieren, ein Sprite-Sheet bauen, die Animation in einem Schnittprogramm weiterverarbeiten oder sie als APNG, WebP oder AVIF erneut animiert ausgeben wollen.
- Im Zweifel zuerst extrahieren: Wer unsicher ist, sichert sich die Einzelbilder einmal per Frame-Extraktor, bevor die GIF gelöscht wird. Aus den Frames lässt sich später jedes Ziel ableiten, aus einem einzelnen PNG dagegen nie wieder die Animation.
Häufige Fragen
Warum bekomme ich beim Umwandeln einer animierten GIF nur ein einziges PNG?
Weil PNG im klassischen Sinn ein Standbildformat ist und genau ein Bild speichert. Eine animierte GIF besteht dagegen aus vielen Einzelbildern, die nacheinander abgespielt werden. Beim Umwandeln über die Canvas-Schnittstelle des Browsers wird der zu diesem Zeitpunkt sichtbare Frame, in der Regel das erste Bild, in den Zeichenbereich gezeichnet und als PNG exportiert. Die übrigen Frames und die Verzögerungen zwischen ihnen gehen dabei verloren, weil PNG sie schlicht nicht abbilden kann.
Wie bekomme ich alle Frames einer animierten GIF einzeln als PNG?
Dafür brauchen Sie einen Frame-Extraktor oder einen GIF-Decoder, der die einzelnen Bilder aus der GIF herausliest und jedes separat als PNG speichert. Am verbreitetsten ist ffmpeg mit dem Befehl ffmpeg -i animation.gif frame_%03d.png, der jedes Einzelbild als durchnummerierte PNG-Datei ablegt. Auch viele Bildbearbeitungsprogramme zeigen eine GIF als Ebenenstapel an, in dem jede Ebene einem Frame entspricht und einzeln exportiert werden kann.
Welcher Frame wird bei der Browser-Umwandlung als PNG gespeichert?
Standardmäßig der erste Frame, denn beim Laden eines Bildes über das HTMLImageElement zeigt der Browser zunächst das erste Einzelbild der Animation an. Wird genau dieser Zustand auf die Canvas gezeichnet und exportiert, landet das erste Bild im PNG. Es ist dieser sichtbare Frame, der gespeichert wird, nicht etwa eine Mischung aus allen Bildern.
Was ist APNG und warum ist es relevant?
APNG steht für Animated Portable Network Graphics und ist eine Erweiterung des PNG-Formats, die mehrere Frames mit Verzögerungen in einer einzigen Datei speichert. Eine APNG behält damit die Animation, anders als eine gewöhnliche PNG. Sie wird von modernen Browsern wie Firefox, Chrome und Safari unterstützt und ist die naheliegende Wahl, wenn Sie eine animierte GIF verlustfrei und mit voller Farbtiefe als animierte Datei behalten möchten.
Wann reicht ein einzelnes Standbild und wann brauche ich alle Frames?
Ein einzelnes Bild reicht, wenn Sie nur eine Vorschau, ein Thumbnail oder ein repräsentatives Standbild der Animation benötigen, etwa für eine Bildergalerie oder als Platzhalter. Alle Frames brauchen Sie, sobald die Bewegung selbst der Inhalt ist: zum Analysieren eines Bewegungsablaufs, zum Aufbau eines Sprite-Sheets für Spiele oder wenn Sie die Animation in einem anderen Format wie APNG oder WebP weiterverwenden wollen.
Ist WebP oder AVIF besser als APNG für animierte Bilder?
Das hängt vom Anwendungsfall ab. Animiertes WebP und animiertes AVIF erzeugen bei gleicher Qualität meist deutlich kleinere Dateien als APNG, weil sie modernere Kompressionsverfahren nutzen. APNG hat dafür den Vorteil, technisch ein PNG zu sein und in Umgebungen zu funktionieren, die WebP oder AVIF noch nicht kennen. Für maximale Kompatibilität greifen Sie zu APNG, für minimale Dateigröße zu WebP oder AVIF.
Quellen
- GIF89a Specification: Graphics Interchange Format, CompuServe / W3C
- APNG Specification: Animated Portable Network Graphics, Mozilla
- ISO/IEC 15948: Portable Network Graphics (PNG), ISO
- Canvas API und Bildformate im Web, MDN Web Docs
Verwandte Artikel
Jetzt GIF in PNG umwandeln
Verlustfreies Standbild aus jeder GIF, mit Transparenz und voller Farbtiefe. Komplett lokal im Browser, ohne Upload und ohne Anmeldung.
Zum Konverter