- the brainwashfactory

Jeder weiß es eigentlich - PNG (Portable Network Graphics) ist das bessere Bildformat. Unterschiedliche Farbtiefen sind möglich, verlustfreie Komprimierung, teilweise überraschend klein und praktischerweise auch noch gleich mit Transparenzunterstützung mittels Alphakanal.
Es könnte so schön sein - wenn der Internet Explorer 6 (und darunter) denn damit auch etwas anfangen könnte.

Kann er aber nicht, und deswegen gibt es mittlerweile einige Workarounds extra für dieses klitzekleine, spezielle Problem.

Wir erinnern uns: Im Internet Explorer 6 werden PNG24s mit Alphakanal zwar dargestellt, allerdings leider ohne den letzteren. Die Stellen, die transparent sein sollten, werden meist grau dargestellt. Sieht ziemlich beknackt aus:

Oben: Firefox stellt Transparenzen richtig dar, unten: der Internet Explorer 6 zeigt graue Boxen

Original: VanderVaart.com

Diese Problematik kann man auf mehrere Weisen lösen, die gängisten habe ich mal hier zusammengestellt:

Lösung 1:

Per CSS.

img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

Das könnte dann so eingesetzt werden:

<img src="test.png" width="200" height="200" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png', sizingMethod='scale');" alt="testbild" />

Problem dabei: die filter-Eigenschaft ist im CSS laut W3C nicht definiert, das Stylesheet validiert nicht. Im schlimmsten Falle könnte es durchaus passieren, daß ein älterer Browser das Stylesheet deswegen komplett ignoriert, auch wenn er nur mit der “filter”-Eigentschaft nichts anfangen kann.
Sollte man doch von dem Wunsch übermannt werden, diese Variante einzusetzen, wäre es durchaus ratsam, zu Conditional Comments zu greifen, da die Filter-Eigenschaft ohnehin nur vom IE interpretierbar ist.

< !--[if IE 6]>
Special instructions for IE 6 here
<! [endif]– >

Wer jetzt glaubt, damit sei nun alles paletti, hat leider nicht ganz recht. Mit diesem kleinen CSS-Schnipsel hat man dem IE 6 nun natürlich nicht durch Zauberhand beigebracht, wie man PNG24 richtig darstellt. Wäre ja auch zu schön. Stattdessen pflanzt der IE 6 nun einfach eine neue “Zwischenebene” an die Stelle, an der das PNG sitzt, wendet die filter-Eigenschaft darauf an, und lädt das entsprechende PNG hinein. Wieso um alles in der Welt das SO gelöst werden sollte, habe ich ohnehin noch nie so richtig verstanden, es ist aber so.

Lösung 2:

Der IE-PNG Fix von Thomas Wittek, welcher den ursprünglichen Fix von Angus Turnbull aufgreift.

Ist sehr infach einzubauen und lädt schnell.

Ein paar kleine Caveats sind aber auch dort zu beachten, am schmerzhaftesten für die meisten Webdesigner ist die Tatsache, daß sich PNGs, auf die der Filter angewandt wurde, bei dieser Methode nicht mehr via background-repeat pattern lassen, außerdem gibt es Beschränkungen in der Positionierung.

Lösung 3:

PNG8 anstatt PNG24.

Was viele nicht wissen: PNG8 unterstützt auch Alphatransparenz, bis zu einem gewissen Grad zumindest (binär). Während in allen halbwegs modernen Browsern das PNG mit Alphatransparenz angezeigt wird, lässt der IE 6 (und darunter) diese einfach weg. Sieht zwar auch nicht ganz optimal aus, allerdings bei weitem besser als die hässlichen graue Flächen, die bei der Nutzung von PNG24 auftreten würden.

Hier sieht man den Einsatz von PNG8 am Beispiel dieser Website. Im Firefox ist der Dropshadow sichtbar (links), der Internet Explorer 6 (rechts) lässt diesen einfach weg.

Ist in vielen Fällen meiner Meinung nach wirklich die Methode erster Wahl und sämtlichen JavaScript/CSS-Fixes vorzuziehen, allerdings hängt dies natürlich stark vom Einsatzgebiet ab. Auf für ein Layout essentielle Bestandteile zu verzichten, macht auch wieder keinen Sinn.

Vorteil: Kleine Dateigrößen, keine Hacks/Tricks

Nachteil dieser Methode: PNG8 arbeitet genau wie GIF mit palettenbasierten Farben. Es sind also keine 32Bit möglich sondern - die 8 im Namen sagt’s schon - 8 Bit.
Das führt dazu, daß die Transparenzabstufungen möglicherweise nicht so smooth sind wie bei PNG24, für die meisten Anwendungszwecke aber trotzdem ausreichend.
Bisher habe ich allerdings auch noch nicht rausgefunden, wie man in Photoshop CS3 beim Exportieren von PNG8 die Alphatransparenz einstellen kann. Ich verwende daher extra dafür Fireworks.
Sollte mich jemand bezüglich der Vorgehensweise in Photoshop erleuchten können, bitte ich dringendst um Nachricht :-)

Lösung 4:

Falsche Transparenzen.

Diese Lösung ist so simpel wie effizient:
Transparenzen vorgaukeln, wo gar keine sind.

Sehr schön eingesetzt wurde diese Technik von Cameron Moll.

Ein Blick auf das Hintergrund offenbart, daß der Dropshadow im Grafikprogramm bereits fest in das Muster des Seitenhintergrundes eingebunden wurde, was natürlich äußerst praktisch ist:

Kein großer Aufwand, keine CSS-/JavaScript-Methode nötig, kein zusätzliches Bild für den Dropshadow.
Nachteile: Geht natürlich ausschließlich bei Hintergründen, die nur nach unten pattern. Seiten mit Hintergründen, die sich sowohl nach rechts als auch nach unten wiederholen, müssen leider auf eine andere Methode zurückgreifen.