PNG

Was ist PNG?

PNG (Portable Network Graphics) ist ein verlustfreies Bildformat, das 1996 als offener Standard entwickelt wurde — ursprünglich als Ersatz für das patentierte GIF-Format. PNG unterstützt Transparenz über einen Alpha-Kanal, was es zum Standard für Logos, Icons, Grafiken mit transparentem Hintergrund und Screenshots macht.

Das Schlüsselwort bei PNG ist "verlustfrei": Jedes Pixel wird exakt so gespeichert, wie es war. Das ist für Pixel-genaue Grafiken, Text in Bildern und UI-Screenshots ideal. Für Fotos ist PNG jedoch ineffizient — ein Foto als PNG ist 5–20 Mal größer als als JPEG oder WebP.

Wie funktioniert PNG-Kompression?

PNG verwendet den Deflate-Algorithmus (derselbe wie in ZIP-Dateien) für verlustfreie Kompression. Vor der eigentlichen Kompression wendet PNG Filteralgorithmen an (Sub, Up, Average, Paeth), die Unterschiede zwischen benachbarten Pixeln vorhersagen — dadurch enthalten die Daten mehr Nullen und komprimieren besser.

Es gibt zwei Hauptvarianten:

• PNG-24: Unterstützt 16,7 Millionen Farben plus Alpha-Kanal — für Fotos und komplexe Grafiken
• PNG-8: Nur 256 Farben (wie GIF), aber kleiner — für einfache Grafiken und Icons (heute meist von SVG ersetzt)

Der große Vorteil: Pixelgenauigkeit. PNG ist das einzige verbreitete verlustfreie Web-Format mit Transparenz. Nach mehrfachem Öffnen und Speichern tritt kein Qualitätsverlust auf — im Gegensatz zu JPEG.

PNG für WordPress-Betreiber

WordPress erkennt beim Upload automatisch PNG-Dateien und verarbeitet sie mit GD oder Imagick. Seit WordPress 5.8 können PNG-Uploads automatisch in WebP konvertiert werden.

Wann PNG auf Webseiten sinnvoll ist:

• Logos mit transparentem Hintergrund
• Icons und UI-Grafiken
• Screenshots von Software
• Bilder mit Text
• Alle Bilder, bei denen Pixel-Genauigkeit wichtiger ist als Dateigröße

Wann PNG durch WebP ersetzen: Verlustfreies WebP ist typischerweise 26 % kleiner als PNG — bei exakt gleicher Qualität. Für alles außer dem originalen Archivformat ist verlustfreies WebP heute die bessere Wahl. Mit <picture>-Element bleibt PNG als sicherer Fallback erhalten:

<picture>
  <source srcset="/logo.webp" type="image/webp">
  <img src="/logo.png" alt="Logo" width="200" height="80">
</picture>

PNG-Dateien ohne Qualitätsverlust komprimieren: Mit Werkzeugen wie pngquant (verlustbehaftet für PNG-8-Reduktion) oder optipng/zopflipng (verlustfrei, bessere Deflate-Kompression) können PNG-Dateien um 15–70 % verkleinert werden:

# Verlustfrei (bessere Deflate-Kompression):
optipng -o7 bild.png

# "Verlustbehaftet" (Farbreduktion auf PNG-8 mit Dithering):
pngquant --quality=80-90 bild.png

Was passiert ohne PNG-Optimierung?

Unoptimierte PNGs von Fotos sind katastrophal für LCP. Ein Screenshot als PNG kann 3–5 MB groß sein — als WebP wären es 200–400 kB. Der häufigste Fehler: Autoren laden Fotos als PNG hoch, weil ihr Screenshot-Tool nur PNG exportiert. Für eine Performance-Checkliste ist "keine Fotos als PNG" eine der wichtigsten Regeln.

Häufige Fragen

Kann man PNG-Dateien ohne sichtbaren Qualitätsverlust verkleinern? Ja — mit verlustfreier Rekompression (optipng, zopflipng) oder mit verlustbehafteter Farbreduktion auf wenige Farben (pngquant). Letzteres ist für Logos mit wenigen Farben oft unsichtbar und spart 60–80 %.

Was ist der Unterschied zwischen PNG und SVG? PNG ist ein Rasterformat (Pixelgitter). SVG ist ein Vektorformat (mathematische Beschreibung). Logos und Icons als SVG sind meist kleiner als PNG, skalieren verlustfrei und können per CSS gestylt werden. SVG ist für technische Grafiken, Icons und Logos die bessere Wahl — PNG für Fotos, Screenshots und komplexe Grafiken.