Warum wird bei PNG-Bildern oft der weisse Hintergrund schwarz?

Lösung: Wenn Ihr Logo oder ein anderes Bild auf einer Webseite unerwarteterweise mit einem schwarzen Hintergrund erscheint, liegt das daran, dass der transparente Bereich im Browser entweder nicht erkannt wird oder dass er bei einem der Bearbeitungsschritte verloren ging.

Bilddateien sind immer vier- bzw. rechteckig. Wenn ein Bild eine andere Form hat (z.B. ein rundes Icon), dann handelt es sich ebenfalls um ein viereckiges Bild, auf dem ein Gegenstand mit einem transparenten Hintergrund umgeben wurde. Die Fläche bis in die Ecken des Vierecks ist im Bild also durchaus vorhanden, wurde aber mit transparenter «Farbe» versehen. Das lässt sich in vielen Anwendungen nutzen. Hier zum Beispiel in Word. Um das obere Firefox-Logo läuft der Text quadratisch, um das untere läuft er dank der entsprechenden Einstellung eher rund, weil Word die transparenten Teile des Bildes erkennt und den Text an dieser Linie entlang führen kann.

Aber was, wenn ein scheinbar weisser oder mutmasslich transparenter Hintergrund schwarz erscheint? Für einen plötzlichen Transparenzverlust gibt es verschiedene mögliche Ursachen. Hier die häufigsten.

Dateiformate: Transparente Bereiche gibt es nur in Bilddateien der Formate GIF und PNG. Das Format TIF unterstützt dies zwar ebenfalls; jenes wird aber praktisch nur im Print-Bereich verwendet. Im Web hat sich für Bilder mit transparenten Bereichen PNG durchgesetzt, weil jenes mehr Farben als GIF unterstützt. Eine BMP- oder JPEG-Datei versteht keine Transparenz. Hat Ihr Bild also unversehens die Hintergrundfarbe gewechselt, könnte es sein, dass Sie es nicht als PNG, sondern als JPEG-Datei hochgeladen haben.

Kopiert statt geöffnet: Bei Rechtsklick aufs Bild auf einer Webseite, gefolgt von Bild kopieren geht die Transparenz meist ebenfalls verloren. Wenn Sie es dann irgendwo einfügen, dürfte das Resultat ein schwarzer anstelle eines transparenten Hintergrunds sein.

Beeinflussung durchs CMS: Ein Content Management System (CMS) ist eine auf einem Webserver laufende Software, mit der Sie zum Beispiel Ihre Blog-Beiträge und Bilder hochladen. Es ist denkbar, dass Ihr CMS (oder ein Modul darin) für bestimmte Bild-Gefässe gar keine Transparenz zulässt. Dann wird die Transparenz bei einem Bild einfach entweder durch Schwarz oder Weiss ersetzt, was je nach Sujet sehr hässlich aussieht. Es kann auch sein, dass PNG-Bilder für bestimmte Gefässe (z.B. Bildstrecken) vom CMS automatisch ins JPEG-Format umgewandelt werden – und schon wieder ist die Transparenz futsch.

Nicht in allen Anwendungen: Alle Bildbearbeitungsprogramme, die Ebenen unterstützen, kommen auch gut mit Transparenz klar. Das sind kostenpflichtige Programme wie Adobe Photoshop bzw. Photoshop Elements, aber auch kostenlose wie das einfachere Paint.NET (nicht mit MS Paint verwechseln!)  oder das umfangreiche Open-Source-Programm GIMP.

Das kleine Zeichenprogramm MS Paint hingegen, das seit Jahrzehnten mit Windows mitkommt, kann mit Transparenz gar nichts anfangen. Probieren Sie es mal aus: Öffnen Sie zum Beispiel die Wikipedia-Seite dieses Firefox-Logos in einem Browser. Fahren Sie per Maus über das Logo, erscheint unmittelbar ums Logo herum ein schachbrettartiges Muster. Die meisten Anwendungen, die Transparenz beherrschen, benutzen dieses Mittel, um Ihnen anzuzeigen, welche Bereiche des Bildes transparent sind.

Kopieren Sie für den Versuch das Bild per Rechtsklick und Kopieren. Öffnen Sie Microsoft Paint und fügen Sie es mit Ctrl+V (Strg+V) ein. Voilà, dort erscheinen die ursprünglich transparenten Bereiche plötzlich schwarz. Und hier sind diese dann wirklich schwarz und bleiben beim Speichern schwarz; sie werden also nicht nur so angezeigt. Auch wenn Sie ein schon gespeichertes PNG-Bild mit Transparenz in Paint öffnen und erneut speichern, geht die Transparenz verloren. Die Hintergrundfarbe, die Sie in Paint sehen, ist dann jene, durch welche die Transparenz ersetzt wird. Diesmal ist es Weiss. Paint zeigt beim Speichern eine Warnung an, dass die Transparenz verlorengeht.

Transparenz ist nicht gleich Transparenz: Es gibt im PNG-Format verschiedene Varianten, Transparenz zu vermerken. Nicht alle werden von allen Anwendungen gleich gut verstanden. Es kann also sein, dass eine Datei im einen Programm mit Transparenz (dargestellt per Klötzchenmuster) erscheint, im anderen wiederum nicht – und in Webbrowsern dann vielleicht erst recht nicht.