PNG: Halbtransparenz dank Alphakanal

Glass of WaterDas tilllate-Logo kriegt anlässlich des Welt Aids Tag eine rote Schleife. Die Aufgabe wäre leicht gewesen – gäbe es keine IE 6 mehr im Cyberspace.

Der Grafiker liefert mir das Logo. Ich öffne es im Fireworks und setze den Hintergrund transparent. Schliesslich soll das Logo sowohl auf der Tages-Skin, als auch auf der dunklen Nacht-Skin von tilllate gut aussehen. Ich speichere das Logo als GIF. GIF unterstützt ja Transparenz.

Logo Weltaidstag tilllate Tag

Wow. Schön sieht das aus. Neckisch, wie sich die Schleife über den Rahmen hinausragt. Wie sieht’s in der Nachtvariante aus?

tilllate Logo mit Artefakt

Ups. Gar nicht toll. Ja: Die Schleife hat einen grauen Schatten. Halbtransparent. Beim Export als GIF schimmert der hellblaue Tages-Hintergrund durch.

Was wir brauchen, ist ein Bildformat, welches nicht nur zwischen transparent und opak unterscheidet, sondern alle Zwischenschritte unterstützt. 25% transparent, 50% transparent, voll Transparent etc.

Dieses Format gibt’s: PNG. “Portable Network Graphic”. Die Transparenzinfomationen sind im Alpha-Kanal gespeichert. Dadurch wird das Bild auf jedem Hintergrund darstellbar. Frei von Artefakten:

Logo Weltaidstag tilllate Nacht Logo Weltaidstag tilllate Tag

Toll. Perfekte Lösung. Sieht gut aus im IE 7, im Firefox, im Safari… Nur der IE 6 schafft’s nicht, die Informationen des Alphakanals auszuwerten:

Logo Weltaidstag tilllate im IE6

Unbrauchbar. Und gerade mal 5% unserer Besucher haben Version 7. Obwohl diese per Windows-Update zwangsverteilt wurde. Schade.

Die Lösung des Problems: Einmal mehr, zwei Versionen des Bildes. Eine für den Tag. Eine für die Nacht.

This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to PNG: Halbtransparenz dank Alphakanal

  1. leo says:

    Ohne IE währe unser Leben einiges einfacher. Aber das ganze ist auch unabhänig von der Technik eine sympatische Idee.

  2. Harry Fuecks says:

    Have seen people use this approach to cope in IE 5.5 / 6 : http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

  3. mix says:

    Das leidige Problem mit dem IE6.. Wer kennts nicht :/

    IE7 hat zwar viele Sachen besser gemacht, aber bei Details rendert der auch immer noch anders als FF/Opera etc.
    Naja, die Microsoft-Entwickler wollen wohl dass die Webdesigner nicht Umsatzeinbussen haben 😉