Was ist Transparenz bei Bildern?

Im Bildprogramm sieht Ihr Vereinswappen perfekt aus: Um das Motiv herum liegt das graue Schachbrettmuster, das Grafikprogramme für „hier ist nichts“ verwenden. Ob das Wappen auf der Webseite oder in der Galerie später genauso frei schwebt oder in einem weißen Rechteck sitzt, entscheidet sich erst beim Speichern und beim Anzeigen. Transparenz bei Bildern ist keine Eigenschaft des Motivs, sondern eine zusätzliche Angabe in der Datei, die nicht jedes Format mitnehmen kann und die jede Seite anders auswertet.

Transparenz bei Bildern: dasselbe Logo links auf einem weißen Kasten, rechts freigestellt vor dem grauen Schachbrettmuster

Was Transparenz bei Bildern in der Datei bedeutet

Ein normales Farbbild speichert je Bildpunkt drei Werte für Rot, Grün und Blau. Kommt Durchsichtigkeit dazu, steht daneben ein vierter Wert, der Alphakanal. Er reicht wie die Farben von 0 bis 255: Bei 0 ist der Punkt unsichtbar, bei 255 deckt er voll, bei 128 scheint der Untergrund zur Hälfte durch. Ein Wappen mit 600 × 600 Pixeln hat 360.000 Bildpunkte und braucht damit ungepackt rund 1,4 MB statt 1,1 MB. In der fertigen PNG-Datei fällt der Unterschied viel kleiner aus, weil die großen, gleichmäßig leeren Flächen sich sehr gut packen lassen.

Entscheidend ist, was an den Kanten passiert. Verläuft der runde Rand des Wappens genau durch die Mitte eines Bildpunkts, bekommt dieser Punkt den Alphawert 128, also halbe Deckkraft. Der Browser mischt die Farbe dann selbst: halb Wappenfarbe, halb das, was dahinter liegt. Ist das Wappen dunkelrot mit den Werten 160, 0, 0, ergibt sich auf weißem Grund ein Rosa mit etwa 207, 127, 127, auf schwarzem Grund ein sehr dunkles Rot mit 80, 0, 0. Die Kante passt sich also jedem Hintergrund an. Genau das fehlt allen Verfahren, die nur „sichtbar“ oder „unsichtbar“ kennen.

Drei Wege, ein Bild durchsichtig zu speichern

Je nach Format landet die Transparenz bei Bildern auf ganz unterschiedliche Weise in der Datei. Die Tabelle zeigt, was beim Speichern tatsächlich passiert.

Verfahren	Formate	Was mit der Kante passiert
Alphakanal mit 256 Stufen	PNG mit Millionen Farben, WebP	bleibt weich und mischt sich mit jedem Untergrund
eine Palettenfarbe als durchsichtig markiert	GIF, meist auch PNG mit 256 Farben	jeder Punkt ganz da oder ganz weg, Kanten wirken gestuft
keine Durchsichtigkeit	JPEG	das Programm füllt leere Flächen mit einer festen Farbe, meist Weiß

Eine Feinheit zur mittleren Zeile: PNG mit Farbpalette darf technisch für jede der 256 Palettenfarben eine eigene Deckkraft speichern. Viele Bildprogramme nutzen das aber nicht und schreiben nur eine einzige durchsichtige Farbe. Wenn Sie weiche Kanten brauchen, wählen Sie deshalb beim Speichern ausdrücklich PNG mit vollem Farbumfang, oft als PNG-24 oder PNG-32 bezeichnet.

Typische Fehler und woran Sie sie erkennen

Die meisten Pannen mit der Transparenz bei Bildern sehen auf den ersten Blick gleich aus: Irgendetwas umrahmt das Motiv. An der Art des Rahmens erkennen Sie die Ursache.

Weißes Rechteck um das Motiv: Die Datei wurde als JPEG gespeichert, die leeren Flächen sind jetzt echte weiße Pixel. Zurück zur Vorlage und als PNG speichern.
Heller Saum nur an den Kanten: Die Kantenpunkte wurden vor Weiß geglättet und dann hart freigestellt, typisch für GIF. Vor dem richtigen Hintergrund neu speichern oder PNG mit Alphakanal nehmen.
Grau-weißes Schachbrett im Bild: Die Datei ist gar nicht durchsichtig, das Muster ist mit eingezeichnet. Das passiert häufig bei Grafiken aus der Bildersuche, die nur so tun, als wären sie freigestellt.
Logo ist scheinbar verschwunden: Ein weißes Motiv auf durchsichtigem Grund liegt auf einer weißen Fläche. Die Datei ist in Ordnung, nur der Untergrund passt nicht.

Welche Variante für welchen Zweck

Soll das Motiv auf wechselnden Hintergründen stehen, etwa im Kopf einer Seite und auf einer dunklen Fußzeile, gehört es in ein PNG mit Alphakanal. Steht es immer auf derselben, bekannten Farbe, können Sie diese Farbe auch fest ins Bild nehmen und es als JPEG oder einfaches PNG speichern, dann gibt es gar keine Kantenprobleme. Fotos, die Sie nur freigestellt haben, um den Hintergrund zu tauschen, speichern Sie nach dem Tausch wieder als JPEG. Die Durchsichtigkeit wird danach nicht mehr gebraucht und kostet nur Dateigröße.

Transparenz bei Bildern im Bildergalerie-Script

Das Bildergalerie-Script nimmt beim Hochladen JPEG, PNG und GIF an. Für durchsichtige Bereiche kommen davon nur PNG und GIF in Frage. Ein WebP mit Alphakanal hilft hier nicht weiter: Die Galerie lehnt es ab und meldet, die Datei sei ein WebP-Bild und erlaubt seien nur JPEG, PNG oder GIF. Speichern Sie freigestellte Grafiken für die Galerie deshalb als PNG. Hilfreich ist, dass die Galerie das Format am Inhalt der Datei erkennt und nicht am Namen: Haben Sie ein PNG versehentlich in logo.jpg umbenannt, speichert sie es trotzdem als logo.png, und die Transparenz bleibt erhalten.

Aus jedem Bild erzeugt die Galerie ein Vorschaubild im Ordner bilder/tn/ und, wenn das Bild größer als die Maße der großen Ansicht ist (Standard 1024 × 1024 Pixel), eine verkleinerte Kopie dafür. Wie die Galerie mit der Transparenz bei Bildern umgeht, hängt dabei vom Format ab.

Format des Originals	Vorschaubild und Kopie	Ergebnis an den Rändern
PNG mit Alphakanal	wieder PNG, Alphakanal bleibt, verlustfrei gespeichert	weiche Übergänge bleiben weich
GIF mit transparenter Farbe	wieder GIF, die transparente Farbe bleibt	Punkte, die mindestens halb durchsichtig sind, werden ganz durchsichtig, alle anderen voll deckend
JPEG	wieder JPEG mit Qualität 85	keine Transparenz möglich

Der Grund für die zweite Zeile: Beim Verkleinern rechnet die Galerie mehrere Punkte des Originals zu einem zusammen. Aus einer harten GIF-Kante entstehen dabei Randpunkte mit Zwischenwerten, die ein GIF nicht speichern kann. Die Galerie entscheidet deshalb für jeden Punkt einzeln. Das Diagramm zeigt eine Kante mit sechs Punkten: oben nach dem Verkleinern, darunter als PNG-Vorschaubild auf dem weißen Hintergrund der Übersicht und auf dunklem Grund, dann als GIF.

PNG behält jede Stufe der Kante und mischt sie mit dem Untergrund, GIF macht aus jedem Randpunkt ganz oder gar nicht.

Ein Praxisfall zeigt, worauf es außerdem ankommt: Sie laden ein weißes Logo auf durchsichtigem Grund als PNG hoch. Im Bildprogramm vor dunklem Hintergrund sah es gut aus. In der Übersicht steht das Vorschaubild aber auf weißem Grund, denn die Klasse .vorschau_bild in css/layout.css gibt ihm einen weißen Hintergrund. Klickt ein Besucher darauf, öffnet sich die große Ansicht. Dort liegt das Bild in einem weißen Rahmen mit 12 Pixeln Innenabstand, dahinter dunkelt ein schwarzer Schleier mit 80 Prozent Deckkraft die Seite ab. Die durchsichtigen Stellen zeigen in beiden Fällen Weiß, und das weiße Logo ist praktisch unsichtbar. Für helle Grafiken mit Transparenz lohnt sich deshalb eine dunkle Kontur oder ein Schatten im Bild selbst. Die untere Reihe des Diagramms zeigt genau diesen Fall.

Eine eigene Funktion für Wasserzeichen hat die Galerie nicht. Ein halb durchsichtiges Zeichen legen Sie vor dem Hochladen mit einem Bildprogramm über das Foto und speichern das Ergebnis als JPEG. Das Wasserzeichen ist danach fest im Bild, eine Transparenz braucht das fertige Foto nicht mehr. Wie sich Ihre eigenen PNG-Grafiken in Vorschau und großer Ansicht verhalten, sehen Sie am schnellsten in einer Testinstallation: Das Bildergalerie-Script können Sie kostenlos herunterladen.

Häufige Fragen

Wer ein Logo freistellt, stolpert meist über dieselben Stellen, vom weißen Kasten bis zum richtigen Speicherformat.

Werden Vorschaubilder mit Transparenz größer?

Bei Fotos deutlich. Die Galerie speichert jedes Vorschaubild im Format des Originals, ein PNG bekommt also ein verlustfreies PNG-Vorschaubild mit Alphakanal. In unserem Test wog ein Foto bei 200 Pixeln Breite, der Standardbreite der Vorschaubilder, als PNG rund 30 bis 40 KB, als JPEG mit Qualität 85 nur 6 bis 7 KB. Eine Kategorieseite mit 40 Vorschaubildern lädt dann etwa 1,4 MB statt 260 KB. Bei Logos mit großen einfarbigen Flächen fällt der Unterschied klein aus. Fotos ohne durchsichtige Stellen laden Sie deshalb als JPEG hoch.

Was ist der Unterschied zwischen PNG-8 und PNG-24?

PNG-8 speichert höchstens 256 Farben in einer Palette und bleibt dadurch klein. Die meisten Programme legen dabei nur eine einzige durchsichtige Farbe fest, Kanten wirken dann gestuft wie bei GIF. PNG-24 und PNG-32 speichern jeden Punkt mit vollem Farbumfang, PNG-32 zusätzlich mit 256 Stufen Deckkraft. Für Logos mit runden Formen ist das die sichere Wahl.

Wie entferne ich den Hintergrund kostenlos?

Kostenlose Bildprogramme wie GIMP bieten eine Auswahl nach Farbe oder ein Werkzeug zum Freistellen von Vordergrund. Danach den Hintergrund löschen, prüfen, ob das Schachbrett erscheint, und als PNG exportieren. Viele Online-Freisteller erledigen das automatisch, die Ränder sollten Sie dort aber in starker Vergrößerung kontrollieren.

Kann ich den weißen Hintergrund in Übersicht und großer Ansicht ändern?

Ja, an zwei Stellen. Für die Vorschaubilder steht in css/layout.css bei .vorschau_bild die Zeile background: #fff;, für den Rahmen der großen Ansicht in css/lightbox.css bei #outerImageContainer der Eintrag background-color: #fff;. Ein dunkler Wert wie #333 lässt weiße Logos hervortreten, gilt aber für alle Bilder der Galerie, auch für Fotos. Sichern Sie geänderte CSS-Dateien vor jedem Update, denn beim Hochladen der neuen Version werden sie überschrieben.