user_mobilelogo

In der Webshow können für eigene Rahmen und Buttons die verschiedensten Dateitypen verwendet werden. Leider können nicht alle Browser alle Dateitypen korrekt anzeigen. Gerade der Dateityp PNG bietet eine Menge Möglichkeiten. So können diese Dateien eine Farbtiefe von 16 Mio. Farben haben und können transparente und teiltransparente Bereiche in einem Alphakanal speichern. Dadurch ist deren Qualität wesentlich besser als zum Beispiel GIF-Dateien. Diese können nur eine Farbtiefe von 256 Farben speichern und transparente Bereiche werden nicht in einem Alphakanal gespeichert. Das Hauptproblem besteht in den teiltransparenten Bereichen, wie sie zum Beispiel bei Schattierungen vorkommen. GIF-Dateien kennen keine teiltransparente Bereiche. Ein Pixel kann transparent sein oder nicht. Ein Schatten wird aber nach außen hin immer heller, bis er ganz in die Hintergrundfarbe übergegangen ist.
Leider kann der Alphakanal einer PNG-Datei vom Internet-Explorer nicht angezeigt werden. So ist praktisch ein großer Teil des Vorteils der PNG-Dateien verloren. Trotzdem ist es sinnvoll PNG-Dateien in der Webshow zu verwenden. Die PNG-Dateien werden von der WebShow in JPG-Dateien umgewandelt. Dabei wird die aktuelle Hintergrundfarbe der Webshowseite berücksichtigt. So kann durch Mischen von Pixeln der Hintergrundfarbe und Pixeln des teiltransparenten Bereichs eine relativ sauberere Teiltransparenz mit der JPG-Datei dargestellt werden. Anstatt des JPG-Formats sind auch GIF-Dateien möglich. Dies müsste man aber von Hand in den HTML-Dateien ändern. In meinem Beispiel habe ich GIF-Dateien verwendet, da dies händisch einfacher zu erzeugen war.

PNG-Datei mit 16 Mio. Farbtiefe und Alphakanal
(mit Mozilla sieht dies perfekt aus, mit dem IE sieht man hinter dem Rohr ein farbiges Rechteck in Größe des Bildes.)

 

Beispiel_PNG1.png

GIF-Datei mit 256 Farben und ohne Alphakanal.
(Der Schatten ist sichtbar, aber es ist ein weißer Rand um den Schatten sichtbar.)
 

Beispiel_PNG2.gif

GIF-Datei mit 256 Farben und ohne Alphakanal.
(Der weiße Rand des linken Bildes wurde durch die Hintergrundfarbe ersetzt. Dies funktioniert sogar bei strukturiertem Hintergrund.)

Beispiel_PNG3.gif