APNG (Animated Portable Network Graphics) ist eine 2006 eingeführte Erweiterung des PNG-Standards, die mehrere PNG-Frames zu einer Animation zusammenführt und dabei die volle Farbtiefe und den Alpha-Kanal von PNG beibehält – als direkter technischer Nachfolger des GIF-Formats für hochwertige Web-Animationen.
Rubrik: Ausgabeformate & Technische Standards · Unterrubrik: Bild-Dateiformate · Niveau: Fortgeschritten Synonyme / Auch bekannt als: .apng, .png (APNG ist kompatibel mit PNG-Dateiendung), Animated PNG
Was ist APNG?
APNG wurde 2004 von Stuart Parmenter und Vladimir Vukićević bei Mozilla entwickelt und 2006 als Erweiterungsvorschlag für den PNG-Standard veröffentlicht. Das W3C-Normierungsgremium lehnte APNG zunächst ab (zugunsten von MNG, das sich nie durchsetzte), doch die Browser-Unterstützung wuchs organisch: Firefox unterstützte APNG ab 2007, Safari ab 2008. Chrome hinkte nach, unterstützt es seit Version 59 (2017) – was APNG endlich universal verfügbar machte.
APNG ist rückwärtskompatibel mit PNG: Ein Browser oder Programm, der APNG nicht versteht, zeigt den ersten Frame als statisches Bild an. Das macht APNG zum „Progressive Enhancement"-Format: In unterstützenden Browsern sieht man die Animation; in nicht unterstützenden Viewern ein statisches Standbild.
Der entscheidende Vorteil gegenüber GIF: APNG unterstützt 24-Bit-Farbe (16,7 Millionen Farben statt 256) und einen vollständigen 8-Bit-Alpha-Kanal (weiche Transparenz statt binärer An/Aus-Transparenz). Das ermöglicht weiche Schatten, Verläufe und semitransparente Animationen, die mit GIF unmöglich sind.
Technische Eigenschaften
| Eigenschaft | Wert |
|---|---|
| Kompressionstyp | Verlustfrei (DEFLATE, wie PNG) |
| Farbtiefe | Bis 24 Bit (wie PNG-32) |
| Transparenz | Vollständig (8-Bit Alpha-Kanal) |
| Animation | Ja (mehrere PNG-Frames mit Zeitsteuerung) |
| Maximale Auflösung | 2.147.483.647 × 2.147.483.647 Pixel (theoretisch) |
| Rückwärtskompatibilität | Ja (statisches Bild in nicht-APNG-Browsern) |
| Schleife | Ja (0 = unbegrenzt, N = N-mal) |
| Framerate | Beliebig (ms-Präzision) |
| Browser-Support | Chrome 59+, Firefox 3+, Safari 8+, Edge 79+, iOS Safari 8+ |
Dateigröße-Vergleich (3 Sekunden Animation, 480×270 px, 15 FPS):
- GIF: ca. 2–5 MB (nur 256 Farben)
- APNG: ca. 1,5–3 MB (volle Farbe, bessere Qualität)
- Animiertes WebP: ca. 500 KB–1,5 MB
- MP4 (H.264): ca. 200–500 KB
APNG vs. GIF – Qualitätsvergleich:
- GIF: 256 Farben mit Dithering → körnige Fotoanimationen
- APNG: Volle PNG-Qualität → flüssige Farbverläufe, scharfe Grafiken
- GIF: Binäre Transparenz (Pixel ist entweder 100% transparent oder opak)
- APNG: Volle Alpha-Transparenz (0–255 pro Pixel) → weiche Kanten, Schatten
Frame-Differenz-Optimierung: APNG-Encoder können nur die geänderten Bildbereiche zwischen Frames speichern (Delta-Frames), was die Dateigröße bei Animationen mit statischem Hintergrund erheblich reduziert.
Einsatzgebiete
- Web-Lade-Animationen und Spinner: APNG ist ideal für Lade-Animationen, die einen transparenten Hintergrund und weiche Kanten erfordern – auf jedem Website-Hintergrund korrekt dargestellt, ohne weiße GIF-Ränder.
- Sticker und Emoji-Animationen: Animierte Sticker in Apps wie iMessage, WhatsApp und Telegram nutzen APNG aufgrund der Transparenz-Unterstützung und hohen Bildqualität.
- App-Store-Vorschau-Animationen: Apple App Store, Google Play und andere Plattformen nutzen APNG für animierte App-Icons und Demo-Animationen.
- Social Media Sticker: Pinterest, Instagram und andere Plattformen unterstützen APNG für animierte Story-Sticker und Overlay-Elemente mit Transparenz.
- Animierte Logos und Brand Assets: Für Websites, die ein animiertes Logo mit transparentem Hintergrund benötigen (ohne GIF-Qualitätsprobleme), ist APNG die bevorzugte Wahl.
In der Praxis
Adobe Photoshop:
- Datei > Exportieren > Für Web speichern (Legacy): Im Format-Dropdown "PNG-24" wählen, dann Animation aktivieren
- Hinweis: Photoshop unterstützt APNG-Export nicht nativ im modernen Export-Dialog. Alternativ:
- Timeline-Animation erstellen, dann als Video rendern und mit APNG-Tool konvertieren
APNG Assembler (kostenlos, Windows/macOS/Linux):
- Einzelne PNG-Frames zu APNG zusammenführen
- Optimierung: Automatische Delta-Frame-Berechnung
- Download: https://apngasm.sourceforge.net
ezgif.com (Online-Tool):
- GIF zu APNG konvertieren: https://ezgif.com/gif-to-apng
- PNG-Frames zu APNG: https://ezgif.com/apng-maker
Figma + Plugin:
- Figma-Plugin „APNG Exporter" ermöglicht Animation-Export aus Figma-Frames
Adobe After Effects → APNG:
- Aus AE als PNG-Sequenz exportieren
- APNG Assembler für die Zusammenführung verwenden
Command Line (apngasm):
apngasm output.apng frame1.png frame2.png frame3.png -d 50(d = Delay in ms)
Vergleich & Abgrenzung
| Format | Farben | Transparenz | Dateigröße | Browser-Support |
|---|---|---|---|---|
| APNG | 16,7 Millionen | Voll (Alpha) | Mittel | Universal (Chrome 59+) |
| GIF | 256 | Binär | Groß | Universal |
| Animiertes WebP | 16,7 Millionen | Voll | Klein | Universal |
| CSS-Animation | – | – | Sehr klein | Universal |
| MP4 (H.264) | 16,7 Millionen | Nein | Sehr klein | Universal |
Wann APNG wählen: Animationen mit Transparenz, Sticker, einfache Ladeanimationen, wenn WebP-Animation nicht gewünscht oder wenn maximale Kompatibilität mit transparenter Animation gefragt ist.
Wann kein APNG wählen: Für Video-ähnliche Animationen ist MP4 um ein Vielfaches effizienter. Für Web-Performance-Optimierung bietet animiertes WebP bessere Kompression.
Häufige Fragen (FAQ)
Ist APNG ein offizieller PNG-Standard? APNG wurde nicht vom W3C in die offizielle PNG-Spezifikation aufgenommen, ist aber als Erweiterung allgemein anerkannt und von allen modernen Browsern und Betriebssystemen unterstützt. Die rückwärtskompatible Struktur (APNG ist eine gültige PNG-Datei) hat zur Verbreitung beigetragen, auch ohne formale Normierung.
Kann ich APNG ohne spezielle Software erstellen? Die einfachste Methode für Einzelpersonen ist das Online-Tool ezgif.com, das keine Installation erfordert. Für professionelle Workflows empfiehlt sich APNG Assembler als Kommandozeilentool oder als Desktop-Anwendung, das präzise Kontrolle über Framerate, Schleife und Kompression bietet.
Verwandte Einträge
Weiterführend
- Parmenter, Stuart; Vukićević, Vladimir (2006): APNG Specification 1.0 –
- Online: Can I Use – APNG Browser-Kompatibilität –
- Online: ezgif APNG-Maker –
- Online: APNG Assembler –
