Transparenz, Hintergrund und Farbräume beim PNG-zu-JPG

PNG und JPG wirken austauschbar, sind technisch aber grundverschieden gebaut. PNG ist ein verlustfreies Rasterformat mit optionalem Alphakanal, JPG ein verlustbehaftetes Format ohne jede Transparenz. Beim Umwandeln treffen diese beiden Welten aufeinander, und an genau dieser Schnittstelle entstehen die meisten überraschenden Ergebnisse: ein plötzlich weißer Hintergrund, ein heller Saum um ein Logo oder farblich verschobene Töne. Dieser Artikel erklärt die zugrunde liegende Mechanik und ist rein technisch zu verstehen.

JPG kennt kein Alpha

Der Alphakanal eines PNG speichert pro Pixel einen zusätzlichen Wert, der die Deckkraft beschreibt. Ein Alphawert von 0 bedeutet vollständig durchsichtig, 255 vollständig deckend, alle Werte dazwischen sind teiltransparent. Damit lassen sich weiche Kanten, Schatten und freigestellte Motive auf beliebigem Untergrund darstellen.

JPG besitzt diesen vierten Kanal nicht. Es speichert ausschließlich die drei Farbkanäle Rot, Grün und Blau. Es gibt im JPG-Datenstrom keinen Ort, an dem Transparenz abgelegt werden könnte. Das ist keine Limitierung einer bestimmten Software, sondern eine Eigenschaft des Formats selbst.

Wenn ein Pixel im PNG teiltransparent ist, muss beim Umwandeln eine Entscheidung getroffen werden: Mit welcher Farbe wird die fehlende Deckkraft aufgefüllt? Diese Entscheidung trifft der Konverter, und das Ergebnis hängt vollständig von der gewählten Hintergrundfarbe ab.

Der Matte-Prozess: Wie die Lücke gefüllt wird

Das Auffüllen transparenter Bereiche heißt Matting. Mathematisch wird jeder Pixel mit der Hintergrundfarbe nach seiner Deckkraft gemischt. Für einen Pixel mit Vordergrundfarbe F, Hintergrundfarbe B und einem auf 0 bis 1 normierten Alpha a gilt:

Ergebnis = F · a + B · (1 − a)

Ein voll deckender Pixel (a = 1) behält exakt seine Farbe. Ein voll transparenter Pixel (a = 0) wird komplett durch die Hintergrundfarbe ersetzt. Ein halbtransparenter Pixel an einer weichen Kante wird zur Hälfte mit dem Hintergrund vermischt. Diese Mischung an den Rändern ist der kritische Punkt, an dem ein Halo entstehen kann.

Hintergrundfarbe richtig wählen

Die Faustregel lautet: Die Matte-Farbe sollte der Fläche entsprechen, auf der das JPG später liegt. Ein Logo, das auf einer weißen Produktseite erscheint, wird mit Weiß gemattet. Ein Motiv, das in einer dunklen App eingebettet wird, gehört auf einen dunklen oder schwarzen Hintergrund.

Spätere Umgebung	Empfohlene Matte-Farbe	Risiko bei falscher Wahl
Weiße Seite	Weiß (#FFFFFF)	dunkler Saum bei schwarzem Matte
Dunkler Hintergrund	Schwarz oder Markenfarbe	heller Halo bei weißem Matte
Farbige Markenfläche	exakter Hex-Wert der Fläche	sichtbarer Farbrand
Druck auf Papier	Weiß	unsauberer Kantenrand

Stimmt die Matte-Farbe nicht mit der späteren Umgebung überein, bleibt an den weichen Kanten ein Mischsaum stehen, der sich vom Untergrund abhebt. Bei einem hellen Saum auf dunklem Grund spricht man vom klassischen weißen Halo.

Die Grafik illustriert das Prinzip an Beispielwerten: Passt die Matte zur Umgebung, ist der Saum praktisch unsichtbar. Je größer der Kontrast zwischen Matte und tatsächlichem Untergrund, desto breiter und auffälliger wird der Rand wahrgenommen.

Ergebnis = Vordergrund mal Alpha plus Hintergrund mal Restdeckkraft. Wer den Hintergrund passend wählt, hat keinen Halo.

Praxisbeispiel: Transparentes Logo wird JPG

Ein Kunde liefert ein Logo als PNG mit transparentem Hintergrund und weichem Schlagschatten. Es soll in einen PDF-Geschäftsbericht, dessen Seiten weiß sind. Wird das Logo mit Weiß gemattet, mischt sich der halbtransparente Schatten sauber ins Weiß, die Kanten wirken weich und korrekt.

Würde dasselbe Logo versehentlich mit Schwarz gemattet, entstünde rund um den Schatten ein grauer bis dunkler Rand, weil die teiltransparenten Schattenpixel nun mit Schwarz statt mit Weiß verrechnet würden. Auf der weißen PDF-Seite sähe das aus wie ein schmutziger Saum. Dasselbe Logo gehört auf eine dunkle Titelfolie dagegen zwingend auf schwarzen Matte, sonst leuchtet der weiße Halo.

Farbräume: sRGB als Web-Standard

Ein Farbraum legt fest, welche reale Farbe ein Zahlentripel bedeutet. Der Wert (255, 0, 0) ist nur dann ein definiertes Rot, wenn klar ist, in welchem Farbraum er gilt. Fürs Web ist dieser Standard sRGB, ein 1996 von der Industrie definierter Farbraum, den nahezu alle Bildschirme und Browser als Default annehmen.

Adobe RGB umfasst einen größeren Farbumfang, vor allem in den Grüntönen, und wird in der professionellen Fotografie und im Druck genutzt. Das Problem entsteht beim Web-Einsatz: Liegt ein Bild in Adobe RGB vor, hat aber kein eingebettetes Profil, interpretiert der Browser die Zahlen trotzdem als sRGB. Da sRGB den gleichen Zahlen weniger gesättigte Farben zuordnet, wirken solche Bilder flau und entsättigt.

Farbraum	Einsatzgebiet	Verhalten im Browser ohne Profil
sRGB	Web, Bildschirm	korrekt, ist der angenommene Default
Adobe RGB	Druck, Profifotografie	entsättigt, weil als sRGB gelesen
Display P3	moderne Wide-Gamut-Displays	nur mit Profil korrekt

Die saubere Lösung ist, Web-Bilder konsequent in sRGB zu konvertieren, bevor sie ins JPG umgewandelt werden. Dann sind sie unabhängig vom eingebetteten Profil korrekt, und das Resultat sieht auf allen Standard-Displays gleich aus.

ICC-Profile, 8-bit und Gamma

Ein ICC-Profil ist eine Datei, die den Farbraum eines Bildes exakt beschreibt. Eingebettet im JPG sorgt es dafür, dass farbverwaltete Programme die Farben korrekt umrechnen. Für reine Web-Bilder in sRGB ist ein eingebettetes Profil optional, es schadet nicht, vergrößert die Datei aber um einige Kilobyte. Entscheidend ist nicht das Profil selbst, sondern dass die Bilddaten wirklich in sRGB vorliegen.

JPG speichert je Kanal 8 Bit, also 256 Tonwertstufen pro Farbkanal. Das ergibt rund 16,7 Millionen darstellbare Farben, was für Fotos ausreicht. PNG kann optional 16 Bit pro Kanal speichern, also feinere Tonwertabstufungen. Wird ein 16-bit-PNG nach JPG konvertiert, fällt die Tiefe auf 8 Bit. Bei normalen Fotos ist das unsichtbar, bei sehr glatten Verläufen wie einem Studio-Hintergrund kann jedoch Banding entstehen, sichtbare Stufen statt eines weichen Übergangs.

Gamma beschreibt die nichtlineare Beziehung zwischen gespeichertem Zahlenwert und tatsächlicher Helligkeit. sRGB definiert eine feste Gammakurve mit einem Wert um 2,2. Solange Quelle und Ziel beide in sRGB arbeiten, bleibt die Helligkeit korrekt. Probleme treten nur auf, wenn ein Bild mit abweichender Gamma-Information umgewandelt wird, ohne dass diese berücksichtigt wird. Dann kippt die Gesamthelligkeit, das Bild wirkt zu hell oder zu dunkel.

Was du vor jeder Umwandlung prüfen solltest

Drei Fragen entscheiden über ein sauberes Ergebnis. Erstens: Enthält das PNG Transparenz, und auf welchem Untergrund erscheint das JPG später? Daraus folgt die Matte-Farbe. Zweitens: Liegt das Bild in sRGB vor? Falls nicht, vorher konvertieren, sonst drohen entsättigte Farben im Browser. Drittens: Hat das PNG 16 Bit Tiefe und feine Verläufe? Dann auf mögliches Banding achten.

Diese drei Punkte erklären praktisch alle überraschenden Ergebnisse beim Umwandeln von PNG nach JPG. Sind sie geklärt, ist die Konvertierung vorhersagbar und das JPG sieht genau so aus, wie es soll, auf dem Bildschirm, im Layout und im Druck.