PNG-Dateiformat: Definition, Vorteile, Anwendungsbereiche und bewährte Verfahren

PNG, kurz für Portable Network Graphics, ist ein verlustfreies Bildformat, das transparente Hintergründe unterstützt. Es eignet sich am besten für Logos, Icons, Screenshots und Grafiken mit Text oder einfarbigen Flächen, bei denen es auf Klarheit ankommt.

Im Gegensatz zu JPEG bleibt die Bildqualität bei PNG auch nach mehrmaligem Speichern erhalten. Der Nachteil ist die Dateigröße. PNG-Dateien sind in der Regel zwei- bis fünfmal größer als JPEG-Bilder. Dieser Leitfaden erklärt, wann man PNG anstelle von JPEG oder WebP verwenden sollte, wie die PNG-Komprimierung funktioniert und wie man die Dateigröße reduzieren kann, ohne an Qualität einzubüßen.

Kurz gesagt: Das PNG-Dateiformat erklärt

• PNG ist ein hochwertiges Bilddateiformat, das verlustfreie Komprimierung verwendet, sodass die Bildschärfe auch nach Größenänderung oder Bearbeitung erhalten bleibt.

• PNG unterstützt Transparenz und eignet sich daher ideal für Logos, Icons und Webgrafiken mit sauberem Hintergrund.

• Im Vergleich zu JPEG, GIF und TIFF eignet sich PNG aufgrund seines ausgewogenen Verhältnisses von Qualität und Dateigröße am besten für Bilder mit einheitlichen Farben und weborientierte Anwendungsfälle.

• PNG-Bilder sollten sorgfältig optimiert werden, da sie sehr groß werden können, insbesondere wenn sie für detaillierte Grafiken oder umfangreiche Bearbeitungen verwendet werden.

Definition und Bedeutung des PNG-Dateiformats

Das PNG-Dateiformat, kurz für Portable Network Graphics, ist ein weit verbreitetes Bildformat, das zum Speichern und Übertragen von Rasterbildern im Internet entwickelt wurde.

PNG wurde am 1. Oktober 1996 als patentfreie Alternative zu GIF eingeführt und verwendet einen verlustfreien Komprimierungsalgorithmus, um die ursprüngliche Bildqualität zu erhalten. Das bedeutet, dass im Gegensatz zur verlustbehafteten Komprimierung bei JPG keine Bilddaten während der Komprimierung oder Dekomprimierung verloren gehen.

Eine PNG-Datei beginnt mit einer festen Dateisignatur, die das Format identifiziert und die Erkennung von Übertragungsfehlern erleichtert. Nach der Signatur wird die Dateistruktur in Abschnitte unterteilt.

Jeder Datenblock besteht aus einem Längenfeld, einem in ASCII-Zeichen geschriebenen Datenblocktypcode, einem Datenfeld und einer 32-Bit-CRC-Prüfsumme. Einige Datenblöcke sind kritisch und müssen in jeder PNG-Datei vorhanden sein, wie beispielsweise der IHDR-Bildheader-Datenblock, die IDAT-Bilddatenblöcke und die IEND-Dateiendemarkierung.

Der Bildheader-Chunk speichert wichtige Informationen wie Bildbreite, -höhe, Bittiefe, Farbtyp, Komprimierungsmethode, Filtermethode und Interlacing-Methode.

PNG unterstützt Farbbilder, Graustufenbilder, indizierte Farben und einen Alphakanal für Transparenz. Dank der Unterstützung von 8 und 16 Bit pro Pixel bietet PNG eine hohe Farbgenauigkeit und starke Bildqualität und eignet sich daher ideal für Logos, Icons und Webseitengrafiken auf allen Betriebssystemen und Webbrowsern.

Vorteile des PNG-Dateiformats

Die Verwendung des PNG-Dateiformats bietet viele Vorteile. 

• Ein Vorteil dieses Dateityps ist, dass er im Gegensatz zu JPEG einen transparenten Hintergrund ermöglicht. Dies ist praktisch, um Bilder mit einem „Durchscheineffekt“ zu erzeugen.

• Darüber hinaus behalten PNG-Bilder ihre Qualität beim Skalieren, sodass sie sowohl für kleine als auch für große Bilder verwendet werden können, ohne dass Details verloren gehen. 

• Ein weiterer Vorteil ist, dass PNG-Dateien viel kleiner sind als andere verlustfreie Dateitypen wie TIFF, wodurch sie sich ideal für die Verwendung im Web oder als E-Mail-Anhang eignen.

Lernen: Einführung in Bildformate der nächsten Generation

Wie verwendet man PNGs im Webdesign?

PNG-Bilder eignen sich am besten für Webdesign, wenn das Bild große Flächen mit einheitlicher Farbe oder transparentem Hintergrund aufweist. Da PNG-Bilder verlustfrei sind, bleiben alle Details des Originalbildes erhalten. Zudem sind PNG-Bilder kleiner als JPEG-Dateien und laden daher schneller.

So verwenden Sie ein PNG-Bild in Ihrem Webdesign:

• Stellen Sie sicher, dass das Bild als .png-Datei gespeichert wird.

• Verwenden Sie ein HTML-Bild-Tag, um das Bild in den Quellcode Ihrer Webseite einzufügen. Das src-Attribut `img` sollte auf den Speicherort der PNG-Datei auf Ihrem Server verweisen.

• Legen Sie die Breiten- und Höhenattribute so fest, dass das Bild auf Ihrer Seite in der richtigen Größe angezeigt wird.

Wenn Sie ein transparentes PNG-Bild erstellen möchten, können Sie ein Online-Tool wie Pixlr oder Photoshop verwenden:

• Erstellen Sie eine neue Ebene in Ihrem Bildbearbeitungsprogramm und füllen Sie diese mit der Farbe, die Sie transparent machen möchten.
• Stellen Sie die Deckkraft der Ebene auf 50 % oder weniger ein.
• Speichern Sie Ihr Bild als .png-Datei und laden Sie es auf Ihren Server hoch.

Bei der Anzeige im Webbrowser erscheint dieses Bild mit transparentem Hintergrund.

Siehe auch: Die besten WordPress-Plugins zur Bildoptimierung

Vergleich von PNG mit anderen Bilddateiformaten (JPEG, GIF, TIFF)

PNG eignet sich hervorragend für Bilder mit großen, einfarbigen Flächen oder für Bilder, die einen transparenten Hintergrund benötigen. Bevor Sie sich jedoch entscheiden, sollten Sie sich über einige wichtige Unterschiede zwischen PNG und anderen Bilddateiformaten im Klaren sein.

• JPEG eignet sich am besten für detailreiche Bilder wie Fotos. Der von JPEG verwendete Komprimierungsalgorithmus führt jedoch zu einem gewissen Detailverlust, weshalb es nicht das ideale Format für Bilder mit wenigen Farben oder großen einfarbigen Flächen ist.

• GIF eignet sich am besten für kleine Bilder mit wenigen Farben, wie Logos oder Strichzeichnungen. Der von GIF verwendete Komprimierungsalgorithmus kann zu Artefakten (sichtbaren Verzerrungen) im Bild führen, wenn er nicht sorgfältig optimiert ist.

• TIFF ist ein hochwertiges Format, das sich für Druckanwendungen eignet. TIFF-Dateien sind in der Regel deutlich größer als andere Bilddateiformate und daher nicht optimal für die Verwendung im Web.

Tipps zum Erstellen und Bearbeiten von PNG-Bildern

Bei der Arbeit mit PNG-Bildern gibt es ein paar Dinge zu beachten, um sie effektiv zu erstellen und zu bearbeiten.

• PNG-Bilder eignen sich am besten für große, einheitliche Flächen. Daher sind sie weniger geeignet für Fotos oder Bilder mit vielen Details und Variationen. Sie sind jedoch hervorragend für Logos, Icons und andere Grafiken, bei denen ein klares, schlichtes Erscheinungsbild gewünscht ist.

• PNG-Bilder unterstützen Transparenz. Das bedeutet, dass Sie einen transparenten Hintergrund hinter Ihrem Bild haben können, was für bestimmte Designarbeiten praktisch ist. Um einen transparenten Hintergrund in Ihrem PNG-Bild zu erstellen, verwenden Sie ein Online-Tool wie Pixlr, um die Hintergrundfarbe Ihres Bildes zu entfernen.

• Beim Bearbeiten von PNG-Bildern ist die Dateigröße entscheidend. Da PNG-Bilder verlustfrei sind (d. h. sie verlieren beim Bearbeiten oder Komprimieren keine Qualität), können sie recht groß sein. Daher empfiehlt es sich, sie in einem Programm wie Photoshop zu bearbeiten, das über spezielle Werkzeuge für große Dateien verfügt.

Abschluss

PNG ist ein praktisches Bilddateiformat für eine Vielzahl unterschiedlicher Anwendungen. Dank seiner Fähigkeit, Daten zu erhalten und Bilder auch nach der Komprimierung sauber zu halten, eignet es sich ideal für Webseiten, Logos und andere Grafiken mit großen Flächen einheitlicher Farbe oder transparentem Hintergrund.

Wenn Sie eine Bilddatei suchen, die von hoher Qualität ist und minimalen Speicherplatz benötigt, dann ist PNG genau das Richtige für Sie!

Häufig gestellte Fragen zum PNG-Dateiformat