PNG Training

Mit dem nun doch kommenden Release vom Internet Explorer 7, wird das Thema PNG endlich neu aufgelegt. Laut Microsoft wird der neue Explorer PNG 100% unterstützen:

"IE 7.0 will feature international domain name (IDN) support; transparent Portable Network Graphics (PNG) support, which will allow for the display of overlayed images in the browser; and new functionality that will simplify printing from inside IE 7.0, partner sources said. The new browser also will likely include a built-in news aggregator."

Damit wird das PNG Format seinen Siegeszug antreten, denn das einzige Argument was gegen PNG sprach (die Inkombatibilität des IExplorers), ist damit Geschichte. Für mich hieß dies, dass ich mich mal etwas mehr mit dem Thema befassen sollte, mit dem Ergebnis, dass ein paar Experimente präsentiert werden können.

Als Einleitung auf das Thema möchte ich auf diesen Artikel verweisen. Hier werden so ziemlich alle wichtigen Fragen beantwortet. Ich möchte dagegen etwas mehr auf die praktische Anwendung eingehen. Für mich bedeutet PNG in erster Linie ein voll unterstützter Alphakanal, wie man es aus Anwendungen wie zum Beispiel Photoshop kennt. Dieser Fakt macht das PNG Format einzigartig. Ziel war es also, volle Tranzparenz praktisch anwendbar zu machen.

IE Lösungen

Auch wenn IE 7 nun in Aussicht steht, gibt es noch den guten alten IE 5/6. Speziell zum Thema PNG im Problembrowser, gibt es mehr als genug Lösungen. Hier hat man die Qual der Wahl.

Eine kleine Anmerkung noch vorweg. Dies alles hier sind reine kleine Spielerein zu Testzwecken. Dazu gehört auch, dass der Quellcode bei weitem nicht sauber und teils recht aufgebläht ist. Für einen echten Einsatz rate ich ab, die Code Beispiele unverändert zuübernehmen.

Dropshadows

Da war es wieder, das böse Wort. Dennoch, als Beispiel für eine Tranzparenz Anwendung mit PNGs ist es perfekt.

Ergebnis: fertige Testseite

Die erste Schock kam, als ich sah wie groß die PNGs waren. Diese Grafik hat eine Dateigröße von 64 KByte ! Mehr als viel zu viel. Es war an der Zeit zu schauen, wie PNG komprimiert. Um voll abgestufte Tranzsparenz zu erhalten, speichert PNG wie auch Photoshop für jeden Pixel einen separaten Alphawert. Der Unterschied zu Tranzparenz ala Gif ist klar. Gif speichtert einen Alpha Wert als 1 oder 0 – transparent oder deckend. PNG stuft ab. Allerdings macht die 24bit Komprimierung noch etwas anderes, dazu aber später mehr. Klar war an dem Punkt, dass solche Grafiken nicht einsetzbar sind, da deren Dateigröße zu riesig ist.

zweiter Versuch:

Mein zweiter Gedanke ging in die Richtung, den Schatten vom Rest abzutrennen. Ich skalierte einfach die viel zu speicherintensiven Files und speicherte diese verkleinert ab.Darüber sollte dann nur eine Füllung in passender Größe kommen. Da der Schatten nur Stufen von transparentem Schwarz ist, dachte ich, dies wär sehr gut skalierbar und würde kaum Qualität einbüßen. Der Grund dafür war, dass dieses Skript, welches PNGs im IExplorer darstellt, auf einem DirectX Filter basiert, der gleichzeitig die PNGs interpoliert, sofern diese eine geringere Größe besitzen, als gebraucht wird. Genau diesen Filter hätte man so sehr gut missbrauchen können.

High-Res über Low-Res Bild

Im IExplorer sah, das Ganze auch wunderbar aus. Firefox allerdings zeigte einen sehr unsauberen übergang an der Kante vom HighRes Bild zum LowRes Bild. Was die Dateigröße anging hatte ich definitiv gewonnen. Aus dem 64kb PNG sind nun 2 PNGs mit einer Gesamtgröße von nur 29kb geworden, eine über 50% Komprimierung – nicht übel.

dritter Versuch:

Nur eine GrafikAn dem Punkt ging ich einen kleinen Schritt zurück, dass heißt aus der schicken Zettelgrafik wurde ein schlichte und sterile Rechteck Form. Der Gedanke war, ich spare mir somit eine der Grafiken. Als ich schließlich im Photoshop die Dateigröße der separaten Schatten PNG sah, war ich überrascht. Diese ist nur 5kb groß. Wie kann das sein? Vorteil dieser Methode: bei solch einfachen Formen (Rechteck) ist die Schattengrafik problemlos skalierbar und passt sich allen Größen an. Man hat so eine Grafik, die sich für alle DIVs als Schatten verwenden ließe. Danach war die Lösung klar.

bin fast da

Nun war es einfach: Schatten und Füllung separat in der passenden Größe. Die entscheidende Frage war, wieso diese 2 separaten PNGs zusammen kleiner sind als ein PNG mit Füllung und Schatten zusammen? Nach ein paar weiteren Tests ist der Grund recht einfach. PNG 24 speichert semi-intelligent aber vollautomatisch. Das reine Schatten PNG ist quasi einfarbig und nur durch die Transparenzstufen gekennzeichnet. Hier reduziert PNG 24 definitiv automatisch die Farben. Sobald allerdings die Füllung dazukommt, kann PNG 24 keine Farben mehr reduzieren. Dann schlägt die volle Farb- und Transparenz-Palette für jeden Pixel zu.

Bei der separaten Füllung konnte ich manuell eine 8 Farbenreduzierung festlegen. Sofern das Format weiterentwickelt werden sollte, wäre der nächste Schritt also eine manuelle Farbpaletten Festlegung gekoppelt mit vollem Alphakanal. Bis dahin, läuft man immer besser, wenn man beide Grafiken separat speichert.

Fazit

PNG hat auf alle Fälle eine Zukunft, sofern IE 7 endlich den versprochenen Support bietet, werden wir in 1 Jahr PNGs in der breiten Anwendung finden. Der volle Alphakanal ist zu schick und eröffnet neue Möglichkeiten des Gestaltens, als dass man PNG unbeachtet links liegen lassen könnte. Dieser Eintrag soll zeigen, was schon heute (wenn auch über kleine Umwege) realisierbar ist bzw. was es im Umgang mit PNGs zu beachten gilt.

fertige Testseite