Teil- und Volltransparenz bei GIF und PNG
Zwischen dem GIF- und dem PNG-Format gibt es erhebliche Unterschiede, in Bezug auf die Unterstützung von Transparenzen. Während das GIF-Format lediglich vollständig durchsichtige Pixel unterstützt, kann das PNG-Format mittels eines zusätzlichen Alphakanals auch Teiltransparenzen darstellen.
Den Unterschied zwischen Voll- und Teiltransparenz sollen die folgenden Abbildungen demonstrieren. Abbildung 1 zeigt eine Rastergraphik im PNG-Format, deren Rasterpixel per Alphakanal teilweise Transparent gemacht sind. Hinter dem PNG-Bild ist per Stylesheet ein schwarz-blau gestreiftes Bild eingebunden. Der Hintergrund scheint, je nachdem wie stark die Transparenz im Bild ist, teilweise durch. Fährt man mit der Maus über das Bild, so wird der Hintergrund ausgeblendet und das Bild zeigt seine Transparenz auf dem weissen Hintergrund der Seite. Sollten Sie JavaScript nicht aktiviert haben, so klicken Sie einfach mit der rechten Maustaste auf das Bild und lassen Sie sich das Bild in einem neuen Fenster anzeigen.
Die zugehörige PNG-Datei ist mit über 22 Kilobyte recht groß geraten. Allerdings liegt das daran, dass hier die Speicherung einer Fülle von Transparenzdaten enthalten ist und letzlich keine großen, gleichfarbigen Bereiche existieren. Hier geht es lediglich um die Demonstration der duch die Teiltransparenz gegebenen Möglichkeiten – in der Praxis eignet sich das PNG-Format für derartige Bilder natürlich nicht.
Abb. 1: Teiltransparenz mittels PNG-kodierter Rastergraphik
Anders als bei der ersten Abbildung, zeigt Abbildung 2 das selbe Bild im GIF-Format. Hier gibt es, wie bereits erwähnt, nur eine binäre Transparenz – entweder der Hintergrund schein durch oder eben nicht. Die Folge ist, dass der Hintergrund in der Mitte, wo der Transparenzgrad einen gewissen Schwellenwert erreicht hat, komplett durch scheint, während in den Randbereichen gar keine Transparenz mehr existiert.
Abb. 2: Transparenz bei GIF-Bildern
Zum Vergleich soll Abbildung 3 den Qualitätsverlust zeigen, der bei der Überlagerung beider Bilder und anschließenden Speicherung als GIF-Datei auftritt. Hier bleiben durch die Reduktion der Farbwerte die fließenden Übergänge auf der Strecke.
Abb. 3: Reduktion der Farbpalette und die Auswirkungen auf die Bildqualität
Abbildung 4 zeigt das zusammengefasste Bild nochmals in Form eines JPG-Bildes. Falls die Internetseite durch einen Internet Explorer 6 oder einen anderen des PNG-Formats nicht mächtigen Browser gerendert wird, zeigt dieses Bild zugleich, wie die überlagerten Bilder aus der ersten Abbildung aussehen sollten. Da das Bildmaterial den Eigenschaften des JPG-Formats entgegen kommt, wird hier bei sehr guter Qualität auch die geringste Dateigröße erreicht.
Abb. 4: Vorder- und Hintergrund als JPG-Datei
Auch wenn die Dateigröße des PNG-Bildes aus dem ersten Beispiel dies nicht vermuten läst: Für das richtige Bildmaterial kann der Einsatz des PNG-Formats sowohl auf Seiten der Qualität, als auch im Hinblick auf die Größe der Bilddateien äußerst effektiv sein. Da sich teilweise transparente PNG-Bilder unter Bewahrung des gewünschten Effekts beliebig positionieren lassen, ergibt sich bei der Pflege einer Website ein angenehmer Nebeneffekt: Man muss bei Änderung des Layouts nicht so oft zur Bildbearbeitung greifen.