PNG - die Vorurteile und die Fakten dass man es doch überall einsetzen kann | 26. Februar 2005 um 02:24 Uhr

Im mittwöchigen Chat habe ich gemerkt, dass die meisten Webdesigner die da waren – auch die alteingesessenen – sehr viele falsche Vorurteile gegenüber dem Dateiformat PNG haben. Es fielen Sätze wie:

Vorurteile

Was bringt mir PNG, wenn die meisten Leute das dann sowieso nicht sehen können?

Ich verwende es nicht, weil die meisten Browser damit nicht umgehen können.

PNG ist ja ganz nett, aber der IE kann damit nicht umgehen.

Mit diesen Vorurteil möchte ich hier aufräumen und eine Zusammenfassung an Informationen über PNG bieten. Erst einmal zum Begriff selbst:

Portable Network Graphics — PNG (sprich: ping)
Ist ein Dateiformat zur Speicherung von Bilddaten.
Es wurde als freier Ersatz für das ältere proprietäre Format GIF entworfen und ist weniger komplex als TIFF.
Die Daten werden verlustfrei komprimiert abgespeichert (im Gegensatz zum verlustbehafteten JPEG-Dateiformat)

Quelle: http://de.wikipedia.org/wiki/Portable_Network_Graphics

Fakten

»Normale« PNGs ohne Transparenz

Erst einmal zu den ganz normalen PNG Grafiken, die keine Transparenz besitzen sondern eine ganz normale Hintergrundfarbe. Diese Funktionieren nach meiner Erfahrung nach in allen Browsern außer dem Internet Explorer und Netscape Version <= 3, die allerdings – wenn überhaupt dann – nur noch im Promillebereich in den Statistiken auftauchen. Ab der Version 4 funktionieren sie wunderbar. Sogar mein Amaya kann sie richtig anzeigen.

PNGs mit Transparenz

normale Transparenz

Wenn man Bilder mit 256 Farben einsetzt – also genau wie bei GIF – gibt es in den Browsern, die überhaupt PNG anzeigen könne auch absolut keine Probleme, es funktioniert also mindestens so gut, nur dass die Dateien meistens kleiner werden und es auch noch einige andere Vorteile gibt.

Alpha-Kanal Transparenz

Erst hier gibt es kleine Unterschiede, die man aber meistens eigentlich ganz gut ausmerzen kann.

Alle modernen Browser, außer der Internet Explorer, zeigen die PNGs mit der schönen Alpha-, bzw. Halbtransparenz an. Der Internet Explorer auf dem Mac kann das auch. Die Version 5.0 auf einem Windows System kann allerdings mit der Halbtransparenz gar nicht umgehen, auch nicht mit irgendwelchen Tricks. Die Versionen 5.5 und 6 dagegen können mittels alphaImageLoader Filters.

Das ist zwar ein wenig tricky aber funktioniert im großen und ganzen eigentlich wunderbar. Ein ausführliches HowTo hat Erik Arvidsson geschrieben.

Eine noch einfachere Möglichkeit halbtransparente PNGs einzusetzen gibt es mit dem IE7 von Dean Edwards. Damit versetzt man den IE eigentlich auch gleichzeitig in einen Modus in dem er fast so reagiert wie der Mozilla und Opera.

Diese beiden Möglichkeiten funktionieren allerdings nur, wenn im Internet Explorer Scripting aktiviert ist.

Was wenn kein Scripting erlaubt ist?
Speichern Dialog

Dann reagieren die IEs als ob es den Hack nicht geben würde und Zeigen halbtransparente PNGs mit einem grauen Hintergrund anstatt der Transparenz. Das das natürlich absolut unschön aussieht ist klar.

Da kann man aber auch bei allen Browsern, die überhaupt PNG unterstützen abhelfen. Man speichert einfach die Hintergrundfarbe, die man beim Abspeichern eingestellt hat mit. Das heißt nicht, dass man dem Bild eine Hintergrundfarbe gibt, sondern man wählt sie nur im Farbwähler als Hintergrundfarbe aus. Im Speichern Dialog gibt es unter Gimp dann die Auswahl [x] Hintergrundfarbe sichern, welches es erlaubt anstatt des default-Grau die ausgewählte Hintergrundfarbe mit zu sichern.

Somit hätten wich auch auf den IEs und NSs die keine Alphatransparenz anzeigen können die richtige Hintergrundfarbe zur Verfügung. Der Einzige Nachteil dessen ist, dass wenn sich jetzt die Hintergrundfarbe der HTML Seite ändert, man alle Bilder einzeln durchgehen muss und sie mit einer neuen Hintergrundfarbe für diese Fehlerhaften Browser abspeichern muss.

[update] Dank wahsaga kann ich euch jetzt endlich auch eine Lösung für das Abspeichern des Hintergrundes in Photoshop präsentieren:

Just select the mask color option, and set the color picker to the color of the background the picture is intended to sit on.

Ich habe leider kein deutsches Photoshop, deshalb kann ich es auch nur schweer übersetzen, vielleicht kann das einer der Leser in den Kommentaren machen und ich setze es hier rein.

[update:] Wie man alphatransparente PNGs im IE in der Praxis hinbekommt könnt ihr im folgeartikel lesen: Wie kann man PNG-Alphatransparenz im IE nutzen?

Pingbacks

  1. tomsw.org » PNG und Internet Explorer
  2. DrWitt's DailyStar » PNG-Bilder und ihre Vorurteile
  3. PNG-Alphatransparenz im Internet Explorer » Peruns Weblog
  4. PNGs im Internet Explorer - TP Hilfe Forum

Kommentare

Die Kommentare sind für diesen Eintrag geschlossen.