Webkrauts

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Transparente Grafiken: gif und png

Heute geben wir euch eine Einführung in die Transparenz bei Grafikformaten fürs Web. Nicolai Schwarz erläutert an einem einfachen Beispiel die Unterschiede zwischen dem gif- und dem png-Format.

Für transparente Grafiken im Netz kommen zwei Formate in Frage: gif und png. Beide bieten Vor- und Nachteile, die wir an einem einfachen Beispiel erläutern. Angenommen wir haben folgende Webseite (Abb 1).

Für einen besonderen Hinweis, etwa »Frohe Weihnachten«, wollen wir einen Button über die bestehende Seite legen (Abb 2).

Der Code

Wer es sich einfach machen will, kann den Button komplett in das Bild mit den Schneemännern einbauen und jenes Bild austauschen. In unserem Fall soll der Button absichtlich über dem Bild und dem Hintergrundmuster liegen.
Im HTML-File kann man dazu ganz am Ende etwa folgenden Code einfügen:
<div id="button"></div>

Dieses div wird per CSS positioniert:

div#button {
position: absolute;
top: 5px;
left: 50%;
margin: 0 0 0 -334px;
width: 121px;
height: 121px;
background: transparent url(pfad/button.gif) 0 0 no-repeat;
}

Der Button als gif

Aus Photoshop oder Illustrator lässt sich der Button als transparentes gif exportieren. Die Transparenz in einem gif ist allerdings beschränkt: Ein Pixel ist entweder transparent oder hat eine Farbe. In unserem Fall besitzt der Button am Rande mehrere Pixel, die eigentlich in die Farbe des Hintergrundes übergehen müssten (Abb 3). Beim gif lässt sich zwar eine Hintergrundfarbe angeben, in den die Randpixel übergehen sollen, aber es ist eben nur eine Hintergrundfarbe. Wählt man beispielsweise weiß als Hintergrundfarbe (Abb 4), verliert die Grafik ihren leichten Schatten und einige Pixel am Rand gehen ins Weiß über, sind aber nicht transparent . Bei mehreren Farben im Hintergrund sieht man ein krisseligen Rand (Abb 5).

Der Button als png

Für das png gibt es zwei Möglichkeiten beim Speichern: png-8 oder png-24. Das png-8 Format liefert – was die Transparenzen angeht – das gleiche Ergebnis wie ein gif. Das png-24 hingegen bietet eine sogenannte Alpha-Transparenz an. Damit ist es möglich, die Punkte am Rand mit einer echten Transparenz zu versehen. Die Original-Übergänge zum Hintergrund (Abb. 3) werden in diesem png beibehalten (Abb 6).

Damit ist das png-24 das ideale Format für unseren Button. Wir können die Hintergrundgrafiken austauschen, Farben auf der Website ändern oder den Button schnell mal ein paar Pixel verschieben – ohne unschönen Rand oder den Button neu anlegen zu müssen.

Der Haken

Leider zeigen ältere Internet Explorer alpha-transparente pngs nicht korrekt an. Hier gibt es zwei Möglichkeiten. Zum einen gibt es eine JavaScript-Lösung, die auch in den Internet Explorern 5.5 und 6 transparente pngs ermöglicht. Zum anderen bietet Fireworks einen interessanten Ansatz, der semi-transparente Farben in einem png-8 erlaubt.