MKay: transparentes PNG

Hi,

es geht um folgende Webseite:
http://mkay-software.de.vu/

Im FireFox sieht diese Seite wundervoll aus.
Im IE v6 jedoch zeigt er mir die PNG-Bilder nicht richtig an.
Liegt das an der 6er-Version vom IE oder habe ich etwas beim Erstellen der PNGs falsch gemacht?

Gruss,
MKay

  1. Im IE v6 jedoch zeigt er mir die PNG-Bilder nicht richtig an.
    Liegt das an der 6er-Version vom IE oder habe ich etwas beim Erstellen der PNGs falsch gemacht?

    Der IE kann vor Version 7 Alpha-Transparenz von PNG-Bildern vor fremdem Hintergrund nicht darstellen, nur vor der im PNG-Bild definierten Hintergrundfarbe.

    Du kannst entweder eine Hintergrundfarbe definieren (Block bKGD, falls dein Malprogramm dies nicht kann, benutze TweakPNG), den AlphaImageLoader-Filter einsetzen (innerhalb von <!--[if lt IE 7]> ... <![endif]-->) oder einfach darauf setzen, dass diejenigen, die den IE benutzen, die Version 7 per automatischen Update schon bekommen haben (und dem Rest eh nicht zu helfen ist).

  2. Hi!

    Im IE v6 jedoch zeigt er mir die PNG-Bilder nicht richtig an.
    Liegt das an der 6er-Version vom IE oder habe ich etwas beim Erstellen der PNGs falsch gemacht?

    PNG ist nicht gleich PNG.
    Es gibt das PNG-8. Da kann man, genau wie beim GIF, eine Farbe als transparent definieren.
    Der MSIE 6 kommt damit klar, wie auch beim GIF.
    Dann gibt es aber noch das PNG-32, womit "echte" Transparenz, also über einen Alphakanal möglich ist. Und das macht der MSIE < 7 nicht mit.
    Um das hinzubekommen, kannst du aber einen der MS-Filter einsetzen.
    "AlphaImageLoader" heißt das Stichwort.

    Schöner Gruß,
    rob

    1. Es gibt das PNG-8. Da kann man, genau wie beim GIF, eine Farbe als transparent definieren.
      Der MSIE 6 kommt damit klar, wie auch beim GIF.
      Dann gibt es aber noch das PNG-32, womit "echte" Transparenz, also über einen Alphakanal möglich ist. Und das macht der MSIE < 7 nicht mit.

      Das ist nicht so ganz richtig. Es gibt zwei bzw. drei Farbmodelle bei PNG, Echtfarben, palettenbasierte Farben und Graustufen. Des weiteren gibt es zwei Transparenzmodelle, die Alpha-, also abgestufte Transparenz, und die binäre Transparenz, bei der eine bestimmte Farbe als Platzhalter für Transparenz steht.
      Die erste gibt es bei GIF nicht, keine Frage. Die zweite scheint mit der GIF-Funktionalität übereinzustimmen, tut es in der Praxis aber nicht, weil sie gerade _nicht_ wie bei GIF bei Palettenbildern vorkommt, sondern bei Echtfarbenbildern.

      Beim "PNG-8", wie du es nennst, das ist das palettenbasierte Modell mit maximal 256 verschiedenen Farben pro Bild, gibt es nur Alphatransparenz. Der alte IE kommt damit insofern klar, als dass er _alles_, was laut Alphakanal auch nur ansatzweise transparent sein soll, vollständig transparent erscheinen lässt.
      Das ist der erste IE-PNG-Fehler, nichtsdestotrotz lässt sich damit, wie du richtig geschrieben hast, das GIF-Verhalten nachbilden.

      "PNG-32", also das Echtfarbenmodell mit beliebig vielen unterschiedlichen Farben pro Bild, gibt es mit Alpha- und binärer Transparenz.
      Der alte IE unterstützt hier die Alphatransparenz nur insofern, als dass er die im Bild definierte Hintergrundfarbe (oder, falls nicht vorhanden, ein Standardgrau) nach Vorgabe durchscheinen lässt, nicht aber jenes, das ist zweite IE-PNG-Fehler, was hinterm Bild liegt. Binäre Transparenz unterstützt er überhaupt nicht (dritter IE-PNG-Fehler). Beides gilt auch für Graustufenbilder.

      PNG-32 passt zudem insofern nicht, als dass PNG auch 16 Bit pro Kanal zulässt, PNG-8 könnte neben des (farbigen) Paletten- auch ein echtes Graustufenbild sein.

      Das Verhalten des eigenen Browsers ist schön zu begutachten unter http://entropymine.com/jason/testbed/pngtrans/.

      1. Hi!

        PNG-32 passt zudem insofern nicht, als dass PNG auch 16 Bit pro Kanal zulässt

        Ja, das PNG-Format läßt dies zu. Nicht aber die meisten Bildbearbeitungsprogramme (Naja, einige schon. Meist aber nicht.).
        In Photoshop, Fireworks, GIMP und einigen anderen kann man nur mit 8 Bit pro Kanal arbeiten.
        Und wenn man dann das PNG speichern möchte, steht PNG-32 (also 8 Bit pro Kanal R, G, B + Alpha zur Vefügung). So nennt es z.B. Photoshop.

        Schöner Gruß,
        rob