WebP mit Transparenz: Alphakanal verstehen

Transparenz entscheidet darüber, ob ein Logo sauber auf jedem Hintergrund sitzt oder von einem Kasten umgeben ist. WebP bringt diese Fähigkeit mit und kombiniert sie mit moderner Kompression. Dieser Artikel erklärt, was der Alphakanal leistet, was WebP gegenüber PNG bringt und wie Sie transparente Bilder im Browser umwandeln.

Was ein Alphakanal ist

Ein digitales Bild besteht aus Farbkanälen. Im RGB-Modell speichert jeder Pixel einen Wert für Rot, Grün und Blau. Der Alphakanal kommt als vierter Kanal hinzu und beschreibt nicht die Farbe, sondern die Deckkraft eines Pixels. Man spricht deshalb auch von RGBA.

Bei 8 Bit pro Kanal kann der Alphawert 256 Stufen annehmen. Der Wert 0 bedeutet vollständig durchsichtig, der Pixel gibt den Hintergrund frei. Der Wert 255 bedeutet vollständig deckend. Alle Werte dazwischen erzeugen Halbtransparenz, die für weiche Schatten, sanfte Kantenübergänge und Glaseffekte gebraucht wird.

Diese 256 Stufen unterscheiden einen vollwertigen Alphakanal von einer Ein-Bit-Transparenz, bei der ein Pixel nur sichtbar oder unsichtbar sein kann. Letztere erzeugt harte, ausgefranste Ränder, wie man sie von GIF-Grafiken kennt.

Warum JPG hier ausscheidet

Das JPEG-Format kennt keinen Alphakanal. Es wurde für Fotos entwickelt, bei denen ein deckendes Rechteck die Norm ist. Wer ein freigestelltes Produktfoto als JPG speichert, bekommt einen Hintergrund, meist weiß oder schwarz, weil das Format Durchsichtigkeit nicht abbilden kann.

Das ist der entscheidende Punkt beim Umwandeln: Aus einer Quelle ohne Transparenz lässt sich keine erzeugen. Wenn Sie ein JPG in WebP umwandeln, bleibt das Bild deckend. Für echte Transparenz brauchen Sie eine Quelle, die den Alphakanal mitbringt, typischerweise ein PNG oder ein freigestelltes Original aus einem Bildbearbeitungsprogramm.

WebP: Transparenz in beiden Modi

Das Format unterstützt einen 8-Bit-Alphakanal in beiden Kompressionsmodi.

Im verlustfreien Modus bleibt jeder Pixel exakt erhalten, Farbe wie Deckkraft. Das eignet sich für Logos, Strichgrafiken und Screenshots mit scharfen Kanten, bei denen es auf pixelgenaue Treue ankommt.

Im verlustbehafteten Modus werden die Farbdaten komprimiert wie bei einem JPG, während der Alphakanal getrennt behandelt wird. So entsteht ein transparentes Bild mit kleinerer Dateigröße als beim PNG. Diese Kombination ist mit JPG und PNG nicht möglich.

Der Größenvergleich zu PNG

PNG war lange das Standardformat für transparente Grafiken im Web. Es arbeitet verlustfrei. Bei einfachen Grafiken mit wenigen Farben ist PNG effizient. Sobald aber Verläufe, Fotos oder viele Farbnuancen ins Spiel kommen, wächst die Dateigröße schnell.

Google nennt für verlustfreies WebP im Durchschnitt rund 26 Prozent kleinere Dateien als PNG. Im verlustbehafteten Modus kann der Abstand bei detailreichen Freistellern größer ausfallen, weil die Farben stärker komprimiert werden. Eine feste Zahl dafür gibt es nicht, sie hängt vom Motiv ab. Bei einem schlichten zweifarbigen Icon kann der Unterschied dagegen klein sein, weil PNG dort bereits sparsam arbeitet.

Praxis: Logos, Freisteller, Icons

Drei Anwendungsfälle profitieren am stärksten von transparentem WebP.

Logos sitzen auf wechselnden Hintergründen, in Headern, Footern und auf farbigen Sektionen. Ein transparentes Logo passt sich überall an. Da Logos oft große einfarbige Flächen mit scharfen Kanten kombinieren, passt hier der verlustfreie Modus.

Freisteller, also vom Hintergrund gelöste Produkt- oder Personenfotos, sind der klassische Fall für den verlustbehafteten Modus. Die fotografischen Farbflächen lassen sich stark komprimieren, während die Silhouette dank separatem Alphakanal sauber bleibt.

Icons in Benutzeroberflächen sind meist klein und scharfkantig. Hier zählt jedes eingesparte Kilobyte über viele Symbole hinweg. Auch sie fahren mit verlustfreiem WebP gut.

Fallstricke bei der Umwandlung

Der erste betrifft die Quelle. Ein JPG liefert nie Transparenz. Prüfen Sie also vorab das Ausgangsformat. PNG und freigestellte Originale bringen den Alphakanal mit, JPG und BMP in der Regel nicht.

Der zweite betrifft die halbtransparenten Kanten. Anti-Aliasing erzeugt an den Rändern eines Freistellers eine schmale Zone mit Pixeln zwischen 1 und 254 Alpha. Bei aggressiver verlustbehafteter Kompression können diese Übergangspixel an Sauberkeit verlieren. Wer perfekte Kanten braucht, etwa bei Markenlogos, bleibt verlustfrei oder setzt die Qualität hoch an.

Der dritte ist die Hintergrundprüfung. Transparenzfehler fallen vor weißem Hintergrund oft nicht auf, vor dunklem Hintergrund werden dieselben Pixel als Schmutzrand oder Halo sichtbar. Testen Sie deshalb vor beiden Extremen.

So wandeln Sie ein transparentes PNG in WebP um

Der Ablauf im Konverter läuft lokal in Ihrem Browser, ohne Upload.

1. Öffnen Sie den Konverter und wählen Sie Ihr transparentes PNG aus. Mehrere Bilder gleichzeitig sind möglich, der Stapel nimmt bis zu 50 Dateien.
2. Wählen Sie WebP als Ausgabeformat. Für Logos und Icons aktivieren Sie „Verlustfrei speichern“, für fotografische Freisteller nutzen Sie den Qualitätsregler mit hohem Wert.
3. Klicken Sie auf „Umwandeln“. Das Ergebnis zeigt alte und neue Dateigröße, transparente Bereiche erscheinen in der Vorschau als Karomuster.
4. Laden Sie das WebP herunter und prüfen Sie es vor hellem und dunklem Hintergrund.

Eine Schritt-für-Schritt-Anleitung zum Thema finden Sie unter Mit Transparenz umwandeln. Wer das Ergebnis später zurück braucht, etwa für ein Programm ohne WebP-Unterstützung, nutzt die Rückwandlung nach PNG, die die Transparenz ebenfalls erhält. Wandeln Sie dagegen nach JPG zurück, füllt der Konverter transparente Bereiche mit einer Hintergrundfarbe, standardmäßig Weiß.

Wie sich WebP gegen die etablierten Formate schlägt, behandelt der Vergleich WebP gegen PNG und JPG. Ob jeder Browser das Ergebnis anzeigt, klärt der Artikel zur Browser-Unterstützung von WebP.

Einordnung für die Praxis

Transparenz ist die Grundlage sauberer Layouts. WebP verbindet Durchsichtigkeit mit moderner und bei Bedarf verlustbehafteter Kompression. Für Logos, Freisteller und Icons bedeutet das kleinere Dateien bei vergleichbarer optischer Qualität. Wichtig bleiben die Disziplin bei der Quelle und die Sichtkontrolle vor kontrastierenden Hintergründen.