Indexiertes PNG-8 lohnt 2026 für schlanke Sprites und harte Byte-Limits – scheitert aber an unreviewed Dithering, Alpha-Irrtümern und Halos im Dark Mode. Dieser Guide ist für Designer und Lieferverantwortliche: PNG-8 vs. PNG-24, Dithering-/Paletten-Checkliste, Kanten- und Weißrand-Abnahme, Remote-M4-Batch mit Zeitbändern, Größen-FAQ. Farblogik: Mac PNG sRGB / Display P3 – Checkliste.
Drei typische Lieferfallen
- Banding: Indexiert ohne abgestimmtes Dithering und ohne Referenz-Screenshot.
- Alpha: PNG-8 für weiche Schatten – Kanten im Browser gezackt oder grau.
- Halos: Auf weißem QA ok, auf #121212 sichtbar – Compositing-Vertrag, nicht „schnell retuschieren“.
Inhaltsverzeichnis
PNG-8 vs PNG-24: Entscheidungstabelle
PNG-8 bei flachem Motiv und akzeptiertem Dither; PNG-24 bei Verläufen, Schatten oder mehrstufigem Alpha – sonst Schulden statt echter Einsparung.
| Dimension | PNG-8 (indexiert) | PNG-24 / 32 (Truecolor + Alpha) |
|---|---|---|
| Farbe & Verläufe | ≤256 Farben; Banding ohne Dither; ideal für flache UI und Logos mit wenigen Flächen. | Millionen Farben; erhält Rampen und Foto-Details. |
| Alpha / Kanten | Binäre Transparenz pro Farbe oder Paletten-Tricks; riskant für weiches Anti-Aliasing. | Voller Alphakanal; vorhersagbares Compositing auf beliebigen Hintergründen. |
| Typischer Byte-Gewinn | Oft 40–75 % kleiner als naive PNG-24-Exports derselben flachen Grafik. | Größer; ggf. verlustfreie Nachkompression oder kontrolliert lossy Truecolor. |
| Beste Handoff-Situation | Icon-Sheets, Sticker, UI-Atlanten, Portale mit harten KB-Limits. | Marketing-Heroes, Produktfotos mit Schatten, „pixelgenau im Dark Mode“. |
| Review-Aufwand | Hoch: Dither-Muster, Paletten-Fixierung, Fransen auf farbigen Hintergründen. | Geringer für Farbtreue; dennoch ICC und Metadaten nach Policy prüfen. |
Hell- und Dark-Shell: eher PNG-24, außer Brand will groben Index-Look. Weiße Katalog-Matte: E-Commerce-Weißbatch-QA M4.
Dithering- und Palettenparameter: ausführbare Checkliste
In Jira, Notion oder README_DELIVERY.md einfügen.
- Palette: Start 256; 128/64 nur bei flachem Art + QA-OK.
- Dither: Diffusion für Foto→indexiert; Muster nur mit Brand-Freigabe (Name im Ticket).
- Stärke 0–100 %: Foto 75–100; fast-Vektor 0–35 gegen Korn.
- Transparenz: UI-Chrome mit Alpha; CMS→JPEG: extra opake Datei, kein PNG-8 für weiche Schatten.
- Interlace: aus, außer explizit gewünscht (meist +Bytes).
- Profil: Web meist sRGB – siehe Farb-Checkliste.
- pngquant: z. B.
--quality=65-85 --speed 1 --floyd=1inEXPORT_PRESET.mdpinnen. - Gold:
_gold.pngpro Preset, Batch dagegen halten.
Transparente Kanten und Weißrand-Abnahme: Schritte
Fransen = Compositing-Vertrag; testen wie beim Partner, nicht nur Schachbrett.
- Drei Hintergründe: #000, #FFF, Markenmittelton im Referenz-Browser.
- Zoom: 100/200/400 % – Matt-Naht oft 200–400 %.
- vs. PNG-24: Differenz-Blend in Affinity/PS – leuchtende Kanten = Halo/Premultiply.
- SKU weiß: auf #FFFFFF flatten, grauen Rand prüfen.
- Dark: #121212 / #000; helle Matt-Pixel in der Silhouette → fail.
- Sign-off: Prüfer, Datum, Hintergründe, pass/fail/Ausnahme – Ausnahme nur schriftlich mit PM/Brand.
Remote-M4-Batch-Pfade (Skripte/Aktionen) und Zeitvergleich
Remote Mac M4: Thermik vom Laptop weg, Nacht-Queues, Ordner wie CI. Zeiten: indikativ für ~100 PNG, Apple Silicon; I/O und Manifest verschieben Werte.
| Pfad | Was automatisiert wird | typ. Wall-Clock (100 Dateien) | Beste wenn |
|---|---|---|---|
| Manuell „Exportieren als …“ | Format pro Datei manuell. | 45–90 Min. | Einzelstücke oder Hotfixes. |
| Photoshop-/Affinity-Aktion | Aufgezeichnete Schritte: Größe, Modus, Für Web speichern, schließen. | 20–40 Min. | Kreative Schritte müssen im Dokument bleiben. |
| Shell + pngquant / optipng | Ordner-Schleife, JSONL-Log, Schwellen. | 3–10 Min. | Große Mengen indexiert mit gepinnten CLI-Flags – ideal auf Remote M4. |
| ImageMagick + Optimizer | Skalierung, Tiefenreduktion, dann verlustfreier Druck. | 5–12 Min. | Gemischte Rasterquellen, Geometrie vor Palette. |
Skizze: for f in inbox/*.png; do pngquant --quality=70-85 --speed 1 --output "out/$(basename "$f")" "$f"; done + optional optipng -o2. Watcher/Retry: OpenClaw PNG-Palette-Audit Remote Mac.
Warum M4 remote: Parallel, Homebrew stabil, SSH dauerhaft – kein 2000-Dateien-Lauf auf dem Design-Laptop.
FAQ: Größenschwellen nach dem Export
Schwellen = vereinbarte Budgets mit Frontend/CDN; Tabelle als Start, pro Release nachschärfen.
| Asset-Klasse | Start-Schwelle (indexiert PNG-8) | Eskalation |
|---|---|---|
| 16–32 px Toolbar-Glyphe | < 5–12 KB | Überschreitung: Metadaten-Duplikat oder versehentlich Truecolor prüfen. |
| Tab- / Nav-Icon @2x | < 15–35 KB | Mit PNG-24 vergleichen; indexiert muss deutlich kleiner sein oder Ausnahme begründen. |
| Karten- / Tile-Illustration (Web) | < 80–180 KB | Dither-Rauschen vs. LCP; ggf. WebP/AVIF-Begleitdatei wenn erlaubt. |
| Hero / Marketing-Streifen | teamspezifisch (oft 150–400 KB) | PNG-8 selten passend – bei Nutzung Brand-Sign-off auf Banding. |
Q: Wann ist „klein genug“ falsch? A: Bei Regression auf Ziel-Hintergründen oder wenn Brotli wegen Dither-Entropie nichts bringt → Qualität hoch oder Truecolor.
Q: @2x/@3x? A: Caps mit Pixelfläche skalieren (z. B. @2x ≤ 1,8× 1×-Cap).
Q: Byte-Check? A: Design = Optik, Frontend = Transport; Spalte bytes_max im Manifest.
Fazit
PNG-8 dort, wo Fläche, Palette und Byte-Cap zusammenpassen: immer Dither-Liste, Kanten-QA, Batch auf Remote Mac M4 (pngquant/optipng), damit der Laptop frei bleibt. Schwellen optional per Watch-Folder wie in den verlinkten Guides.
Remote Mac mieten: PNG-8-Batches & QA auslagern
Mac Mini M4 für Paletten, Optimizer und Manifeste – Preise, Hilfe SSH/VNC, Startseite ohne Login-Zwang wo angeboten.