Transparente Bildbereiche 01.10.2020, 08:00 Uhr

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

Sie stellen eine PNG- oder GIF-Bilddatei auf Ihre Webseite. Doch – oh, weh – anstelle eines weissen Hintergrunds ist jener jetzt schwarz! Wieso das? Und wie können Sie das ändern?
(Quelle: PCtipp.ch )
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.
Auch Word kann sich auf Geheiss an transparenten Teilen eines Bildes orientieren
Quelle: PCtipp.ch

Warum ist der PNG-Bild-Hintergrund plötzlich schwarz?

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.
Fahren Sie per Maus über dieses als Beispiel geöffnete Logo, erscheint das Klötzchenmuster, das die transparenten Bereiche anzeigt
Quelle: PCtipp.ch/Wikipedia/Mozilla
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.
Beim Speichern aus Paint geht allenfalls vorhandene Transparenz verloren. Die Farbe, die Sie im Hintergrund sehen, ist jene, die das Bild dann tatsächlich haben wird.
Quelle: Screenshot PCtipp.ch
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.
Nächste Seite: Wann ist ein transparenter Hintergrund überhaupt sinnvoll? Und was tun?

Kommentare

Avatar
MIal47TIP
04.10.2020
Was haben die "Portable Netzwerkgrafik" (hier als PNB (???) genannt) mit Firefox Browser. Bitte kurze und verständliche Antwort. Ich will Bilder klar und deutlic mit "natürlichen Farben sehen". Auch meinme Frage, Was hat die "Portable Netzwerkgrafik" mit Transparenz per Alphakanal. Ich habe nie irgegend eine Funktion mit Transparenz von Alphakanäle aktiviert. Wo kann ich diese Funktion in Firefox deaktivieren. Ich will nicht Sahcne haben, die ci9h weder bestellt, noch aktiviert hatte. Danke

Avatar
Gaby Salvisberg
05.10.2020
Hallo MIal47TIP Da scheint es ein grosses Missverständnis zu geben. Firefox ist in diesem Artikel nicht das Thema. Der Artikel ist nur für Leute gedacht, die selbst Bilder bearbeiten und diese ins Internet stellen. Ich habe als Beispiel-Bild das Firefox-Logo genommen. Ist es das, was dich verwirrt? (Ich hätte vielleicht irgend etwas anderes als Beispiel-Bild verwenden sollen. Wenn du keine Bilder ins Internet stellst, ist der Artikel für dich nicht wichtig. Herzliche Grüsse Gaby

Avatar
malamba
05.10.2020
scheint mir ein verwirrter Textkommentat von Mlal47Tip zu sein...........?