APNG oder GIF für kleine Webanimationen: Transparenz, Wiederholungen und Dateigröße

Ladeanimationen auf dem Bezahlbutton, ein Häkchen „In den Warenkorb gelegt“, ein Maskottchen auf einer leeren Seite, ein animiertes „Neu“-Badge in der Produktkarte: Solche kurzen Animationen landen aus Gewohnheit immer noch als GIF. Das Format funktioniert überall, stößt aber schnell an Grenzen – besonders bei weichen Kanten oder auf dunklem Hintergrund.

APNG (Animated PNG) ist das andere Format, das moderne Browser ohne JavaScript abspielen. Wann es GIF übertrifft, wann nicht, und worauf bei Wiederholungen, Timing und Dateigröße zu achten ist.

Was GIF kann und was nicht

Laut dem Bildformat-Leitfaden von MDN:

• Jeder GIF-Pixel ist ein 8-Bit-Index in einer Palette mit höchstens 256 Farben. Verläufe und viele Abstufungen werden durch Dithering angenähert.

• Transparenz ist alles oder nichts: Ein Paletteeintrag kann als transparent markiert werden; diese Pixel sind dann vollständig transparent. Teiltransparenz gibt es nicht.

Für die Oberfläche zählt vor allem der zweite Punkt. Geglättete Konturen, weiche Schatten und halbtransparente Glanzlichter brauchen partielle Alpha-Werte. Im GIF muss jedes Pixel entweder voll deckend oder unsichtbar sein – daher die Treppenkanten und der bekannte helle Hof um Sticker auf dunklem Hintergrund. Der Hof entsteht oft, wenn die Grafik vor dem Export gegen Weiß abgemischt und danach auf einen dunklen Untergrund gelegt wird.

Was APNG zusätzlich bietet

APNG erweitert PNG, deshalb können Frames in jedem PNG-Farbmodus vorliegen – inklusive True Color mit 8- oder 16-Bit-Alphakanal. Die Kompression bleibt verlustfrei. MDN nennt APNG passend für „einfache Animationen, die nicht mit anderen Abläufen oder einem Soundtrack synchronisiert werden müssen, etwa Fortschrittsanzeigen, Activity-Throbber und ähnliche Sequenzen“.

Das Bild darunter zeigt einen einzelnen Frame mit 320×270 Pixeln, geglätteter Kontur und weichem, halbtransparentem Schlagschatten. Für die GIF-Seite wurden halbtransparente Pixel zuerst auf eine weiße Matte gelegt und dann mit einer 1-Bit-Transparenzschwelle geschnitten – so verhält sich ein typischer GIF-Export. Rechts liegt das Original-PNG. Beide sitzen auf einem Hintergrund #1f2937; der markierte Bereich an der linken unteren Kontur ist 3× vergrößert. Beim GIF entsteht eine helle, ausgefranste Kante, der Schatten fehlt. Das PNG behält glatte Kanten und den Schatten.

Browserunterstützung

MDN listet APNG ab Chrome 59, Edge 12, Firefox 3, Opera 46 und Safari 8. Der MIME-Typ ist image/apng; die Dateiendung darf .png bleiben. Die Einbindung erfolgt wie bei jedem anderen Bild:

<img src="/img/loader.png" width="48" height="48" alt="Laden">

Wann GIF weiterhin sinnvoll ist

Muss eine Datei ein System passieren, das nur .gif akzeptiert – etwa ein Upload-Feld oder eine Drittanbieter-Integration –, bleibt GIF die sichere Wahl. Und wenn es rein um Bytes bei fotografischen oder detaillierten Animationen geht, verweisen die MDN-Hinweise darauf, dass animiertes WebP und AVIF besser komprimieren als beide. APNG liegt dazwischen: verlustfrei, voller Alphakanal und in aktuellen Browsern breit unterstützt.

Zu Stickern in Telegram

Eine häufige Frage: Eignet sich APNG für Telegram-Sticker? Nein. Laut der offiziellen Telegram-Dokumentation sind animierte Sticker im Format .TGS (vektorielle Animation auf Lottie-Basis), Videosticker in .WEBM mit VP9-Codec und statische Sticker als PNG oder WEBP. Für animierte und Videosticker gilt eine Obergrenze von 3 Sekunden. APNG ist also ein Thema für Websites, Onlineshops und Plattformen, die genau dieses Format erwarten – nicht für Telegram.

Wiederholungen und Timing

Zwei Details aus der Spezifikation lohnen den Blick:

• Anzahl der Wiederholungen. Laut der W3C-PNG-Spezifikation bedeutet der Wert 0 endlose Wiedergabe. Jede andere Zahl lässt die Animation nach dem letzten Durchlauf auf dem letzten Frame stehen. Für eine einmalige Mikroanimation – etwa ein Erfolgs-Häkchen – reicht Schleife 1 und ein ruhender Endzustand. Ladeanzeigen brauchen 0.

• Frame-Verzögerung. Die Verzögerung jedes Frames wird als Bruchteil einer Sekunde gespeichert (delay_num / delay_den). Viele Encoder schreiben sie in Hundertsteln, sodass 33 ms als 30 ms landen können. Vielfache von 10 ms (50, 80, 100) bleiben im File unverändert.

Wer zusätzlich prefers-reduced-motion respektieren will, kann mit <picture> ein Standbild einsetzen:

<picture>
  <source srcset="/img/mascot-still.png" media="(prefers-reduced-motion: reduce)">
  <img src="/img/mascot.png" alt="Winkendes Maskottchen">
</picture>

APNG aus PNG-Frames zusammenbauen

Jeden Frame als transparentes PNG in der endgültigen Größe exportieren und anschließend zusammensetzen. Kommandozeilen-Tools wie APNG Assembler passen gut in eine Build-Pipeline. Für Einzelfälle geht es im Browser schneller. Eine Option ist der APNG Maker von zippic: Die Bilder werden lokal im Browser verarbeitet und nicht hochgeladen. Einstellbar sind Canvas-Größe, Standardverzögerung, Verzögerung pro Frame, Schleifenanzahl und Füllfarbe.

Sinnvolle Anpassungen der Standardwerte:

• Canvas steht standardmäßig auf 640×480. Auf die Frame-Größe stellen. Frames werden passend skaliert und zentriert; abweichende Größen bekommen die Füllfarbe als Rand.

• Füllfarbe ist standardmäßig #00000000 (vollständig transparent). So belassen, wenn Alpha gewünscht ist.

• Standard-Frame-Verzögerung liegt bei 30 ms – für die meisten UI-Bewegungen zu schnell. Mit 80–100 ms starten und einzelne Frames in der Liste nachjustieren.

• Schleifenanzahl ist standardmäßig 0 (unendlich). Für einmalige Animationen auf 1 setzen.

Die Datei klein halten

True Color plus Alpha kann schwer werden – zuerst an der Quelle kürzen:

1. Canvas zuschneiden. Leere transparente Ränder kosten in jedem Frame Bytes.

2. Frames reduzieren. Ein Loader mit 10 Frames à 100 ms wirkt oft genauso gut wie 20 Frames à 50 ms, bei etwa der Hälfte der Framedaten.

3. Halten statt wiederholen. Für eine Pause einen Frame mit längerer Verzögerung nutzen, nicht mehrere identische Frames.

4. Danach komprimieren. Der Kompressor auf der zippic-Startseite bietet APNG als Ausgabeformat mit Qualitätsregler. Im gezeigten Test ging das 10-Frame-Beispiel von 15,33 KB auf 5,52 KB bei 75 % Qualität. Das Ergebnis hängt stark von der Grafik ab – die Ausgabe daher prüfen, ob Animation und Kanten noch stimmen.

Ein Praxisbeispiel: LINE-Sticker

Eine Plattform, die APNG verlangt, ist LINE. Der Creators Market akzeptiert animierte Sticker nur als APNG, mit veröffentlichter Spezifikation: 5–20 Frames pro Sticker, 1–4 Schleifen, höchstens 4 Sekunden Gesamtwiedergabe über alle Schleifen, maximal 320×270 px mit mindestens einer Seite von 270 px oder mehr, transparenter Hintergrund und bis zu 1 MB pro Datei. Ein GIF lässt sich nicht hochladen, und ein APNG mit der Standard-Endlosschleife wird ebenfalls abgelehnt. Die Zahlen sind ein nützlicher Budget-Rahmen für jede kleine, sich wiederholende UI-Animation – auch ohne Sticker-Veröffentlichung.

Kurze Entscheidungshilfe

• Weiche Kanten, Teiltransparenz oder dunkler bzw. wechselnder Hintergrund: APNG

• Muss durch eine GIF-only-Pipeline: GIF

• Bytes zählen am meisten und Fallbacks sind möglich: animiertes WebP oder AVIF erwägen

• Einmalige Animation, die in einem Ruhezustand enden soll: APNG mit Schleifenanzahl 1

Quellen

• MDN, Image file type and format guide: https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types

• W3C, PNG Specification (Third Edition), acTL- und fcTL-Chunks: https://www.w3.org/TR/png-3/

• Telegram, Stickers: https://core.telegram.org/stickers

• LINE Creators Market, Animated sticker guidelines: https://creator.line.me/en/guideline/animationsticker/