Was ist ein Alphakanal?

Ein Alphakanal speichert für jeden Pixel die Transparenz. 255 beziehungsweise 100 Prozent bedeutet vollständig deckend, 0 vollständig transparent. Dazwischen entsteht Teiltransparenz.

Unterstützt JPG Transparenz?

Nein. Beim Speichern als JPG werden transparente Bereiche mit einer Vollfarbe, meist Weiß oder Schwarz, gefüllt.

Warum hat mein transparentes PNG beim Einfügen einen weißen Hintergrund?

Einige Anwendungen stellen Transparenz nicht dar und füllen solche Bereiche weiß. Die Daten können weiterhin in der Datei vorhanden sein; nur die Anwendung rendert sie nicht.

Kann ich den Hintergrund eines Screenshots transparent machen?

Screenshots erfassen den sichtbaren Hintergrund. Für Transparenz muss er danach in einem Editor oder mit einem automatischen Freistellwerkzeug entfernt werden.

Was unterscheidet binäre und Alpha-Transparenz?

Bei GIF ist jeder Pixel entweder transparent oder deckend. PNG, WebP und AVIF unterstützen 256 Transparenzstufen und damit glatte, geglättete Kanten auf beliebigen Hintergründen.

Bildtransparenz: Bedeutung und Anwendung | Glossar

Bildtransparenz macht Teile eines Bildes durchsichtig. Ein Alphakanal legt für jeden Pixel fest, ob er vollständig, teilweise oder gar nicht sichtbar ist.

So funktioniert Transparenz

Ein RGB-Bild speichert für jeden Pixel Rot, Grün und Blau. Transparenz ergänzt als vierte Komponente den Alphakanal, der die Deckkraft steuert.

Üblich sind Werte von 0 für vollständig transparent bis 255 für vollständig deckend. Bei 128 scheint der Hintergrund ungefähr zur Hälfte durch. Diese Abstufung ermöglicht weiche Übergänge, natürliche Schatten und geglättete Kanten ohne Treppeneffekt.

Liegt ein transparentes Bild über einem anderen Motiv oder einer Farbe, verrechnet die Rendering-Engine Vorder- und Hintergrund anhand des Alpha-Werts. Browser, Designprogramme und Bildbetrachter erledigen das in Echtzeit.

Der zusätzliche Wert pro Pixel vergrößert die Datei. Bei 1000 × 1000 Pixeln umfasst der Alphakanal unkomprimiert ungefähr eine Million Byte. Komprimierung reduziert den Zusatz, vollständig deckende Bilder bleiben aber etwas kleiner.

Formate mit Transparenz

PNG: 256 Deckkraftstufen, universell unterstützt und Standard für transparente Screenshots, Symbole und UI-Elemente.
WebP: voller Alphakanal im verlustbehafteten und verlustfreien Modus, meist kleinere Dateien als PNG und breite Browser-Unterstützung.
GIF: nur vollständig transparent oder deckend, keine weichen Übergänge und dadurch gezackte Kanten.
AVIF: voller Alphakanal und sehr gute Komprimierung, aber langsamere Kodierung und geringere Plattformabdeckung.
SVG: Deckkraft pro Form über CSS oder Attribute statt pro Rasterpixel.
JPG: keinerlei Transparenz.

Für maximale Kompatibilität ist PNG sicher, für Weboptimierung bietet WebP oft den besten Kompromiss.

Transparenz und Screenshots

Normale Screenshots erfassen jeden Hintergrund und sind vollständig deckend. Für Marketing, Dokumentation und Präsentationen kann ein freigestelltes Fenster oder UI-Element jedoch auf beliebigen Flächen eingesetzt werden.

Einige Tools können einzelne Fenster direkt ohne Desktop-Hintergrund erfassen. Andere erzeugen ein deckendes Bild, das anschließend freigestellt wird.

In App-Store-Motiven, Landingpages und Präsentationen lassen sich transparente Aufnahmen auf Markenflächen, in Geräte-Mockups oder neben weitere Elemente setzen, ohne rechteckigen Bildrand.

Meist ist Transparenz daher ein Schritt nach der Aufnahme. Ein einmal freigestelltes UI-Element kann in mehreren Layouts wiederverwendet werden.

Häufige Fehler

Als JPG speichern. Dadurch wird Transparenz unwiderruflich mit einer Vollfarbe ersetzt.
Nur auf Weiß prüfen. Säume werden oft erst auf dunklem oder farbigem Hintergrund sichtbar.
Das Schachbrettmuster für Bildinhalt halten. Es kennzeichnet im Editor nur Transparenz und darf nicht mit exportiert werden.
Unnötigen Alphakanal behalten. Wenn kein Pixel transparent ist, kann dessen Entfernung die Datei verkleinern.

Bildtransparenz