Die Grafikformate PNG, GIF und JPEG im Vergleich

Christoph von »Linux und ich« hat im Juni 2011 über pngcrush geschrieben, um PNGs zu optimieren. Ich hingegen möchte einmal das Tool optipng empfehlen, welches ebenfalls PNGs verlustfrei komprimieren kann – manchmal sogar etwas besser als pngcrush. Es ist ebenfalls ziemlich einfach anzuwenden. Aber ist PNG überhaupt das richtige Dateiformat? Oder sollte man lieber auf JPEG (oder JPG: Joint Picture Expert Group, verlustbehaftet) zurückgreifen? Eine Anleitung, das richtige Bildformat zu wählen und PNGs zu optimieren.

Exkurs: Das richtige Grafikformat

JPG und GIF. Diese Formate kennen viele – wenn nicht alle Computerbenutzer. Sie sind gegen Mitte der 90er Jahre populär geworden, weil sie gut im damals langsamen Web zu verwenden waren: Durch ihr progressives Laden (erst grob, dann immer mehr Bildinformationen nach und nach hinzuladen) konnte man gleich erahnen, was sich vor einem aufbauen würde. Ein damals sehr hilfreiches Mittel, da schnelle Internetanbindungen für private quasi nicht existierten. Das waren die 90er Jahre. Schon damals galt es bereits, das richtige Dateiformat zu wählen. Heute, mit einer dicken Internetleitung, merken viele private Seitenbetreiber gar nicht, ob sie nun zu den Grafikformaten PNG, oder JPG oder zu GIF greifen sollten. Welche Wahl ist die richtige?

Bilder und Fotos als JPG

JPG, JPEG File Interchange Format oder »Joint Photographic Experts Group«-Bilder waren – und sind auch noch – das Mittel der Wahl für hochauflösende Fotografien mit möglichst geringen optischen Qualitätsverlusten. JPEG komprimiert die Daten, indem es Details entfernt – je höher die Komprimierung, desto größer die Verluste. Meistens wird aber umgekehrt die Qualitätsstufe von 0-100 (Gimp) oder 0-10 (Photoshop) angegeben. Hier gilt: je höher die Qualitätsstufe, desto mehr Details bleiben erhalten – und desto größer wird das Bild.Da Grafiken aus vielen Kanten und gleichen Flächen bestehen, ist JPG für diese Inhalte ungeeignet. Es entstehen Artifakte, wie Blockbildungen und schmutzige Kanten.

Grafiken und Animationen als GIF

GIF, kurz für für Graphics Interchange Format, hat hier ein besseres Verhalten: Es wird jeder Bildpunkt einzeln abgespeichert. Damit speichert es verlustfrei. Fast jedenfalls – es kann nur 256 verschiedene Farben pro Bild darstellen, da es eine Farbpalette besitzt. Für die meisten Grafiken ist das in Ordnung: Text (schwarz), ein paar Kästchen (z. B. in blau und rot), sowie Markierungen und Hervorhebungen in Gelb sind vier Farben in der Palette. Ein weißer Hintergrund nimmt die fünfte Farbe ein. Nutzt man Antialiasing, so nutzt man üblicherweise die restlichen “noch freien” Plätze der Farbpalette für Zwischenfarben und Abstufungen.Eine der Farben kann als transparent markiert werden. Leider sind die Ergebnisse oft unschön, da die Zwischenfarben meistens auf einen weißen Hintergrund zugeschnitten sind. Es bilden sich farbige Kanten, sobald man die GIF-Grafik auf einen andersfarbenen Hintergrund setzt. Der folgende Vergleich zeigt vier Bilder – einmal ein GIF ohne Antialiasing auf weißem, einmal auf blauem Hintergrund, sowie einmal mit Antialiasing auf weißem und einmal dem blauen Hintergrund, für den es nicht gedacht war.Ein weiterer Vorteil ist die Möglichkeit, kleine Animationen zu erstellen. Eigentlich eignet sich das GIF-Format nicht sonderlich gut dafür, da es unnötig groß wird und alte Informationen aus dem vorigen Bild nicht effizient nutzen kann. Dennoch wurden animierte GIFs früher als Blickfang ohne Mehrwert eingesetzt, was ihnen den Namen »Zappel-GIF« einbrachte. Da diese Bilder ablenken, waren sie also nie beliebt. Zum Glück findet man diese nur noch auf den wenigsten Seiten. Ein noch wesentlich größerer Nachteil war, dass das Format GIF patentbehaftet war. Die wesentlichen Patente liefen am 1. Oktober 2006 aus, so dass es nun frei benutzt werden kann. In der Zwischenzeit hatten sich aber bereits Alternativen etabliert: Das – auch inzwischen quasi-tote Adobe Flash, damals Shockwave Flash, sowie das verlustfreie PNG-Format und in jüngster Zeit immer mehr das SVG als Vektorgrafikformat, welches immer mehr Verbreitung findet. Leider wurden GIFs immer wieder falsch verwendet – nämlich, um Bilder und Fotos zu komprimieren. Dabei hätte eine Kompression mittels JPEG das Bild weitaus weniger zerstört – oftmals bei kleinerer Dateigröße! Wie ein Foto komprimiert in beiden Formaten aussieht, ist im Folgenden als Vergleich zwischen JPG und GIF zu sehen.Sehr gut lässt sich erkennen, dass die Sonne oben rechts im GIF sehr schlecht zur Geltung kommt. Ein klarer Farbverlauf ist nicht möglich. Und trotz der Beschränkten Palette von 256 Farben ist das Bild fast drei Mal so groß! Es bleibt festzuhalten: Das alles ist nicht schön – GIF ist kein Format, welches man heutzutage als Privatanwender oder Webentwickler noch nutzen möchte. Da sich im ersten Schritt das PNG durchgesetzt hat, wird es im folgenden noch einmal umrissen.

PNG zur Rettung der Grafiken!

Das PNG (kurz für: Portable Network Graphics) wurde entwickelt, um eine freie und bessere Alternative zum GIF zu haben. Es hat dementsprechend immense Vorteile gegenüber diesem: Es speichert Bilder nicht nur in einer 256 Farben kleinen Palette, sondern wahlweise auch 24bittig – also fast 17 Millionen Farben!PNG transparency demonstration 2. Grafik: ed_g2s. Lizenz: Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Unported. Das ist allerdings nicht der einzige Vorteil. Im Vergleich mit GIF kann es dank eines Alpha-Kanals beliebig viele Farben als transparent definieren – und zwar jede mit 256 Stufen. Dadurch kann ein Bild mit Transparenz und Antialiasing auf verschiedenen Hintergründen gut aussehen.

Kein animiertes PNG

Leider (oder zum Glück?) wurde nicht sofort eine Animation spezifiziert. Das hat zur Folge, dass sich zwei Formate etablierten: Das offizielle, 2001 veröffentlichte MNG-Format (Multi-image Network Graphics) wurde auf Grund der neuen, nicht direkt zu PNG kompatiblen und großen Spezifikation von vielen Browsern nicht unterstützt. Stattdessen wurde das APNG (kurz für: Animated PNG) vorgeschlagen – welches bei den PNG-Entwicklern aber auf Missgunst stieß – immerhin wurde das PNG als Einzelbildformat entwickelt. Dennoch hat es das APNG-Format in einige Browser geschafft, da es leichter zu implementieren ist. Keines der beiden Formate hat sich aber in einer Mehrheit der Browser durchgesetzt, so dass die Formate nur selten anzutreffen ist. Die Wahrscheinlichkeit auf ein animiertes Bild zu treffen, grenzt – wegen der geringen Unterstützung – daher gegen null.

Browserunterstützung animierter PNG-Formate¹

BROWSER (ENGINE)	APNG	MNG
Mozilla Firefox (Gecko)	Ja	-
Microsoft Internet Explorer (Trident)	-	-
Chrome, Chromium, Safari (WebKit)	-	-
Opera (Presto)	Ja	-
Konqueror (KHTML)	-	Ja

1) Quelle: Wikipedia, Stand 2005 Die Gründe von beiden Lagern sind gut nachvollziehbar: APNG ist kleiner und näher am bekannten und etablierten PNG-Standard, während das MNG der einzig offizielle Standard ist. So lange nicht einer der großen Browser (Firefox, Internet Explorer, Opera, Chrome, Safari etc.) beide Formate implementiert, wird also kein Webdesigner auf diese setzen. Nicht zuletzt ist die fehlende Unterstützung doch schade: Ohne animiertes Bildformat mit 24bit lassen sich keine 3D-Wackelbilder (Pseudo-3D) erstellen. Als Alternativen bleiben nur Adobe Flash oder HTML5/JavaScript-Animationen. Letztendlich könnte man die 3D-Bilder dadurch auch mit der jQuery-toggle()-Funktion darstellen – beide Bilder werden über einen Timer geschaltet, der alle 250ms die Toggle()-Funktion aufruft. Dadurch funktioniert der Effekt aber nur noch bedingt lokal.

Kompression von PNGs mittels OptiPNG

Über OptiPNG

OptiPNG ist eine Shell- oder Textbasierte Software, die PNG-Bilddateien verlustfrei neu komprimiert. Außerdem kann OptiPNG andere Bildformate (darunter: Bitmaps [*.bmp], GIFs [*.gif] und TIFF [*.tif]/[*.tiff]) in das PNG-Format konvertieren. Außerdem führt es Integritätsprüfungen und Korrekturen an den PNGs aus. Wer mehr über die technischen Details der verlustfreien PNG-Komression erfahren möchte, kann diese auf der Seite Eine Anleitung zur PNG-Optimierung (engl., A guide to PNG optimization) durchlesen. Hier werden auch alternative Tools vorgestellt, die OptiPNG ersetzen oder mit diesem zusammenarbeiten (etwa AdvPNG).

OptiPNG installieren

UBUNTU/DEBIAN

Die Installation ist hier gewohnt denkbar einfach und wird wie üblich über den Paketmanager durchgeführt. Es befinden sich in der Regel ausreichend aktuelle Versionen von optipng und anderen Tools in den Repositories:

sudo aptitude install optipng

Die Installation über diesen Weg funktioniert auch in anderen Distributionen mit dem Debian Package Manager. Eventuell ist Aptitude nicht installiert – an dessen Stelle arbeit der Befehl apt-get genau so gut. Beispiele für kompatible Distributionen sind:

• Kubuntu, Lubuntu, Edubuntu und andere direkte Ubuntu-Derivate.
• Linux Mint; eine Ubuntu-Variante mit Desktop- und Softwarealternativen.
• Aptosid (ehemals Sidux), ein Debian mit aktueller Software.
• Knoppix, die als erste wohl auch bekannteste Debian-Live-DVD.

WINDOWS

Unter Windows (alle Versionen ab Windows XP) lädt man optipng-0.7.4.zip herunter und entpackt die Datei optipng.exe etwa in das Windows-Verzeichnis, damit es im Pfad (PATH) ist. Dadurch kann es überall ausgeführt werden. Alternativ lässt sich die Cygwin-Umgebung installieren, die unter Windows eine Bash sowie eine simulierte Unix-Umgebung mitbringt. Das hat den Vorteil, dass auch andere Tools wie etwa find verfügbar sind, die im folgenden das rekursive Optimieren in Verzeichnissen vereinfacht. Hier wählt man bei der Installation einfach OptiPNG als Installationspaket aus. Wer Cygwin bereits installiert hat, kann das Setup erneut starten und wählt dann das Paket OptiPNG einfach hinzu.

Alle PNGs in einem Ordner mit Unterordner

Um alle PNG-Bilder in einem Ordner rekursiv zu optimieren, geht man zunächst in diesen Ordner. Mit dem Unix-Befehl find lassen sich dann gezielt alle existierenden PNG-Dateien heraussuchen und an OptiPNG (oder ein anderes Tool) übergeben. find . -name "*.png" -exec optipng '{}' + Die Ausgabe sieht dann beispielsweise so aus:

Alle PNGs im aktuellen Ordner

Um die Optimierung auf den aktuellen Ordner – ohne Unterordner – zu beschränken, ist der Einsatz von find nicht notwendig. Es genügt, die Bash-Completion (bzw. genauer: Expansion) auszunutzen. Hier übergeben wir einfach *.png, da OptiPNG auch mehrere Eingabedateien verarbeiten kann.

optipng *.png

Eure Bilder sind jetzt komprimiert.

Fazit

Die Wahl des richtigen Dateiformates kann erhebliche Auswirkungen auf dessen Qualität und Dateigröße haben. Was vielen unbekannt ist: PNG ist üblicherweise kleiner als das GIF-Format. Oft wird das aber anders wahrgenommen, da gängige Tools wie Adobe Photoshop und Irfanview, aber auch GIMP nicht alle Möglichkeiten der PNG-Kompression ausschöpfen. Das müssen dann Tools wie OptiPNG nachholen.