Vier Kanäle statt drei
Ein normales Farbbild speichert pro Pixel drei Werte: Rot, Grün, Blau (RGB). Transparenzfähige Formate fügen einen vierten hinzu — den Alpha-Kanal. Er beschreibt die Deckkraft jedes Pixels: 0 heißt vollständig durchsichtig, der volle Wert heißt vollständig deckend. Und — das ist der wichtige Teil — alle Werte dazwischen bedeuten Halbtransparenz. Genau die macht weiche Kanten, sanfte Schatten und Anti-Aliasing möglich.
Warum JPG den weißen Kasten erzeugt
JPG hat nur die drei Farbkanäle, keinen Alpha-Kanal. Speicherst du ein transparentes Bild als JPG, muss die Software die Transparenz durch eine feste Farbe ersetzen — üblicherweise Weiß. Das Ergebnis: Dein freigestelltes Logo sitzt plötzlich in einem weißen Rechteck. Kein Bug, sondern die logische Folge des Formats. Transparenz überlebt nur in Formaten mit Alpha-Kanal. Welches Format wann passt, klärt der Beitrag JPG vs PNG.
Die Formate und ihre Transparenz-Fähigkeit
| Format | Transparenz | Besonderheit |
|---|---|---|
| PNG | ✅ voller Alpha-Kanal | Standard für Logos/Grafiken |
| WebP | ✅ Alpha-Kanal | kleiner als PNG |
| AVIF | ✅ Alpha-Kanal | noch kleiner, neuer |
| GIF | ⚠️ nur ganz/gar nicht | keine weichen Kanten |
| SVG | ✅ (Vektor) | Transparenz per Definition |
| JPG | ❌ keine | ersetzt durch feste Farbe |
Der Sonderfall GIF ist lehrreich: Es kennt nur „durchsichtig" oder „deckend", keine Zwischenwerte. Deshalb wirken GIF-Logos an den Rändern oft treppig — die weichen Übergänge, die der Alpha-Kanal erlaubt, fehlen.
Der weiße Saum: das Heiligenschein-Problem
Ein tückischer Nebeneffekt der Halbtransparenz: Wird ein Objekt gegen einen weißen Hintergrund freigestellt, mischen sich in die halbtransparenten Kantenpixel Reste dieses Weiß. Legt man das Bild anschließend auf dunklen Grund, bleibt ein heller Rand — der berüchtigte „Heiligenschein", besonders sichtbar im Dark Mode. Die Lösung: gegen transparent statt gegen Weiß freistellen. Dieser und fünf weitere Gründe für unsaubere Logos stehen im Beitrag Logo unscharf auf der Website.
Transparenz und Dateigröße
Der Alpha-Kanal kostet Speicher — ein transparentes PNG ist größer als ein gleich großes ohne Transparenz. Deshalb gilt: Transparenz nur nutzen, wo sie gebraucht wird. Ein Foto, das ohnehin ein volles Rechteck füllt, braucht keinen Alpha-Kanal und gehört als JPG oder WebP gespeichert. Ein Logo, das auf beliebigem Hintergrund sitzen soll, braucht ihn — dann PNG, WebP oder am besten SVG.
Kurz gemerkt
- Transparenz = vierter Kanal (Alpha), speichert Deckkraft.
- JPG kann es nicht — daher der weiße Kasten.
- PNG/WebP/SVG können es — für Logos und Freisteller.
- Gegen transparent freistellen, nicht gegen Weiß — sonst Saum.
Häufige Fragen
Warum hat mein transparentes Logo plötzlich einen weißen Hintergrund?
Weil es als JPG gespeichert wurde. JPG kennt keinen Alpha-Kanal und ersetzt Transparenz durch eine feste Farbe — meist Weiß. Transparenz überlebt nur in Formaten mit Alpha-Kanal wie PNG, WebP oder SVG.
Was ist der Alpha-Kanal?
Zusätzlich zu den Farbkanälen Rot, Grün und Blau speichert der Alpha-Kanal für jeden Pixel die Deckkraft — von 0 (vollständig durchsichtig) bis 100 % (vollständig deckend). Werte dazwischen erzeugen Halbtransparenz, etwa weiche Kanten und Schatten.
Warum hat mein freigestelltes Bild einen hellen Rand?
Weil die halbtransparenten Kantenpixel gegen einen weißen Hintergrund berechnet wurden. Legt man das Bild dann auf dunklen Grund, bleibt ein heller Saum — der 'Heiligenschein'. Sauber freistellen gegen transparent statt gegen Weiß vermeidet das.
Welche Formate unterstützen Transparenz?
PNG (voller Alpha-Kanal), WebP und AVIF (ebenfalls Alpha), GIF (nur ganz-oder-gar-nicht, keine Halbtransparenz) und SVG (Vektor, Transparenz per Definition). JPG unterstützt keine Transparenz.
Quellen
MDN — Alpha (Glossar) · W3C — PNG-Spezifikation (Alpha-Kanal).