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.

Da verschiedene Anwendungen unterschiedlich mit der Transparenz in PNG-Dateien umgehen, empfiehlt es sich, wenn immer möglich auf transparente Hintergründe zu verzichten und die Transparenz nur dort gezielt einzusetzen, wenn Sie diese wirklich brauchen.

Transparenz ist meistens gar nicht sinnvoll. Ein rundes Firmenlogo oder ein paar Icons in den Menüs Ihrer Webseite profitieren von der Möglichkeit, den Hintergrund ums Objekt transparent zu machen. Schliesslich sollen sich diese Objekte ohne viereckige Fläche drumherum in jeden Hintergrund einpassen. In Bildern auf Social Media, in Produktbildern für Blogs oder in Bildstrecken ist Transparenz hingegen meist nicht nur überflüssig, sondern oft sogar störend, da Sie nicht für jeden Browser genau wissen können, was dieser daraus macht. Entscheiden Sie sich für eine einheitliche Hintergrundfarbe; meistens ist dies Weiss.

Für bessere Kontrolle ersetzen Sie überflüssige Transparenz in den Bildern durch die gewünschte Hintergrundfarbe. Behalten Sie aber die Originaldateien, für den Fall, dass Sie dennoch wieder Versionen mit Transparenz brauchen.

Paint als abschreckendes Beispiel: Dort könnten Sie einen unerwünschten, als Schwarz dargestellten transparenten Hintergrund höchstens per Anklicken des Farb-Eimers und Drüberkippen von weisser Farbe umfärben. Das sieht dann aber schlecht aus, weil ums Objekt herum ein quasi-schwarzer, hässlich gezackter Rand entsteht. Hier im Vergleich – einmal per Farb-Eimer weiss gefärbt, einmal in einer anderen Anwendung korrekt gefärbt, siehe Screenshot. Microsoft Paint kann vieles, aber nicht das!

So gehts in GIMP: Öffnen Sie das Bild. Es erscheint zunächst noch mit Klötzchenmuster (bedeutet: Transparenz). Klicken Sie im oberen linken Bereich aufs Quadrat für die Hintergrundfarbe. Wählen Sie die gewünschte Hintergrundfarbe aus. Bei «HTML-Notation» steht der Farbcode ffffff übrigens für Weiss und 000000 für Schwarz. Klicken Sie auf OK. Noch ist das Schachbrett bei den transparenten Bereichen zu sehen. Gehen Sie nun zu Ebene/Transparenz/Alphakanal entfernen, ändert sich der Hintergrund zur gewählten Farbe, also etwa zu Weiss.

Als Alternative – ebenfalls in GIMP – erstellen Sie eine neue Ebene, ziehen diese im Ebenenmanager unten rechts auf die unterste Ebene, füllen diese mit der Wunschfarbe (hier: Weiss), klicken auf eine der Ebenen und wählen Sichtbare Ebenen vereinen. Der Effekt ist derselbe. Und es dürfte nach diesem Schema in allen Bildbearbeitungsprogrammen funktionieren, die mit Ebenen umgehen können.

In IrfanView: IrfanView kann die Transparenz durch die fürs Programmfenster eingestellte Hintergrundfarbe ersetzen – und zwar sehr sauber. Öffnen Sie in IrfanView hierfür zuerst Optionen/Einstellungen/Anzeige. Bei den Fenster-Optionen die «Farbe des Hauptfensters» wählen und dort die gewünschte Farbe aussuchen, zum Beispiel Weiss. Nun schliessen Sie das Bild und öffnen es erneut in IrfanView. Jetzt erscheint der Hintergrund Weiss. Ab jetzt geht es für alle Bilder, deren Transparenz Sie durch diese Farbe ersetzen wollen, wie folgt: Öffnen Sie das Bild in IrfanView. Gehen Sie zu Datei/Speichern unter. Aktivieren Sie ganz unten allenfalls noch Optionen-Dialog anzeigen. In diesem Dialog deaktivieren Sie Transparente Farbe speichern. Vergeben Sie noch einen passenden Dateinamen, wird das Bild anstelle von Transparenz mit der gewählten Hintergrundfarbe gespeichert.