Artikel
Transparente Grafiken: gif und png
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.
Zum Autor:
Nicolai Schwarz arbeitet als selbstständiger Mediendesigner in Dortmund. Dabei gestaltet er am liebsten Corporate Designs, Webseiten oder Flash-Spiele für kleine Unternehmen. Ab und zu kümmert er sich um sein Blog.
- Info:
- Transparente Grafiken: gif und png ist Beitrag Nr. 343
- Autor:
- Nicolai Schwarz am 16. Dezember 2007 um 00:00
- Kategorie:
- Adventskalender 2007
Kommentare
Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.
Kommentar-Feed für diesen Beitrag
Entschuldige, das Kommentarformular ist zurzeit geschlossen.
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.
Kommentar by Achim H - 16. Dezember 2007 um 03:31
@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.
Kommentar by Nicolai Schwarz - 16. Dezember 2007 um 04:49
Hiermit gehen transparente Bilder im Vorder- oder Hintergrund ganz ohne JS auf dem IE6.
Kommentar by Andreas Demmer - 16. Dezember 2007 um 09:10
Nee, leider auch nicht.Die htc-Ressource enthält ebenfalls JavaScript. Öffne doch mal diese Datei mit einem Editor.
Kommentar by Achim H - 16. Dezember 2007 um 09:27
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.
Kommentar by Achim H - 16. Dezember 2007 um 09:53
@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
Kommentar by Markus Gans - 16. Dezember 2007 um 16:50
Hallo
Ich glaube für mich hat das jetzt endlich mal eine Sinn ergeben was ich tun muss um endlich gute ergebnisse zu erziehlen
Kommentar by Jo - 16. Dezember 2007 um 20:22
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>
Kommentar by Achim H - 17. Dezember 2007 um 05:51
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
Kommentar by Clemens Lang - 17. Dezember 2007 um 19:01
Es stimmt nicht, dass PNG-8 in Sachen Transparenz identisch mit GIF ist. PNG-8 beherrscht ebenso wie PNG-24 oder PNG-32 Alphatransparenz.
Kommentar by wortwart - 18. Dezember 2007 um 13:40
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.
Kommentar by Stefan - 6. Januar 2008 um 21:13
@Stefan: Was sagt uns das jetzt: Die Leute sollen endlich den IE 6.x begraben und auf den IE 7 aktualisieren
Kommentar by Ralph - 14. April 2008 um 20:38
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.
Kommentar by Robert Hartl - 3. Oktober 2008 um 13:08