Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Transparente Grafiken: gif und png

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).

Abb 1: Beispiel-Webseite ohne Button

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

Abb 2: Beispiel-Webseite mit Button

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).

Abb 3 und 4: Button im Original und als gif, vergrößert

Abb 5: Webseite mit gif-Button

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).

Abb 3 und 6: Button im Original und als png-24, vergrößert

Abb 7: Webseite mit png-24-Button

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.

Kommentare

Achim H
am 16.12.2007 - 03:31

Das Thema ist schon interessant, leider sind beide Seiten (siehe Der Haken) in englischer Sprache verfasst. Mein Englisch ist jedoch nicht so berauschend.

Um älteren IEs die Alphatransparenz beizubringen, benötige ich jedoch kein JavaScript. Zumal die Formatierungen auch nur funktionieren würden, wenn die clientseitige Scriptsprache aktiviert wäre. Dafür reicht bereits ein IE-spezifisches CSS, welches über ein Conditional Comment eingebunden wird.

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
 
In der IE-spezifischen CSS-Ressource wird der IE-Filter dem entsprechenden Element anformatiert.

Permanenter Link
Nicolai Schwarz

Nicolai Schwarz (Autor)
am 16.12.2007 - 04:49

@Achim H: Ich denke, du meinst die Methode mit dem AlphaImageLoader. Soweit ich weiß, nutzt man damit eine ActiveX-Komponente, die aber auch nur dann funktioniert, wenn JavaScript im IE aktiviert ist.
Da beide Methoden JavaScript benötigen, ist dann ja egal, welche man benutzt.
Ohne es ausprobiert zu haben.

Was ich aber vergessen habe, ist ein Hinweis auf den Artikel der Kollegen bei 24ways.org: Transparent PNGs in Internet Explorer 6
Wiederum auf englisch.

Permanenter Link
Andreas Demmer

Andreas Demmer
am 16.12.2007 - 09:10

Hiermit gehen transparente Bilder im Vorder- oder Hintergrund ganz ohne JS auf dem IE6.

Permanenter Link

Achim H
am 16.12.2007 - 09:27

Hiermit gehen transparente Bilder im Vorder- oder Hintergrund ganz ohne JS auf dem IE6.

Nee, leider auch nicht.Die htc-Ressource enthält ebenfalls JavaScript. Öffne doch mal diese Datei mit einem Editor.

Permanenter Link

Achim H
am 16.12.2007 - 09:53

@Achim H: Ich denke, du meinst die Methode mit dem AlphaImageLoader. Soweit ich weiß, nutzt man damit eine ActiveX-Komponente, die aber auch nur dann funktioniert, wenn JavaScript im IE aktiviert ist.

Dann spinnt entweder mein IE6 oder ich habe in den Sicherheitseinstellungen doch nicht alles (alles was ich zu ActiveX und Active Scripting finden konnte) deaktiviert. Der IE-spezifische Filter funktionierte nämlich weiterhin.

Permanenter Link

Markus Gans
am 16.12.2007 - 16:50

@Achim H:

Hallo Achim,

Du hast mich mit Deinen Kommentar von 3:31 Uhr sehr neugierig gemacht. Leider gibst Du hier keinen konkreten und nachvollziehbaren Code preis.
Könntest Du hier bitte ein kurzes HTML- und CSS-Beispiel reinstellen?

Besten Dank    Markus

Permanenter Link

Jo
am 16.12.2007 - 20:22

Hallo
Ich glaube für mich hat das jetzt endlich mal eine Sinn ergeben was ich tun muss um endlich gute ergebnisse zu erziehlen

Permanenter Link

Achim H
am 17.12.2007 - 05:51

Du hast mich mit Deinen Kommentar von 3:31 Uhr sehr neugierig gemacht. Leider gibst Du hier keinen konkreten und nachvollziehbaren Code preis.
Könntest Du hier bitte ein kurzes HTML- und CSS-Beispiel reinstellen?

Hallo Markus,
es handelt sich in der Tat um den AlphaImageLoader. Trotz deaktiviertem JavaScript und ActiveX wird der transparente Tukan (aus der Zeit des IE7 von Dean Edwards) korrekt dargestellt. Das einzige was nicht funktioniert, ist, dass das transparente Hintergrundbild gekachelt wird.

#box {
  height: 200px;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
  (src='tukan-trans.png');
}
 
<div id="box"></div>

Permanenter Link

Clemens Lang
am 17.12.2007 - 19:01

Anstelle von PNG-24 bzw. PNG-32 mit einer JavaScript-Lösung für den IE bietet sich manchmal auch ein PNG-8 mit mehreren Stufen der Transparenz an - leider beherrschen nur wenige Programme dieses Feature von PNG-8.

Sitepoint hat dazu einen interessanten Artikel:
PNG8 - The clear winner

Permanenter Link

wortwart
am 18.12.2007 - 13:40

Es stimmt nicht, dass PNG-8 in Sachen Transparenz identisch mit GIF ist. PNG-8 beherrscht ebenso wie PNG-24 oder PNG-32 Alphatransparenz.

Permanenter Link

Stefan
am 06.01.2008 - 21:13

Andreas Variante habe ich bisher auch immer benutzt. Nun habe ich jedoch bei einem Bekannten auf seinem Rechner (IE Versionsnr. 6.0.2900.2180.xpsp_sp2_gdr.070227) und der Variante überhaupt keine Grafik zu sehen bekommen. Bei mir geht es im IE6 einwandfrei. Warum es bei ihm nicht geht, konnte ich leider noch nicht endgültig klären.

Permanenter Link

Ralph
am 14.04.2008 - 20:38

@Stefan: Was sagt uns das jetzt: Die Leute sollen endlich den IE 6.x begraben und auf den IE 7 aktualisieren ;)

Permanenter Link

Robert Hartl
am 03.10.2008 - 13:08

Ich habe ganz was anderes gelernt: Wie man nämlich bei mittig zentriertem Design eine absolute Positionierung auch an die Ränder bewegen kann. Eigentlich logisch, aber darauf wäre ich nicht gekommen. Mittig positionieren und dann per margin an den Rand schieben: clever.

Permanenter Link

Die Kommentare sind geschlossen.