Login
Newsletter
Werbung

Di, 7. Mai 2013, 15:00

PNG-Bilder (automatisch) optimieren

Eine Frage, die man sich bei der Überschrift stellen könnte, ist: »Sind meine Bilder nicht optimal?« Die Antwort ist, dass alles eine Frage der Definition ist. Mit »optimal« ist in diesem Fall die Dateigröße des PNG-Bildes in Relation zur Qualität gemeint. Im Artikel sollen ein paar Werkzeuge vorgestellt werden, mit denen man PNG-Bilder ohne großen Qualitätsverlust verkleinern kann.

Technischer Hintergrund

Das Grafikformat PNG (kurz für »Portable Network Graphics«) ist neben JPG (die Komprimierung heißt im übrigen JPEG) das wohl am weitesten verbreitete Bildformat im Internet. Es unterstützt die drei Farbkanäle Rot, Grün und Blau und kann insgesamt bis zu 16,7 Millionen Farben in einem Bild darstellen. Aber auch die Darstellung als Graustufenbild ist möglich. Zusätzlich gibt es noch die Möglichkeit, das Bild mit einer Farbpalette mit bis zu 256 Einträgen zu speichern, was weiter unten eine Rolle spielen wird.

Gegenüber JPG gibt es einige Vorteile. So besitzt PNG einen Alpha-Kanal für Transparenz. Sogar semi-transparente Pixel sind in einem Bild möglich, d.h. Bildpunkte, die eben nicht ganz durchsichtig sind, sondern einen sichtbaren Farbanteil besitzen.

Daneben werden PNGs anders komprimiert gespeichert, was in manchen Fällen zu einem wesentlich kleineren und gleichzeitig qualitativ besserem Bild als bei der JPEG-Komprimierung führt. Oft sagt man auch, PNG komprimiere ohne Qualitätsverluste. Eine gute (englische) Erklärung zur Kompressionstechnik findet man auf der Webseite von OptiPNG.

Gute Bilder, schlechte Bilder

Aufgrund der Kompressionstechnik ist PNG nicht für alle Bilder gleich gut geeignet. Das heißt, man kann das Bild natürlich im PNG-Format speichern, aber die Dateigröße ist dann mitunter um einiges größer als bei anderen Formaten (speziell dem JPG-Format).

PNG hat vor allem da Stärken, wo große gleichfarbige Flächen zu sehen sind, z.B. bei Bildschirmfotos (»Screenshots« auf Neudeutsch). Speichert man beispielsweise ein Bildschirmfoto eines Texteditors, wird dies als PNG in der Regel kleiner sein als ein vergleichbares JPG. Selbst mit einer sehr hohen JPEG-Komprimierung erreicht man oft nicht die Größe der PNG-Datei – und wenn, dann ist die Qualität nicht mehr annehmbar.

Zum Vergleich: Ein Bildschirmfoto des Texteditors Geany mit der Bildgröße von 708x707 Pixel hat als PNG (ohne Transparenz) eine Größe von 132 kb. Als JPEG mit einer Qualität von 100 % sind dies dagegen 380 kb. Setzt man die Qualität auf 72 % herunter, erreicht man in etwa die gleiche Dateigröße, das Bild wirkt aber sehr krisselig, was manchen Menschen sofort auffällt.

Rechts 100 % und links 72 % JPEG-Qualität; rechts sieht man ein Krisseln um die Schrift

Dominik Wagenführ

Rechts 100 % und links 72 % JPEG-Qualität; rechts sieht man ein Krisseln um die Schrift

Das waren die Stärken von PNG. Wo liegen jetzt die Schwächen? Genau beim Gegenteil, d.h. bei Bildern mit eine sehr hohen Anzahl von verschiedenfarbigen Pixeln – kurz gesagt: bei Fotos oder Bildern mit Farbverläufen.

Wieder ein Vergleich: Als Beispiel soll ein Foto vom Bodensee in der Bildgröße 1000x750 Pixel dienen. Als JPG mit einer leichten Qualitätseinschränkung von 90 % ergibt sich eine Datei der Größe 139 kb. Die Qualitätseinschränkung ist nicht so gravierend, da man die Verpixelung, die sich dadurch ergibt, vor allem bei Fotos so gut wie nicht wahrnimmt. Speichert man dieses als PNG ab, ist das Bild dagegen 906 kb groß. Jetzt könnte man das auf die Qualitätseinschränkung bei JPG beziehen, aber selbst bei 100 % Qualität ist das JPG-Bild weniger als halb so groß wie das PNG.

Dieses Bild vom Bodensee wäre als PNG circa 6,5 Mal so groß

Dominik Wagenführ

Dieses Bild vom Bodensee wäre als PNG circa 6,5 Mal so groß

Optimierungsmöglichkeiten

Wie kann man PNG-Bilder nun optimieren? Da PNG vor allem bei Bildschirmfotos seine Stärken hat, nutzen diese in der Regel nicht die volle Farbpalette von 16,7 Millionen Farben. Meist sind es sogar weniger als 256. Und genau hierfür gibt es bei PNGs die Möglichkeit, das Bild mit einer eigenen Farbpalette mit maximal 256 Farben zu indizieren.

Die Erstellung der Farbplatte läuft normalerweise automatisch ab. Es werden im Bild die Anzahl der Farben gezählt und nach einem bestimmten Automatismus eine Farbplatte erstellt, sodass auch bei mehr als 256 Farben in einem Bild möglichst wenige Farbveränderungen vorgenommen werden müssen. Auf die Art muss man nicht mehr jeden der drei Farbkanäle einzeln mit 8 Bit speichern, sondern kommt im ganzen Bild mit 8 Bit aus. Das kann also eine Ersparnis von rund 66 % ergeben.

Durch verschiedene Indizierungsalgorithmen (also wie die Farbpalette erstellt wird) ist es sogar möglich, Fotos und Farbverläufe einigermaßen gut zu indizieren. Natürlich erhält man hier immer einen Qualitätsverlust gegenüber einem JPG in bester Qualität bzw. dem PNG ohne Indizierung.

Als Beispiel für den Artikel sollen drei Bilder optimiert werden:

  • das oben erwähnte Bildschirmfoto eines Texteditors (131,4 kb)
  • das ebenfalls erwähnte Bodensee-Bild (905,4 kb)
  • ein Screenshot des Unity-Desktops mit einem Farbverlauf (625,8 kb)

Hinweis: In diesem Artikel werden nur ausgewählte Konvertierungen explizit gezeigt, andere lediglich beschrieben. Wenn man aber die Anleitung befolgt, sollte man auf die identischen Ergebnisse kommen.

Es gibt noch andere Optimierungsmöglichkeiten, wie z.B. den Alphakanal, d.h. die Transparenz, zu entfernen, wenn diese nicht benötigt wird. Auch dies verkleinert das Bild je nach Anteil des transparenten Bereichs.

Kommentare (Insgesamt: 3 || Alle anzeigen )
Re: Kraken.io (KerstinW, Mo, 13. Mai 2013)
Kraken.io (Dieselkopf, Di, 7. Mai 2013)
Pro-Linux
Pro-Linux @Facebook
Neue Nachrichten
Werbung