Pixel-Hinting 07.11.2014

Klötzchen aus Kurven

Für die Erstellung von Logos und Icons ist ein vektorbasiertes Zeichenprogramm, wie z.B. Adobe Illustrator, das Mittel der Wahl. Die Ergebnisse kann man sowohl auf dem Bildschirm als auch im Druck ohne Qualitätsverluste beliebig skalieren, da sie nicht aus Pixeln, sondern aus den Umrisslinien der Formen aufgebaut sind. Wenn solche Grafiken dann gerastert werden müssen, z.B. weil sie als Logo oder Icon auf einer Website benutzt werden, kommt es zwangsläufig zu Ungenauigkeiten. Grund dafür ist, dass bei den meisten Formen ein Anti-Aliasing vorgenommen werden muss, um im gerasterten Bild die selbe Anmutung wie bei der Vektorgrafik zu erreichen.

Pixel können nur ganzzahlig

Pixel sind die kleinsten Elemente unserer Bildschirme. Daher liegt es in ihrer Natur, dass sie nicht weiter unterteilt werden können. Nur ganzzahlige Dimensionen sind in Pixeln darstellbar, d.h. es gibt keine halben Pixel (über Feinheiten wie Subpixel-Rendering wollen wir hier erst einmal nicht sprechen).
Wenn also bei der Umrechnung einer Vektorform in Pixel z.B. eine theoretische Breite von 3,5 Pixeln herauskommt, gibt es ein Problem bei der Darstellung. Unsere Computer verwenden dafür einen Trick: Um den „halben“ Pixel darstellen zu können, wird der äußerste Rand in Grau anstatt in Schwarz dargestellt. Unser Auge/Gehirn nimmt das (mangels Auflösungsvermögen) nicht als grauen, sondern als halben Pixel wahr. Dieser Trick, das sogenannte Anti-Aliasing, wird u.a. auch bei der Schriftglättung am Monitor eingesetzt. Soweit scheint ja auf den ersten Blick alles in Ordnung zu sein.

Pixelschubserei

Was dann aber bei diesem automatischen Anti-Aliasing herauskommt, ist meistens nicht Gelbe vom Ei. Sehen wir uns doch einmal ein solches Ergebnis bei 100 % und im Detail an:

blog_pixelhinting_1

Beim entsprechender Vergrößerung fallen die beiden Fehler ins Auge:

  • Die Kanten rechtwinkliger Formen erhalten unnötigerweise ein Anti-Aliasing, die Anmutung wird weich und unscharf.
  • Gleiche Buchstaben, zum Beispiel die vier „o“, werden je nach Position unterschiedlich gerendert, das Schriftbild wird inkonsistent.

Um diese Fehler zu beheben, wird an der Pixelgrafik von Hand ein Hinting durchgeführt: Horizontale und vertikale Kanten werden auf ganzzahlige Pixel gesetzt. Identische Zeichen und Formen werden als immer gleiches Pixelbild verwendet, die Darstellung wird in sich konsistent. So sieht die Grafik dann nach erfolgtem Pixelhinting aus:

blog_pixelhinting_2

„Und wer braucht das?“

Der Aufwand für diese Verfeinerung ist, gemessen an den wenigen Pixeln unserer Logos und Icons, natürlich relativ hoch. Dennoch gehört es zum Gesamteindruck einer professionellen Website, dass diese Grafiken eben so scharf und präzise sind, wie es nur irgendwie geht. Sicher ist dies ein winziges Detail im Gesamteindruck, aber gerade hier wird, wenn auch unterbewusst, Qualität und Glaubwürdigkeit nach aussen dokumentiert.

„Den Unterschied sieht doch eh keiner“

Und doch! Denn Qualität entsteht nur im Zusammenspiel vieler kleiner Einzelheiten. Wer das nicht glaubt, sehe sich hier die beiden Varianten im direkten Vergleich an:

blog_pixelhinting_3