ALLONLINE STORIES · VOL. III · TRANSPARENZ ERKLÄRT
PNG
Transparenz wurde zu Information. Wie ein offenes Format Alpha, Scanline-Filter und verlustfreie Komprimierung zu einer der zuverlässigsten Methoden für digitale Grafiken machte.
Scrollen und die Ebenen entdecken
01 · WARUM PNG
PNG rät nicht, was du nicht mehr sehen musst. Es bewahrt, was du exportiert hast.
1996 als offene Alternative für Webgrafiken entstanden, fand PNG eine klare Rolle: Interfaces, Screenshots, Illustrationen und Assets, deren Kanten, Farben und Transparenz intakt bleiben müssen.
OFFENPNGverlustfrei · Alpha · Farbe
02 · ANATOMIE
Ein PNG ist eine Folge von Chunks mit klaren Regeln.
Die Signatur identifiziert die Datei. IHDR definiert die Kerneigenschaften. Ein oder mehrere IDAT enthalten komprimierte Bilddaten. IEND schließt die Struktur. Dazwischen können Paletten, Farbprofile, Text und weitere Hilfsdaten liegen.
PNG SIGNATURE
Die acht Byte lange Signatur identifiziert die Datei, bevor ein Chunk interpretiert wird.
03 · RGBA
Transparenz ist kein Effekt. Sie ist Information pro Pixel.
Bei Truecolor mit Alpha kann jedes Pixel Rot, Grün, Blau und einen unabhängigen Alpha-Kanal speichern. So bleiben weiche Kanten erhalten, ohne einen Hintergrund in das Bild einzubrennen.
RGBA
4 aktive Kanäle · volle Farbe + Transparenz
04 · ALPHA COMPOSITING
Dasselbe Pixel kann auf jedem Hintergrund leben.
Alpha beschreibt Deckung oder Opazität. Der Browser mischt die Pixelfarbe mit dem Hintergrund, sodass halbtransparente Kanten auf Weiß, Schwarz, Farbe oder Bildern natürlich wirken.
PNG
05 · FILTER
Vor DEFLATE versucht PNG, jede Scanline vorhersehbarer zu machen.
Jede Zeile kann None, Sub, Up, Average oder Paeth verwenden. Der Filter entfernt keine Information, sondern transformiert Werte vorübergehend, damit Muster und kleine Differenzen besser komprimierbar werden.
SUBspeichert Differenzen zum vorherigen Pixel der Zeile
06 · DEFLATE
Verlustfrei bedeutet, exakt dieselben Werte wiederherzustellen.
Nach dem Filtern nutzt PNG DEFLATE: Suche nach wiederholten Sequenzen plus statistische Kodierung. Ziel ist dieselbe Information mit weniger Bits, nicht eine Annäherung.
07 · PALETTE VS TRUECOLOR
Manchmal sind 32 Farben klüger als Millionen.
PNG kann indizierte Farbe über eine Palette oder direkte Farbe pro Pixel speichern. Für Icons, Pixel Art und Grafiken mit wenigen Tönen kann eine kompakte Palette die Datei stark verkleinern – ohne Verlust.
INDEXEDSehr effizient für Grafiken mit begrenzten Farben
08 · ADAM7
Ein interlaced Bild kann sich in sieben Durchgängen zeigen.
Adam7 verteilt Pixel auf sieben Muster. Die ersten Durchgänge liefern eine grobe Struktur; jeder weitere füllt Lücken, bis das vollständige Bild rekonstruiert ist. Nur die Reihenfolge ändert sich.
Durchgang 1 / 7
09 · APNG
PNG lernte auch, sich zu bewegen.
APNG ergänzt mehrere Frames, Dauer, Blending und Disposal. Es eignet sich für Animationen mit Transparenz, sollte für Web-Auslieferung aber mit WebP und anderen modernen Formaten verglichen werden.
FRAME 01 → 04
10 · FARBE UND METADATEN
Ein PNG kann mehr Kontext transportieren, als du siehst.
Hilfs-Chunks können Gamma, Chromatizitäten, ICC-Profile, sRGB-Intent und Text beschreiben. Das kann die Konsistenz zwischen Anwendungen verbessern, fügt aber Bytes und Komplexität hinzu.
11 · WANN PNG PASST
PNG gewinnt, wenn jedes Pixel zählt. Es verliert, wenn jedes Byte wichtiger ist.
Interfaces, rasterisierte Logos, Screenshots, textlastige Grafiken und Transparenz sind natürliches PNG-Terrain. Große Fotos lassen sich meist deutlich besser mit Formaten für wahrnehmungsbasierte Verluste komprimieren.
Text, Icons und harte Kanten bleiben scharf, weil die Komprimierung Pixel nicht annähert.
Nutze korrekte Abmessungen und verlustfreie Komprimierung.12 · WORKFLOW
PNG optimieren heißt, zuerst die Struktur zu wählen und dann auf KB zu schauen.
Passe Abmessungen an, entscheide über Alpha, reduziere die Palette wenn sinnvoll, behalte nur nützliche Metadaten und prüfe, ob WebP besser zum Ziel passt.
- 01Dimensioniere auf die tatsächliche Nutzungsgröße.
- 02Entscheide zwischen Alpha, Truecolor und Palette.
- 03Optimiere Filter, Palette und Metadaten.
- 04Vergleiche mit WebP für Web-Auslieferung.
Von Transparenz zur Anwendung
Behalte jedes Pixel. Entferne nur, was überflüssig ist.
PNG komprimieren, Alpha prüfen, Paletten extrahieren oder eine WebP-Ausgabe vergleichen – direkt im Browser.
AllOnline Stories · Wer Transparenz versteht, exportiert bewusster.