Vektorgraphiken mit PNG
Die Tatsache, dass Vektorgraphiken häufig große, zusammenhängende Bereiche mit gleichen Farbwerten enthalten, lässt das PNG-Format seine Stärken ausspielen. Auf diese Weise können Rastergraphiken mit geringer Dateigröße auf einer Internetseite dargestellt werden.
Die Stärke des PNG-Formats ist also die in diesem Dateiformat vorgesehene Art transparenzen zu definieren. Wie in den Beispielen auf der vorherigen Seite, soll nun ein PNG-Bild über ein Hintergrundbild gelegt werden, das durch bestimmte Bereiche im Bild durchscheint. Anders als zuvor wird in Abbildung 1 nun ein für das PNG-Format geeigneteres Bild mit den Eigenschaften einer Verktorgraphik verwendet. Dargestellt wird ein einfarbiger Bereich, der mit einem Schlagschatten bereichert wurde. Auch hier wird der Hintergrund beim „Überfahren” mit der Maus ausgeblendet. Hier sieht es dann auch mit der Dateigröße etwas besser aus – beide Bilder (Hintergrund und PNG-Bild) sind zusammen kleiner als die dem Vergleich dienenden Versionen weiter unten.
Abb. 1: Kompakte Darstellung einer Vektorgraphik mit PNG
Das schöne an dieser Lösung ist, dass der Rahmen samt Schatten auf einem beliebigen Hintergrund korrekt dargestellt wird. Dies ist insbesondere dann vorteilhaft, wenn die Positionierung der Graphik – etwa durch unterschiedliche Auslegung von Stylesheet-Standards durch die Browseranwendung – nicht richtig funktioniert. Anders als bei der Speicherung samt Hintergrund in einer GIF- oder JPG-Datei fällt das Bildelement, trotz der falschen Positionierung, dann nicht so sehr ins Auge. Geht beispielsweise ein Hintergrundmuster der Umgebung des eingebetteten Bildes nicht nahtlos in das Hintergrundmuster des Bildes über, so sieht man sofort, dass die Rastergraphik nicht an der dafür vorgesehenen Position angezeigt wird.
Zum Vergleich zeigt Abbildung 2 die Hintergrundgraphik und das darüber gelagerte Bild, wobei diese zuvor in Form eines GIF-Bildes zusammengefasst wurden. Hierbei fällt kein Qualitäsverlust ins Auge, was daran liegt, dass die Anzahl der durch das Bild genutzten Farbwerte noch recht gering sind – Läge ein komplexerer Hintergrund vor, so sähe das allerdings anders aus. Zwar ist Datei etwas größer als die vorherige Version, allerdings ist der Einsatz dieses Bildes wie bereits im Vorfeld erwähnt auch ein wenig eingeschränkt. Auch ein weiterer Nachteil soll hier nicht unerwähnt bleiben: Die Anzahl der zur Darstellung benötigten HTTP-Requests – und damit auch die Latenzzeit – ist bei Verwendung der PNG-Lösung höher.
Abb. 2: Beide Ebenen zu einem GIF-Bild zusammengefasst
Die dritte Abbildung gibt nun das selbe Bild als JPG-Datei wieder. Diese Version ist von der Dateigröße her noch ein wenig größer. Hier wurden, ebenso wie beim vorherigen Bild, die einzelnen Ebenen zusammengefasst und im JPG-Format abgespeichert. Schaut man sich das Bild etwas genauer an, so fallen Artefakte in geringer Ausprägung auf, die durch einen höheren Qualitätsfaktor bei der Kodierung ausgemerzt werden können. Allerdings erkauft man sich die höhere Qualität durch eine größere Datei. Auch wirkt die JPG-Variante etwas dunkler als die vorherigen Bilder.
Abb. 3: JPG-kodiert mit leichten Artefakten
Glücklicherweise lassen sich die Graphikformate ja wunderbar miteinander kombinieren. Auf der folgenden Seite soll eben dies angesprochen werden.