PNG-Optimierung 2025 — Palettierung und verlustfreie Kompression

Veröffentlicht: 19. Sept. 2025 · Lesezeit: 3 Min. · Von Unified Image Tools Redaktion

PNG verkleinern – Transparenz und Kanten erhalten

PNG bleibt stark für UI, Logos und Icons. Dieser Leitfaden fasst einen stabilen Workflow zusammen: wo möglich palettieren, redundante Chunks entfernen, dann verlustfrei nachverdichten.

Vorab entscheiden

Transparenz nötig? → PNG oder verlustfreies WebP (für UI)
Wenige Farben? → Palettierung (≤8‑Bit) bringt große Einsparungen
Feine Kanten/Text? → Verlustfrei priorisieren, aggressives Preprocessing vermeiden

Praxis-Workflow

Auf sRGB normalisieren (Details: Korrektes Farbmanagement & ICC-Strategie 2025 — Praxisleitfaden für stabile Webbild-Farben)
Palettieren zur Farbanzahlreduktion
Redundante Chunks entfernen (EXIF, Zeitstempel, Text)
Verlustfrei komprimieren

Für Einzeldateien: PNG verlustfreie Optimierung. Für Batches: Batch Optimizer Plus.

Stolperfallen

Textkanten verschmieren: kein Vorab‑Blur, Quelle scharf halten
Farbabrisse: Palettengröße schrittweise justieren; Review mit Compare Slider

Wie weit palettieren (Richtwerte)

Logos/Icons: oft 8–32 Farben möglich; Kantenglättung im Blick behalten
UI‑Screenshots: 64–128 Farben erreichen häufig visuelle Gleichwertigkeit
Fotoartige Illustrationen: PNG meiden; WebP (lossless/lossy) oder AVIF prüfen

Für Alphakanten auf dunklem Hintergrund hilft oft ein 0,5–1px Außenrand in gleicher Farbe gegen Fransen.

CLI‑Rezepte (verlustfrei)

# oxipng: gutes Verhältnis aus Tempo und Stärke
oxipng -o 4 --strip all input.png -o output.png

# zopflipng: stärker, aber langsamer
zopflipng -m --iterations=50 --filters=0me input.png output.png

# pngquant: verlustbehaftete Palettierung in hoher Qualität; Ziel per --quality
pngquant --quality=70-95 --speed 1 --strip --force --output output.png input.png

Hinweise:

Erst pngquant zur Farbreduktion, danach oxipng/zopflipng für das „Tighten“.
--strip all entfernt Zeitstempel/Text‑Chunks ohne Darstellungswirkung.

Filterstrategie und zlib‑Parameter

PNG wählt zeilenweise Filter (None/Sub/Up/Average/Paeth) und komprimiert dann mit zlib. Die beste Kombination kann die Größe um ein‑ bis zweistellige Prozent ändern.

Filter‑Suche: mehrere Muster testen, z. B. zopflipng -m --iterations=50 --filters=0me
zlib‑Level: 9 ist maximal, aber langsam; praxisnah mit 5–7 starten
Kontinuierliche Flächen mögen Paeth/Average; flache UI‑Bereiche teils None/Sub

Dithering (Wahrnehmungs‑Körnung)

Dither kaschiert Banding, kann aber bei Text/Kanten als Rauschen stören.

Floyd–Steinberg: Allrounder; gut für natürliche Bilder
Ordered: regelmäßiges Muster; in UI oft sichtbar
None: ideal für Text/Logos, hält Flächen sauber

Mit pngquant per --floyd (0..1) und --ordered steuern. Für Icon‑Sets meist ohne Dither; bei zarten Verläufen schwaches Floyd sinnvoll.

Alpha und Premultiplied‑Kanten

Transparente PNGs zeigen auf dunklem Hintergrund manchmal dunkle Säume. Hintergrund antizipieren und Premultiplied‑Alpha/Compositing berücksichtigen oder 0,5–1px Außenkontur setzen.

// Konzeptbeispiel mit sharp
import sharp from 'sharp'

await sharp('input.png')
  .removeAlpha()
  .png({ compressionLevel: 9 })
  .toFile('flat.png')

await sharp('input.png')
  .ensureAlpha()
  .png({ compressionLevel: 9 })
  .toFile('alpha.png')

CI/CD‑Integration (Beispiel)

# .github/workflows/png-optimize.yml (Auszug)
name: Optimize PNG
on: [pull_request]
jobs:
  png-opt:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: sudo apt-get update && sudo apt-get install -y pngquant
      - run: |
          find assets -name "*.png" -print0 | xargs -0 -n1 -I{} pngquant --skip-if-larger --quality=70-95 --strip --force --output {} {}