PNG in HTML

[austriaman]

Hallo. Ich habe vor Kurzem eine Webpräsenz gestaltet und bei diversen Testdurchläufen auf verschiedenen Computern eine merkwürdige Entdeckung gemacht: Während mein Computer PNG-Grafiken durchaus korrekt auslesen kann (http://master2000.pytalhost.com/photoshop/PNG_korrekt_dargestellt.jpg), werden transparente Flächen derselben Grafiken in ein und demselben Webbrowser auf einem ANDEREN Computer durch Blautöne substituiert (http://master2000.pytalhost.com/photoshop/PNG_inkorrekt_dargestellt.jpg) Gibt es dafür plausible Gründe? Sollte für Grafiken mit transparenten Flächen aus Kompatibilitätsgründen eventuell ausschließlich das GIF-Format verwendet werden?

Vielen Dank für euren Rat!

 

[Tar]

Sollte für Grafiken mit transparenten Flächen aus Kompatibilitätsgründen eventuell ausschließlich das GIF-Format verwendet werden?

Ja. (mindesttextlängendingens)

 

[Maxi]

Der Grund dafür ist, dass du den IE Version 7 verwendet hast, der es korrekt darstellen kann, Version 6 kann es, wie man auf dem zweiten Screenshot sieht nicht, drum die blaue Farbe.

 

[austriaman]

Der Grund dafür ist, dass du den IE Version 7 verwendet hast, der es korrekt darstellen kann, Version 6 kann es, wie man auf dem zweiten Screenshot sieht nicht, drum die blaue Farbe.

Wie sieht das bei anderen Browsern aus? Ist das eine exklusive Eigenart des IE oder eine weitverbreitete Fehldarstellung? Danke für die raschen Antworten!

 

[Maxi]

Wie sieht das bei anderen Browsern aus? Ist das eine exklusive Eigenart des IE oder eine weitverbreitete Fehldarstellung? Danke für die raschen Antworten!

Eine Eigenart vom IE.

Moderne Brwoserversionen von Mozilla, Firefox, Opera etc. haben keine Probleme damit. Wie es bei Netscape ist weiß ich nicht.

 

[austriaman]

Eine Eigenart vom IE.

Moderne Brwoserversionen von Mozilla, Firefox, Opera etc. haben keine Probleme damit. Wie es bei Netscape ist weiß ich nicht.

Was mich zu einer weiteren Frage führt: gibt es ein Javascript, das darauf aufmerksam macht, dass eine neuere Browserversion zur korrekten Darstellung besagter Website von Nöten ist? Können ältere Versionen von Mozilla, Firefox, Opera und dergleichen PNG-Grafiken korrekt darstellen? Habe mit GIF eine Weile herumhantiert, wird aber in Photoshop leider nur sehr hässlich sowie pixelig exportiert...

 

[philipp]

Ja, du kannst eine Browserweiche setzen, die dem IE6- ein Gif anzeigt und allen anderen ein PNG. Der große vorteil von PNG ist, dass es einen 8bit Aplha Kanal unterstützt (soweit ich weis). Das sind 256 abstufungen, also sind Schatten, Scheine und dergleichen möglich. Der IE6- bekommt dann ein GIF, welches halt nur einen 1bit Alpha Kanal hat.

Falls du eine Fläche teilweise transparent haben willst solltest du die CSS möglichkeit ausnutzen, die kennt auch IE6-. Die wären:

IE: filter:alpha(opacity=Wert); // Wert muss zwischen 0 und 100 sein (Deckkraft).

Firefox: -moz-opacity:Wert; // Wert muss zwischen 0 und 1 sein (0.55 zb | Deckkraft)

Opera: opacity:Wert; // siehe Firefox

 

[3UGENE]

Eine nicht ganz valide Möglichkeit wäre es das Bild per CSS zu gestalten:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="deinbild.png", sizingMethod="scale");

Dies klappt bei Windows XP Corporated Edition Service Pack 1 und niedriger nicht.
Ansonsten bevorzuge ich die Methode von Philipp (dazu siehe den Beitrag weiter oben).