Blog · Anleitungen

Ein vernünftiger PNG-Workflow: oxipng, zopfli und Paletten

PNG ist alles andere als überholt — richtig eingesetzt, ist es das beste Format für flächige Grafiken. So bekommst du die kleinsten Dateien ohne Banding oder Dithering-Artefakte.

palette → oxipng → zopfli

PNG hat den schlechten Ruf, „groß“ zu sein, aber die meisten aufgeblähten PNGs sind einfach schlecht kodiert. Mit einem klaren dreistufigen Workflow — quantisieren, optimieren, neu komprimieren — kannst du ein PNG routinemäßig verlustfrei um die Hälfte oder mehr verkleinern und dabei scharfe Kanten und sauberes Farbe behalten. Hier ist die Reihenfolge, auf die es ankommt.

Wann PNG das richtige Werkzeug ist

PNG ist gebaut für flächige Grafiken mit scharfen Kanten: Logos, Icons, UI-Exporte, Diagramme, Screenshots und alles mit Transparenz. Es ist verlustfrei, sodass Kanten messerscharf bleiben — kein JPEG-Mückenrauschen um Text herum. Für Fotografien ist es die falsche Wahl (nutze WebP/AVIF/JPEG), aber für die synthetischen Grafiken, die moderne Apps füllen, schlägt nichts ein gut gemachtes PNG.

Schritt 1: Wenn möglich, auf eine Palette quantisieren

Die meisten UI-Grafiken nutzen weit weniger als 16 Millionen Farben. Ein 24-Bit-Truecolor-PNG in eine 8-Bit-Indexpalette (≤256 Farben) umzuwandeln ist der mit Abstand größte Hebel — es halbiert die Datei oft schon vor jeder weiteren Optimierung. Der Haken liegt darin, Farben gut zu wählen und Verläufe sorgfältig zu behandeln; ein guter Quantisierer wählt eine optimale Palette und ditheryt nur dort, wo es tatsächlich hilft.

Schritt 2: Filter mit oxipng optimieren

PNG wendet vor der Kompression pro Zeile einen Filter an, und die Wahl beeinflusst die Größe drastisch. oxipng testet Filterstrategien und komprimiert das Bild neu, schnell und parallel, ohne jeglichen Qualitätsverlust. Es ist der sichere Alltagsstandard: richte es auf einen Ordner, und es macht einfach jedes PNG kleiner. Führe es sowohl bei Truecolor- als auch bei Palettenbildern aus.

Schritt 3: DEFLATE mit zopfli ausquetschen

Wenn du das absolute Minimum willst und es dir nichts ausmacht zu warten, ist zopfli ein DEFLATE-kompatibler Kompressor, der viel intensiver nach einem kleineren Stream sucht. Er ist langsam — manchmal Sekunden pro Bild —, erzeugt aber Standard-PNGs, die jeder Decoder liest, oft ein paar Prozent kleiner als mit oxipng allein. Perfekt für Assets, die du einmal veröffentlichst und millionenfach ausspielst.

# Die komplette Pipeline, durchgehend verlustfrei
imageforge ui.png --palette auto --lossless        # Schritt 1
imageforge ./icons/*.png --optimize oxipng         # Schritt 2
imageforge logo.png --optimize zopfli --effort max # Schritt 3

Banding und Dithering-Artefakte vermeiden

Die zwei Fehlerarten bei Paletten-PNGs sind Banding (sichtbare Stufen in einem Verlauf, wenn zu wenige Farben vorhanden sind) und Dithering-Rauschen (Sprenkel vom Streuen von Farben, um mehr vorzutäuschen). Die Lösung ist Fingerspitzengefühl: Verläufe in Truecolor belassen, flache Bereiche quantisieren und nur bei kleinen Palettengrößen dithern, wo das Auge Rauschen gegenüber Bändern bevorzugt. Im Zweifel die quantisierte Version vor der Veröffentlichung mit dem Original vergleichen.

Schritt
Tool
Verlust
Quantisieren
Palette / im pngquant-Stil
Optional, kontrolliert
Filter optimieren
oxipng
Keiner
Neu komprimieren
zopfli
Keiner

Halbiere deine PNGs, richtig gemacht.

Palette, oxipng und zopfli in einem Durchgang — standardmäßig verlustfrei, auf deinem Mac.

Weiterlesen