Alphatransparenz und die weißen Pixel

Da die Frage schon des Öfteren kam, möchte ich heute mal kurz etwas zum Thema Pixel, Transparenz, Antialiasing und Alphatransparenz loswerden, sowie was das Ganze mit weißen Rändern an Smilies zu tun hat.

Alpha… was?

Fangen wir mal mit der einfachen Transparenz in einer Grafik an. Damit ein rundes Objekt in einer rechteckigen Grafik nur an den Stellen den Hintergrund überdeckt, in welchem sich das runde Objekt befindet, muss das Negative vom Objekt transparent sein. An dieser Stelle befindet sich dann kein farbiges Pixel, sonder es scheint der Hintergrund durch. Bestes Beispiel hierfür ist ein runder grüner Smilie.

Im gezeigten Bild seht ihr die typische Darstellung im Photoshop, der transparente Teil des Bildes besteht aus diesem weiß/grauen Schachbrettmuster, der Rest ist der sichtbare Teil des Bildes. Hier in 16-facher Vergrößerung:

Die grünen Smilies werden alle im GIF-Format gespeichert, dieses Format erlaubt ausschließlich einfache Transparenz. Darum wechsle ich mal die Fronten, und mache mit den Smilies von Bodehase weiter.

Alphatransparenz

Oft reicht einfache Transparenz einfach nicht aus, vor allem dann nicht, wenn man keine harten, pixeligen Kanten möchte, welche bei GreenSmilies (das sei mal erwähnt) aber zum Konzept gehören. Hier kommt Alphatransparenz ins Spiel, sie erlaubt für jedes Pixel eine individuelle Durchlässigkeit, egal welche Farbe es darstellt.

Antialiasing

Jetzt kommen die Smilies von Bodehase ins Spiel, waren sie doch ursprünglich 150×150 Pixel groß und sollen auf die Größe von 16×16 Pixel geschrumpft werden. Gerade aber beim Skalieren (größer bzw. kleiner machen) von Bildern, arbeiten die meisten Grafikprogramme mit Interpolation, im Falle von Photoshop bikubisch, was vor allem dafür sorgt, dass die Kanten „geglättet“ werden, dafür steht auch der Begriff Antialiasing bzw. Kantenglättung.

Innerhalb des Bildes ist diese Interpolation unbedenklich, an den Kanten aber wird es kritisch, sowie man nur einfache Transparenz erlaubt, ohne Alphatransparenz kommt es hier nämlich zu den unschönen weißen Pixeln, die ich ganz am Anfang angesprochen hatte.

Im Photoshop sieht man die Alphatransparenz am durchschimmernden weiß/grauen Schachbrettmuster sehr schön. Hier mal ein Smilie von Bodehase um den Faktor 16 vergrößert:

Speichert man diesen Smilie nun nur mit einfacher Transparenz, dann passiert das:

Alle halbdurchlässigen Pixel sind nun überhaupt nicht mehr durchlässig. Die meisten sagen jetzt vielleicht, dass man das eh nicht sieht, aber das ist nur der Fall, solange der Hintergrund passt!

Beispiel

Links ist der alphatransparente Smilie und rechts der, der mal alphatransparent war, aber nur mit einfacher Transparenz gespeichert wurde. Um zwischen weißem und schwarzem Hintergrund wechseln zu können, benutzt bitte Mr. Green:

Hintergrund ändern:

Toll, aber…

Alphatransaprenz ist toll, hat aber leider noch ein paar Nachteile im Web(!). Nur das PNG-Format unterstützt sie und PNG selber wird leider schon seit Jahren von Microsoft mit Füßen getreten (es gibt aber Workarounds). Soll heißen, erst der Internet Explorer 7 schafft es, alphatransparente Bilder fehlerfrei darzustellen. Ein weiterer Nachteil des PNG-Formats ist, dass derzeit keine Animationen damit möglich sind. Es gibt zwar APNG (animated PNG), doch wird dieses Format bislang nur von Firefox 3 und Opera 9.5 unterstützt. Darum bleibe ich auch weiterhin dem alten GIF, mit seiner einfachen Transparenz treu. Ich hoffe aber trotzdem, dass die Herkunft der weißen Pixeln nun klarer ist und das irgendwann animierte, alphatransparente PNG in allen Browsern dargestellt werden können.

Für Bodehase habe ich mal alle großen Smilies verkleinert und als alphatransparente PNG abgespeichert.

PS: Die Smilies sind nicht von mir, ich habe sie nur verkleinert!