PNG – Verlustfreies Bildformat mit Transparenz-Unterstützung

PNG (Portable Network Graphics) ist ein verlustfreies Rasterbildformat mit Unterstützung für Transparenz (Alpha-Kanal), das als offener Standard für Webgrafiken, Screenshots und Bilder mit Schärfekanten konzipiert wurde.

Rubrik: Ausgabeformate & Technische Standards · Unterrubrik: Bild-Dateiformate · Niveau: Einsteiger Synonyme / Auch bekannt als: .png, Portable Network Graphics, „Ping"

Was ist PNG?

PNG wurde 1996 als freier Nachfolger des patentbelasteten GIF-Formats entwickelt und ist seit 2004 ein offizieller W3C-Webstandard. Im Gegensatz zu JPEG verwendet PNG ausschließlich verlustfreie Kompression (DEFLATE-Algorithmus) – das bedeutet, dass beim Speichern keinerlei Bildinformation verloren geht. Das Bild kann beliebig oft geöffnet, bearbeitet und erneut gespeichert werden, ohne an Qualität zu verlieren.

Der entscheidende Vorteil von PNG gegenüber JPEG ist der Alpha-Kanal: Jeder Pixel kann einen Transparenzwert zwischen 0 (vollständig transparent) und 255 (vollständig opak) haben, was weiche, semitransparente Kanten ermöglicht. Das macht PNG zur ersten Wahl für Logos, Icons, UI-Elemente und alle Grafiken, die auf verschiedenfarbigen Hintergründen eingesetzt werden.

Technische Eigenschaften

PNG-8 vs. PNG-24 vs. PNG-32:

• PNG-8: Indizierte Farben mit max. 256 Farbtönen (wie GIF), sehr kleine Dateien. Geeignet für einfache Icons und Grafiken mit wenigen Farben.
• PNG-24: 16,7 Millionen Farben (8 Bit pro Kanal × 3 Kanäle), keine Transparenz. Für Fotos mit maximaler Qualität ohne Qualitätsverlust.
• PNG-32: 16,7 Millionen Farben + 8-Bit-Alpha-Kanal. Standard für Logos, UI-Elemente, Illustrationen mit Transparenz.

Dateigröße-Vergleich (typisches Logo, 800×600 px):

• PNG-32 mit Transparenz: ca. 80–200 KB
• JPEG Q85 (ohne Transparenz): ca. 60–90 KB
• WebP verlustfrei: ca. 50–120 KB
• SVG (Vektor, zum Vergleich): ca. 5–30 KB

16-Bit-PNG: Für Archiv- und wissenschaftliche Anwendungen unterstützt PNG bis zu 16 Bit pro Kanal (48-Bit RGB oder 64-Bit RGBA). Dieser Modus wird von Web-Browsern nicht vollständig unterstützt, aber von Bildbearbeitungsprogrammen wie Photoshop und GIMP genutzt.

Einsatzgebiete

1. Logos und Markengrafiken: PNG ist das Standardformat für Logos, Wappen und Markengrafiken im Web, die auf unterschiedlich farbigen Hintergründen erscheinen – dank Alpha-Kanal ohne harte weiße Kanten.
2. UI-Elemente und App-Icons: Alle Icons, Buttons, Badges und Interface-Elemente in Web-Apps und mobilen Anwendungen werden als PNG exportiert (häufig als Sprite-Sheet oder einzelne Datei).
3. Screenshots und Screencasts: Screenshots sollten immer als PNG gespeichert werden, da die verlustfreie Kompression sicherstellt, dass Text und UI-Elemente scharf und lesbar bleiben.
4. Digitale Illustration und Grafik-Design: Illustrationen, die in einer Bildbearbeitungssoftware erstellt werden und scharfe Kanten oder Farbverläufe mit Transparenz enthalten, werden als PNG-32 exportiert.
5. Zwischen-Export in Workflows: PNG dient in professionellen Workflows als verlustfreies Zwischenformat – z. B. wenn ein Bild zwischen verschiedenen Programmen ausgetauscht werden muss, ohne Qualität zu verlieren.

In der Praxis

Adobe Photoshop:

• Datei > Exportieren > Als Kopie exportieren: Format PNG, Transparenz aktivieren
• Datei > Für Web speichern (Legacy): PNG-8 für einfache Grafiken (kleinere Dateien), PNG-24/32 für Fotos und komplexe Grafiken mit Transparenz
• Kompression: Photoshop bietet Kompressionsgrad 0–9 (DEFLATE). Empfehlung: 6–7 (gutes Gleichgewicht zwischen Dateigröße und Geschwindigkeit)
• Metadaten: Für Web „Keine" wählen (spart Dateigröße)

Figma:

• Exportieren > Format PNG > Skalierung 1×, 2×, 3× für Retina-Displays
• Für Icons immer 2× exportieren (für @2x-Displays)
• Transparenz wird automatisch korrekt exportiert

Adobe Lightroom:

• PNG-Export möglich, aber selten genutzt (große Dateien). Nur für verlustfreien Foto-Export ohne Qualitätsverlust.
• Datei > Exportieren > Format PNG > 16 Bit für maximale Qualität in der Archivierung

GIMP:

• Datei > Exportieren als > .png: Kompression 7, alle Metadaten deaktivieren für Web

pngquant (Kommandozeile):

• Verlustbehaftete PNG-Optimierung: pngquant --quality=65-85 input.png
• Reduziert PNG-Dateigröße um 50–70% durch Reduzierung auf 256 Farben

Vergleich & Abgrenzung

Wann PNG wählen: Logos, Icons, UI-Elemente, Screenshots, Illustrationen mit Transparenz, Zwischen-Export in Workflows. Wann kein PNG wählen: Fotos (→ JPEG oder WebP), animierte Inhalte (→ APNG, GIF, WebP), skalierbare Grafiken (→ SVG).

Häufige Fragen (FAQ)

Warum sind manche PNG-Dateien größer als JPEG? PNG verwendet verlustfreie Kompression, die für Fotos mit feinen Farbverläufen deutlich ineffizienter ist als die verlustbehaftete JPEG-Kompression. Ein Foto als PNG gespeichert kann 5–10× größer sein als die entsprechende JPEG-Datei bei ähnlicher visueller Qualität. PNG-Größen-Vorteile kommen erst bei Grafiken, Screenshots und Bildern mit wenigen Farben oder großen gleichmäßigen Flächen zum Tragen.

Kann PNG CMYK-Farben speichern? Nein. PNG unterstützt ausschließlich RGB-Farbräume (sowie Graustufen und indizierte Paletten). Für den CMYK-Druck muss auf TIFF oder PDF gewechselt werden. Diese Einschränkung macht PNG zu einem reinen Web- und Bildschirm-Format.

Was ist der Unterschied zwischen PNG und PNG-24? Die Bezeichnungen PNG-8, PNG-24 und PNG-32 beschreiben die Farbtiefe. PNG-24 meint 24-Bit-Farbe (8 Bit × 3 Kanäle = RGB ohne Transparenz), PNG-32 bedeutet 24-Bit-Farbe plus 8-Bit-Alphakanal. In der Praxis meinen die meisten Nutzer mit „PNG" das PNG-32-Format mit Transparenz.

Verwandte Einträge

• JPEG-Format
• APNG-Format
• GIF-Format
• WebP-Format
• SVG-Format
• Bildformate für Social Media

Weiterführend

• Boutell, Thomas (Hrsg., 1996): PNG (Portable Network Graphics) Specification. W3C Recommendation –
• Roelofs, Greg (2003): PNG: The Definitive Guide. O'Reilly Media. (kostenlos online verfügbar)
• Online: MDN Web Docs – PNG –
• Online: TinyPNG – PNG-Kompression im Browser –