Ratgeber · grundlagen
PNG-Transparenz und der Alphakanal: was JPG nicht kann
PNG kann mit dem Alphakanal jeden Pixel teildurchsichtig machen, JPG kann das prinzipiell nicht. Wie der Alphakanal funktioniert, der Unterschied zwischen PNG-8 und PNG-24/32 und warum eine aus JPG erzeugte PNG trotzdem nicht automatisch transparent wird.
Transparenz ist einer der wichtigsten Gründe, warum man sich überhaupt für PNG statt JPG entscheidet. Ein freigestelltes Logo, das auf jedem Hintergrund sauber sitzt, ein Icon ohne störenden Kasten drumherum, ein Wasserzeichen, das die Grafik darunter durchscheinen lässt: All das funktioniert nur, weil PNG eine Information speichern kann, die JPG schlicht nicht kennt. Diese Information heißt Alphakanal. In diesem Ratgeber erkläre ich, wie der Alphakanal technisch aufgebaut ist, warum JPG ihn nicht unterstützt und welche PNG-Varianten es gibt. Und ich räume ein hartnäckiges Missverständnis aus dem Weg: Eine PNG, die du aus einer JPG erzeugst, wird dadurch nicht automatisch transparent.
Was der Alphakanal eigentlich ist
Ein Farbbild besteht aus Bildpunkten, den Pixeln. Jeder Pixel hat eine Farbe, und diese Farbe wird in der digitalen Welt fast immer aus drei Grundwerten zusammengesetzt: Rot, Grün und Blau. Man spricht vom RGB-Modell. Jeder dieser drei Kanäle bekommt üblicherweise 8 Bit, also einen Wert zwischen 0 und 255. Aus der Kombination dieser drei Zahlen entsteht jede darstellbare Farbe, von tiefem Schwarz (0, 0, 0) bis reinem Weiß (255, 255, 255).
Der Alphakanal ist ein vierter Kanal, der zu diesen drei Farbwerten hinzukommt. Aus RGB wird RGBA, wobei das A für Alpha steht. Auch der Alphakanal hat bei einer vollwertigen PNG 8 Bit, also wieder 256 Abstufungen von 0 bis 255. Er beschreibt aber keine Farbe, sondern die Deckkraft des Pixels:
- Der Wert 0 bedeutet vollständig durchsichtig. Der Pixel ist unsichtbar, der Hintergrund scheint komplett durch.
- Der Wert 255 bedeutet vollständig deckend. Der Pixel verdeckt alles, was dahinter liegt.
- Alle Werte dazwischen erzeugen Teiltransparenz. Ein Alpha von 128 ergibt einen halbdurchsichtigen Pixel.
Diese feine Abstufung ist der entscheidende Punkt. Sie erlaubt nicht nur ein simples Sichtbar oder Unsichtbar, sondern weiche Übergänge. Genau das braucht man für saubere Kanten an einem freigestellten Objekt: Die Pixel am Rand sind nicht hart entweder voll da oder ganz weg, sondern verlaufen sanft in die Transparenz. Ohne diese Abstufung hätte jedes freigestellte Logo eine zackige, treppenartige Kontur.
Warum JPG keine Transparenz kann
JPG, technisch korrekt JPEG, wurde Anfang der 1990er Jahre für genau einen Zweck entworfen: fotografische Bilder mit möglichst kleiner Dateigröße zu speichern. Dafür arbeitet das Format mit einem Farbmodell, das aus Helligkeit und zwei Farbkomponenten besteht, und es speichert ausschließlich diese drei Kanäle. Einen vierten Kanal für Deckkraft sieht die JPG-Spezifikation gar nicht vor.
Das ist keine Einstellung, die man irgendwo aktivieren könnte, und auch kein Versäumnis. Es ist eine grundsätzliche Eigenschaft des Formats. Eine JPG-Datei hat strukturell keinen Platz, um pro Pixel eine Transparenzinformation abzulegen. Jeder Pixel ist immer voll deckend. Was du in einem Grafikprogramm vielleicht als durchsichtigen Bereich siehst, wird beim Speichern als JPG zwangsläufig mit einer Hintergrundfarbe aufgefüllt, meistens Weiß. Die Transparenz geht in diesem Moment unwiederbringlich verloren.
Hinzu kommt, dass JPG verlustbehaftet komprimiert. Scharfe Kanten, wie sie bei Logos und Grafiken vorkommen, werden dabei von Kompressionsartefakten umgeben, jenen typischen Schmutzschleiern an Konturen. Selbst wenn JPG Transparenz unterstützen würde, wäre es für freigestellte Grafiken die falsche Wahl. Mehr dazu, wo die jeweiligen Stärken liegen, findest du im Vergleich von JPG und PNG.
Wofür man Transparenz braucht
Der Alphakanal ist kein technisches Detail für Spezialfälle, sondern die Grundlage für einen großen Teil moderner Web- und Grafikgestaltung. Typische Einsatzbereiche sind:
- Logos und Markenzeichen, die auf unterschiedlichen Hintergrundfarben und Fotos platziert werden müssen, ohne einen weißen Kasten mitzuschleppen.
- Icons und Bedienelemente, die nahtlos in eine Oberfläche eingebettet werden und sich an deren Hintergrund anpassen.
- Freigestellte Objekte, etwa ein Produktfoto ohne Hintergrund, das frei über ein Layout gelegt werden kann.
- Overlays und Wasserzeichen, die teiltransparent über einer anderen Grafik liegen und das Darunterliegende durchscheinen lassen.
- Web-Grafik mit runden Ecken, Schatten oder weichen Verläufen, die sich organisch in die umgebende Seite einfügt.
In all diesen Fällen ist die Transparenz keine Spielerei, sondern funktional notwendig. Ein Logo mit weißem Kasten auf farbigem Grund wirkt unprofessionell, ein Icon mit hartem Rechteck stört das Layout. Genau deshalb ist PNG für diese Aufgaben der Standard geworden, wie ich im Ratgeber wann PNG statt JPG die bessere Wahl ist ausführlicher beschreibe.
Der wichtigste Punkt: JPG zu PNG erzeugt keine Transparenz
Hier kommt das Missverständnis, das ich am häufigsten erlebe. Viele nehmen an, dass das Umwandeln einer JPG in eine PNG den Hintergrund transparent macht. Das ist nicht der Fall, und es kann technisch gar nicht sein.
Eine JPG enthält, wie oben erklärt, überhaupt keine Transparenzinformation. Jeder Pixel ist deckend. Wenn ein Konverter diese Datei in eine PNG umwandelt, kann er nur die Information übernehmen, die tatsächlich vorhanden ist: die Farbwerte aller Pixel. Der Alphakanal der neuen PNG wird dabei durchgehend auf 255 gesetzt, also voll deckend. Das Ergebnis ist eine technisch einwandfreie PNG, die aber genauso aussieht wie die Ausgangs-JPG, inklusive des kompletten Hintergrunds.
Anders gesagt: Der Konverter kann nicht erraten, welcher Teil des Bildes Hintergrund sein soll und welcher Vordergrund. Diese Entscheidung ist eine kreative und inhaltliche Aufgabe, die ein Algorithmus beim reinen Formatwechsel nicht trifft. Ein weißer Hintergrund bleibt weiß, ein blauer Himmel bleibt blau.
Auch unser Konverter auf jpgpng.de arbeitet so, und das ganz bewusst. Die Umwandlung läuft vollständig im Browser über die Canvas-Technik, ohne dass deine Datei hochgeladen wird. Dabei werden die Pixel exakt übernommen und in das PNG-Format geschrieben. Du bekommst eine saubere, deckende PNG, aber keine automatische Freistellung. Diese Ehrlichkeit ist mir wichtiger als ein Versprechen, das kein Konverter halten kann.
Wenn du wirklich einen transparenten Hintergrund brauchst, führt der Weg über einen Bildeditor. Dort stellst du das Objekt frei, das heißt, du entfernst den Hintergrund manuell oder mit einem Freistellungswerkzeug und setzt die betreffenden Pixel auf transparent. Erst dieses bearbeitete Bild speicherst du dann als PNG, und erst dann enthält die Datei einen echten, sinnvoll genutzten Alphakanal. Programme wie GIMP, Photoshop oder auch viele Online-Editoren bieten dafür Werkzeuge an. Manche nutzen inzwischen auch automatische Hintergrundentfernung, die aber ein eigener Verarbeitungsschritt ist und nichts mit dem Formatwechsel zu tun hat.
Was beim Wechsel von JPG zu PNG dagegen tatsächlich passiert, ist eine verlustfreie Neuverpackung der Bilddaten. Die Details dazu, warum PNG ab diesem Punkt verlustfrei bleibt, habe ich im Ratgeber JPG zu PNG verlustfrei umwandeln zusammengefasst.
PNG-8, PNG-24 und PNG-32: drei Stufen von Transparenz
PNG ist nicht gleich PNG. Das Format kennt verschiedene Farbtiefen, und davon hängt ab, wie reichhaltig die Transparenz ausfällt. Die drei in der Praxis wichtigsten Varianten unterscheiden sich deutlich.
| Variante | Farben | Transparenz | Typischer Einsatz |
|---|---|---|---|
| PNG-8 | bis zu 256 (indiziert) | binär oder über Palette, meist hart | einfache Icons, Logos mit wenigen Farben |
| PNG-24 | rund 16,7 Millionen (RGB) | keine | fotoähnliche Bilder ohne Transparenz |
| PNG-32 | rund 16,7 Millionen plus Alpha (RGBA) | voller 8-Bit-Alphakanal | freigestellte Grafiken mit weichen Kanten |
PNG-8 arbeitet mit einer Farbpalette von höchstens 256 Einträgen, ähnlich wie das alte GIF-Format. Transparenz wird hier meist binär umgesetzt: Ein Pixel ist entweder ganz sichtbar oder ganz unsichtbar. Weiche Halbtransparenz an den Kanten ist nur eingeschränkt möglich. Das führt bei freigestellten Objekten oft zu fransigen Rändern. Für flächige Logos mit wenigen Farben ist PNG-8 dafür sehr platzsparend.
PNG-24 speichert volle Farbtiefe mit drei Kanälen, aber ohne Alphakanal. Es ist damit das deckende Pendant zu PNG-32. In der Praxis werden die Begriffe oft vermischt, weil viele Programme bei aktivierter Transparenz automatisch das vierte Byte hinzufügen.
PNG-32 ist das, was die meisten meinen, wenn sie von transparenter PNG sprechen. Es bietet die volle Farbtiefe von PNG-24 plus einen vollwertigen 8-Bit-Alphakanal. Damit sind die weichen, abgestuften Kanten möglich, die ein professionelles Freistellen erst schön machen. Für Logos und Icons mit Schatten oder Antialiasing ist PNG-32 die richtige Wahl.
Der Preis für volle Transparenz ist Speicherplatz. Ein zusätzlicher Kanal bedeutet mehr Daten pro Pixel, und die feinen Übergänge lassen sich schlechter komprimieren als große einfarbige Flächen. Wie sich das auf die Dateigröße auswirkt, habe ich im Ratgeber zur Dateigröße von JPG und PNG genauer aufgeschlüsselt.
Matte und Hintergrundfarbe bei der Anzeige
Ein letzter Aspekt, der oft für Verwirrung sorgt, ist die Frage, was an der Stelle eines transparenten Pixels eigentlich zu sehen ist. Die Antwort lautet: Das hängt vom Hintergrund ab, vor dem das Bild dargestellt wird. Transparenz ist keine Farbe, sondern eine Anweisung, den Untergrund durchscheinen zu lassen.
Damit das Auge überhaupt erkennt, wo Transparenz vorliegt, zeigen Bildprogramme dort üblicherweise ein Schachbrettmuster aus grauen und weißen Kästchen an. Dieses Muster ist nicht Teil des Bildes, sondern nur eine Darstellungshilfe. Im fertigen Layout wird die transparente Stelle von dem ausgefüllt, was dahinterliegt, sei es eine Hintergrundfarbe, ein Foto oder eine andere Grafik.
Wenn man eine teiltransparente Grafik auf einen festen Hintergrund rechnet, spricht man von Matte oder Hintergrundfarbe. Manche Editoren fragen beim Export, gegen welche Mattefarbe die halbtransparenten Randpixel berechnet werden sollen. Wählt man hier zum Beispiel Weiß, obwohl die Grafik später auf dunklem Grund landet, entsteht an den Kanten ein heller Schimmer. Es lohnt sich also, die spätere Umgebung im Blick zu haben, bevor man eine transparente PNG endgültig speichert. Dieses Zusammenrechnen von Vordergrund und Hintergrund über den Alphakanal nennt die Fachsprache Alpha-Compositing, und es ist der Mechanismus, der Transparenz im Browser und in jedem Layoutprogramm überhaupt sichtbar macht.
Zusammenfassung
Der Alphakanal ist die Eigenschaft, die PNG von JPG abhebt. Über einen vierten 8-Bit-Kanal kann jeder Pixel von voll durchsichtig bis voll deckend abgestuft werden, was weiche Kanten und echte Freistellungen erlaubt. JPG kennt diesen Kanal nicht und speichert immer nur deckende Pixel. Daraus folgt der wichtigste Merksatz dieses Ratgebers: Eine PNG, die aus einer JPG erzeugt wird, ist deckend, nicht transparent, weil in der Ausgangsdatei keine Transparenzinformation steckt. Echte Transparenz entsteht erst durch das Freistellen in einem Bildeditor und das anschließende Speichern als PNG-32. Wer das versteht, wählt das richtige Format und vermeidet die Enttäuschung über einen Hintergrund, der nach der Umwandlung einfach nicht verschwinden will.
Hast du einen Fehler entdeckt oder einen Quellen-Hinweis für uns? Schreib gern an info@akara-solutions.de.
Quellen
- W3C: Portable Network Graphics (PNG) Specification
- MDN Web Docs: Alpha compositing
- MDN Web Docs: Image file type and format guide
Korrekturen oder bessere Quellen? Schreib an info@akara-solutions.de. Änderungen landen mit Datum auf /korrekturen.
