Der Alphakanal ist Der vierte in einem Pixel gespeicherte Wert, der steuert, wie transparent es ist, neben den Rot-, Grün- und Blauwerten, die seine Farbe bestimmen. Alpha erstreckt sich über einen Bereich von vollständig unsichtbar bis vollständig einfarbig, mit allen Ebenen der Teiltransparenz dazwischen. Dies ist der einzige Grund, warum ein PNG-Logo sauber über jedem Hintergrund schweben kann, während ein JPG dies nicht kann, weil JPG hat überhaupt keinen Alphakanal. Transparenz ist kein Trick des Auges oder eine Eigenschaft des gesamten Bildes; Es handelt sich um Daten, die jedem einzelnen Pixel zugeordnet sind. In dieser Anleitung wird erklärt, was der Alphakanal ist, wie er Hunderte von Transparenzstufen speichert, die Compositing-Mathematik, die transparente Ebenen zusammenfügt, welche Formate ihn unterstützen und was damit passiert, wenn Sie ein Bild von einem Format in ein anderes konvertieren.

Was der Alphakanal eigentlich ist

Jedes digitale Bild ist ein Pixelraster, und jedes Pixel speichert Zahlen, die es beschreiben. In einem Standardfarbbild enthält jedes Pixel drei Zahlen für Rot, Grün und Blau. Der Alphakanal fügt eine vierte Zahl hinzu, die eine andere Frage beantwortet: nicht welche Farbe hat dieses Pixel, sondern Wie viel davon solltest du sehen?. Ein Pixel kann leuchtend rot und vollständig einfarbig, leuchtend rot und halb durchsichtig oder leuchtend rot und völlig unsichtbar sein. Die Farbe bleibt in allen drei Fällen gleich; nur das Alpha ändert sich. Diese Trennung von Farbe und Opazität ermöglicht eine flexible Transparenz.

Der Begriff stammt aus dem 1984 von Thomas Porter und Tom Duff veröffentlichten Alpha-Compositing-Werk, in dem die Kombination von Bildern mit Transparenz formalisiert wurde. Ihr Modell ist immer noch die Grundlage jedes modernen Grafikprogramms, Webbrowsers und jeder Spiele-Engine. Der Alphakanal ist also keine neue, in Bildformate integrierte Annehmlichkeit; Es handelt sich um eine jahrzehntealte Idee, die stillschweigend fast alles antreibt, was Sie in Schichten auf einem Bildschirm sehen.

RGBA: der vierte Wert in jedem transparenten Pixel

Wenn ein Pixel Transparenz aufweist, wird es mit vier statt mit drei Werten beschrieben, geschrieben als RGBA: Rot, Grün, Blau und Alpha. Diese Notation sieht man überall im Design und bei der Webarbeit. In CSS bedeutet eine Farbe wie rgba(255, 0, 0, 0.5) reines Rot bei 50 Prozent Deckkraft. In einem Bildeditor erscheint die gleiche Idee als Deckkraft-Schieberegler auf einer Ebene. Das A ist immer der Deckkraftwert, der über der Farbe geschichtet und nicht mit ihr vermischt wird.

Alpha von Farbangelegenheiten getrennt halten. Wenn Transparenz in die Farbwerte integriert wäre, müsste ein halbtransparentes Rot als helleres Rosa gespeichert werden, und Sie könnten niemals das ursprüngliche Rot wiederherstellen oder es sauber über einem dunklen Hintergrund platzieren. Durch das Speichern der Deckkraft als eigenen Kanal behält das Format die wahre Farbe bei und überlässt der Software die Entscheidung, wie sie mit dem, was sich dahinter befindet, gemischt wird. Diese Flexibilität ist genau der Grund, warum Designer Assets mit einem Alphakanal exportieren, anstatt sie vorab auf einen Hintergrund zu mischen.

Wie Alpha Transparenzstufen speichert

Der Alphakanal speichert nicht nur ein oder aus. In einem Standard-8-Bit-Bild gilt Alpha 256 verschiedene Ebenen, von 0 bis 255. Ein Wert von 0 bedeutet, dass das Pixel vollständig transparent und unsichtbar ist, 255 bedeutet, dass es vollständig einfarbig und undurchsichtig ist, und jede Zahl dazwischen erzeugt teilweise Transparenz. Bei einem Wert von 128 ist das Pixel ungefähr zur Hälfte durchsichtig, sodass der Hintergrund mit einer Stärke von 50 Prozent durchscheint.

Diese 256 Stufen sorgen dafür, dass die Transparenz glatt und nicht hart aussieht. Ein Schlagschatten verblasst allmählich, da seine Pixel zum Rand hin abnehmende Alphawerte aufweisen. Ein Glas- oder Raucheffekt funktioniert, weil unterschiedliche Pixel unterschiedlich stark durchsichtig sind. High-End-Formate gehen weiter: 16-Bit-Alphakanäle bieten 65.536 Level für professionelles Compositing, bei Webbildern ist 8-Bit jedoch Standard und deckt alles ab, was das Auge braucht.

Alpha-Compositing: die Mathematik, die Ebenen vermischt

Wenn ein transparentes Pixel über einem Hintergrund liegt, muss die Software die endgültige Farbe ermitteln, die Sie sehen. Dies geschieht mit einer einfachen Mischformel. Das sichtbare Ergebnis entspricht dem Vordergrundfarbe mal Alpha plus Hintergrundfarbe mal eins minus Alpha. Im Klartext: Ein Pixel, das zu 70 Prozent undurchsichtig ist, trägt 70 Prozent seiner eigenen Farbe bei und lässt 30 Prozent des Hintergrunds durch.

Wenn Sie diese Berechnung für jedes Pixel durchführen, erhalten Sie ein sauberes Gesamtbild: ein Logo, das auf ein Foto überblendet ist, eine über ein Video eingeblendete Bildunterschrift, ein über eine Webseite gezeichnetes Menü. Das passiert ständig. Jedes Mal, wenn ein Browser ein halbtransparentes Element zeichnet oder ein Spiel eine Rauchwolke rendert, führt er Millionen Mal pro Sekunde Alpha-Compositing durch. Der Alphakanal liefert den Opazitätswert, den die Formel für jedes Pixel benötigt.

Anti-Aliasing: Warum Alpha Kanten glatt macht

Eine der wichtigsten Aufgaben des Alphakanals ist das Produzieren saubere, geglättete Kanten. Betrachten Sie die gebogene Kante eines kreisförmigen Logos. Ohne Transparenz müsste die Kurve aus harten quadratischen Pixeln aufgebaut werden, was ihr ein gezacktes, treppenförmiges Aussehen verleihen würde. Bei einem Alphakanal werden die Pixel entlang der Kante auf teilweise Transparenz eingestellt, sodass die Form allmählich mit dem, was sich dahinter befindet, übergeht.

Aus diesem Grund sieht ein gut gemachtes PNG-Logo auf einer weißen Seite, einer dunklen Seite oder einem Foto gestochen scharf aus. Die Randpixel sind nicht weiß oder einfarbig lackiert; Sie sind teilweise transparent und passen sich daher jedem Hintergrund gut an. Reduzieren Sie das Logo auf Weiß, und dieselben Randpixel werden teilweise weiß. Platzieren Sie die abgeflachte Version auf einem dunklen Hintergrund und Sie sehen einen hässlichen blassen Lichthof, weil die glatte Mischung auf die falsche Farbe festgelegt wurde. Der Alphakanal sorgt dafür, dass die Kante anpassungsfähig bleibt.

Gerade vs. vormultipliziertes Alpha

Es gibt zwei Möglichkeiten, Farbe und Alpha zusammen zu speichern, und die Kenntnis des Unterschieds verhindert eine Reihe frustrierender Fehler. In gerades Alpha, bleiben die Farbwerte unberührt und das Alpha wird vollständig getrennt gehalten, wodurch PNG Transparenz speichert. In vormultipliziertes Alphawerden die Farbwerte vorab mit dem Alpha multipliziert, sodass ein 50 Prozent transparentes Rot bereits als dunkleres Rot gespeichert wird.

Vormultipliziertes Alpha wird häufig bei Video-, Film-Compositing- und Echtzeit-Rendering verwendet, da es bestimmte Mischvorgänge beschleunigt und dunkle Ränder an den Rändern vermeidet. Gerades Alpha ist bei Standbildern und Web-Assets häufiger anzutreffen, da dadurch die ursprüngliche Farbe wiederhergestellt werden kann. Probleme treten auf, wenn die Software das eine erwartet und das andere empfängt, wodurch Kanten entstehen, die zu dunkel oder seltsam hell aussehen. Bei der alltäglichen Bildbearbeitung mit PNG- und Webgrafiken haben Sie es mit reinem Alpha zu tun, und die Software erledigt das für Sie.

Welche Bildformate unterstützen einen Alphakanal?

Nicht jedes Format kann Transparenz speichern, und das ist das praktische Detail, das bei der Konvertierung Probleme bereitet:

PNG: ein vollständiger 8-Bit-Alphakanal mit 256 Stufen, der Standard für transparente Webgrafiken.
WebP: einen vollständigen Alphakanal sowohl im verlustfreien als auch im verlustbehafteten Modus und erzeugt dabei kleinere Dateien als PNG.
AVIF: ein modernes Format mit Alpha-Unterstützung und starker Komprimierung, zunehmender Browser-Unterstützung.
GIF: Nur einfache Ein-/Aus-Transparenz ohne Teilebenen, sodass Kanten rau aussehen.
TIFF und SVG: Beide unterstützen Transparenz und werden in Druck- bzw. Vektorarbeiten verwendet.
JPG und BMP: Da sie überhaupt keinen Alphakanal haben, können sie keine Transparenz speichern.

Die Schlussfolgerung ist, dass PNG und WebP Ihre zuverlässige Wahl sind, wenn Transparenz bestehen bleiben muss, GIF nur für Ausschnitte mit scharfen Kanten geeignet ist und JPG für alles Durchsichtige vom Tisch ist.

Der Alphakanal im Web und in CSS

Im Web erscheint der Alphakanal an zwei Stellen: in Bilddateien und in CSS-Farbwerten. Ein transparentes PNG oder WebP trägt sein Alpha in der Datei selbst, sodass es über jedem Seitenhintergrund liegt. CSS fügt dann eine zweite Steuerungsebene mit den Farben rgba() und hsla() sowie der Eigenschaft opacity hinzu, sodass Sie Elemente ausblenden, Überlagerungen tönen und Glaseffekte erstellen können, ohne die Bilder überhaupt bearbeiten zu müssen.

Diese Kombination ist der Grund, warum moderne Schnittstellen vielschichtig und weich wirken. Ein Heldenabschnitt kann mithilfe von CSS-Alpha eine halbtransparente dunkle Überlagerung über ein Foto stapeln, um weißen Text lesbar zu machen, während das Logo darüber Bild-Alpha verwendet, um sauber darauf zu sitzen. Beide basieren auf der gleichen Grundidee: Jedes Pixel hat seine eigene Deckkraft und der Browser setzt alles in Echtzeit zusammen.

Was passiert mit Alpha, wenn Sie in JPG konvertieren?

Da JPG keinen Alphakanal hat, erfordert die Konvertierung eines transparenten Bildes in JPG eine Entscheidung: Die Transparenz muss durch etwas Festes ersetzt werden. Der Konverter Reduziert das Alpha und füllt jedes transparente oder halbtransparente Pixel mit einer Hintergrundfarbe, meistens weiß. Die durchsichtigen Bereiche werden einfarbig und die glatten Kanten, die auf partiellem Alpha basieren, werden an diese Füllfarbe gebunden.

Genau aus diesem Grund kann es vorkommen, dass ein Logo nach der Konvertierung in einem weißen oder schwarzen Kästchen landet oder an den Rändern einen schwachen Lichthof aufweist. Die Informationen, die zum Verschmelzen mit einem neuen Hintergrund erforderlich sind, sind verloren gegangen, da JPG keinen Speicherort für sie hatte. Wenn Sie Transparenz benötigen, um zu überleben, besteht die Antwort darin, das PNG beizubehalten oder stattdessen in WebP zu konvertieren. Wenn Sie wirklich ein flaches Bild wünschen, ist die Wahl der richtigen Füllfarbe wichtig. Unser Konverter Hier können Sie Weiß, Schwarz oder eine benutzerdefinierte Farbe für die Füllung auswählen oder WebP exportieren, um den Alphakanal vollständig beizubehalten transparenter Hintergrundführer geht durch.

Häufige Transparenzprobleme und wie man sie vermeidet

Die meisten Transparenzprobleme sind darauf zurückzuführen, dass der Alphakanal gegen die falsche Farbe abgeflacht wird, ein Schritt, der als Mattierung bezeichnet wird. Hier sind die üblichen Übeltäter:

Weiße oder schwarze Box: Ein transparentes PNG, das in JPG umgewandelt wurde, füllt seinen Hintergrund mit einer Volltonfarbe. Passen Sie die Füllung an das Ziel an oder behalten Sie die Transparenz bei.
Randhalo oder Rand: Ein auf Weiß mattiertes Logo, das dann auf einem dunklen Hintergrund platziert wird, zeigt einen blassen Umriss. Exportieren Sie die ursprüngliche transparente Datei erneut, mattiert auf die richtige Farbe, oder behalten Sie die Transparenz bei.
Dunkler Saum: Oftmals handelt es sich um eine Nichtübereinstimmung zwischen geradem und vormultipliziertem Alpha. Durch erneutes Exportieren mit dem richtigen Alpha-Typ wird das Problem behoben.
Nach der Bearbeitung verlorene Transparenz: Durch das Reduzieren von Ebenen oder das Speichern als JPG wird das Alpha verworfen. Behalten Sie einen Layer- oder PNG-Master.

Die Regel, die fast alle davon verhindert: Legen Sie den Hintergrund fest, bevor Sie reduzieren, und bewahren Sie eine Originaldatei auf, die noch über einen Alphakanal verfügt, damit Sie sie sauber erneut exportieren können.

Häufig gestellte Fragen

Was ist ein Alphakanal?

Der Alphakanal ist ein Wert pro Pixel, der die Transparenz steuert, von vollständig unsichtbar bis vollständig einfarbig, gespeichert neben den Farben Rot, Grün und Blau, die die Farbe eines Pixels festlegen.

Was bedeutet RGBA?

RGBA steht für Rot, Grün, Blau und Alpha. Der Alpha-Wert legt die Deckkraft des Pixels zusätzlich zu seiner Farbe fest, sodass rgba(255, 0, 0, 0,5) bei 50 Prozent rot ist.

Warum hat PNG Transparenz, JPG jedoch nicht?

Weil PNG enthält einen Alphakanal, JPG nicht. Ohne einen Ort zum Speichern der Deckkraft pro Pixel kann JPG überhaupt keine Transparenz bieten.

Wie viele Transparenzstufen kann ein Alphakanal speichern?

256 Stufen in einem Standard-8-Bit-Bild, von 0 für unsichtbar bis 255 für solide. Professionelles 16-Bit-Alpha bietet 65.536 Ebenen für feines Compositing.

Was passiert mit dem Alphakanal, wenn ich in JPG konvertiere?

Es ist abgeflacht. Transparente Bereiche werden mit einer Volltonfarbe gefüllt, normalerweise weiß, da JPG keine Möglichkeit hat, die Deckkraftdaten zu speichern.

Welche Bildformate unterstützen einen Alphakanal?

PNG, WebP, AVIF, TIFF und SVG unterstützen Alpha, wobei PNG und WebP eine reibungslose Teiltransparenz bieten. GIF hat nur Ein-/Aus-Transparenz, JPG dagegen keine.

Ist reines Alpha oder vormultipliziertes Alpha besser?

Keines von beiden ist allgemein besser; Sie eignen sich für verschiedene Aufgaben. Straight Alpha sorgt dafür, dass die Farben wiederhergestellt werden können und eignet sich für Standbilder, während vormultipliziertes Alpha das Einblenden von Videos und das Echtzeit-Rendering beschleunigt.

Wie halte ich die Transparenz beim Reduzieren der Dateigröße aufrecht?

Konvertieren zu WebP statt JPG. WebP behält den Alphakanal bei und reduziert die Größe um 25 bis 35 Prozent, sodass der Hintergrund durchsichtig bleibt und die Datei heller wird.