PNG (Portable Network Graphics) – Der Spezialist für Transparenz
Das PNG-Format (Portable Network Graphics) ist aus dem Webdesign nicht wegzudenken. Es wurde entwickelt, um Grafiken verlustfrei im Web darzustellen, und ist der Nachfolger des veralteten GIF-Formats. Wenn du auf deiner Website ein Logo freigestellt vor einem farbigen Hintergrund siehst, ist das mit ziemlicher Sicherheit ein PNG.
Die Vorteile auf einen Blick
Warum nutzen wir das überhaupt? Hier sind die technischen Fakten:
- Verlustfreie Kompression: Anders als beim JPG entstehen beim Speichern keine hässlichen Artefakte oder Klötzchenbildungen. Das Bild behält seine volle Qualität, egal wie oft du es speicherst.
- Transparenz (Alpha-Kanal): Das ist das Killer-Feature. Ein PNG kann transparente Bereiche haben. Das ist essenziell für Logos, Icons oder Grafiken, die nicht stur rechteckig auf der Website kleben sollen, sondern sich organisch in das Design einfügen.
- Farbtiefe: PNG unterstützt bis zu 16 Millionen Farben. Das sorgt für saubere Verläufe und knackige Darstellungen.
Wann du ein PNG nutzen solltest
Nicht jedes Bild muss ein PNG sein. Hier ist die Faustregel für den täglichen Einsatz im Backend:
- Logos und Icons: Sobald du einen transparenten Hintergrund brauchst, ist PNG (oder SVG) Pflicht.
- Grafiken mit Text: Da PNG Kanten gestochen scharf darstellt, bleibt Schrift in Grafiken (z.B. Screenshots oder Infografiken) gut lesbar.
- Zeichnungen und Illustrationen: Flächen mit klaren Farben werden hier extrem sauber wiedergegeben.
Wann du besser die Finger davon lässt
Es gibt einen großen Haken: Die Dateigröße. Da PNGs verlustfrei arbeiten, enthalten sie viel mehr Daten als ein komprimiertes JPG.
- Fotos: Ein hochauflösendes Foto als PNG zu speichern, ist der sicherste Weg, deine Ladezeiten zu killen. Eine Datei, die als JPG vielleicht 200KB groß wäre, kann als PNG schnell auf 2MB oder 3MB explodieren. Für Fotos gilt daher immer noch: Nimm JPG oder das moderne WebP.
Wichtig zu wissen: Auch wenn PNG der Klassiker für Transparenz ist, setzen wir heute oft auf WebP. Das Format kann auch Transparenz, ist dabei aber oft 30% bis 50% kleiner in der Dateigröße. Wenn dein Theme und Server das unterstützen (was heute Standard sein sollte), lohnt sich der Switch, um die Performance deiner Seite sauber hochzuhalten.