Pixel-Hinting 07.11.2014

Klötzchen aus Kurven

Für die Erstel­lung von Logos und Icons ist ein vektor­ba­sier­tes Zeichen­pro­gramm, wie z.B. Adobe Illus­tra­tor, das Mittel der Wahl. Die Ergeb­nisse kann man sowohl auf dem Bild­schirm als auch im Druck ohne Quali­täts­ver­luste belie­big skalie­ren, da sie nicht aus Pixeln, sondern aus den Umriss­li­nien der Formen aufge­baut sind. Wenn solche Grafi­ken dann geras­tert werden müssen, z.B. weil sie als Logo oder Icon auf einer Website benutzt werden, kommt es zwangs­läu­fig zu Unge­nau­ig­kei­ten. Grund dafür ist, dass bei den meis­ten Formen ein Anti-Alia­sing vorge­nom­men werden muss, um im geras­ter­ten Bild die selbe Anmu­tung wie bei der Vektor­gra­fik zu erreichen.

Pixel können nur ganzzahlig

Pixel sind die kleins­ten Elemente unse­rer Bild­schirme. Daher liegt es in ihrer Natur, dass sie nicht weiter unter­teilt werden können. Nur ganz­zah­lige Dimen­sio­nen sind in Pixeln darstell­bar, d.h. es gibt keine halben Pixel (über Fein­hei­ten wie Subpi­xel-Rende­ring wollen wir hier erst einmal nicht sprechen).
Wenn also bei der Umrech­nung einer Vektor­form in Pixel z.B. eine theo­re­ti­sche Breite von 3,5 Pixeln heraus­kommt, gibt es ein Problem bei der Darstel­lung. Unsere Compu­ter verwen­den dafür einen Trick: Um den „halben“ Pixel darstel­len zu können, wird der äußerste Rand in Grau anstatt in Schwarz darge­stellt. Unser Auge/Gehirn nimmt das (mangels Auflö­sungs­ver­mö­gen) nicht als grauen, sondern als halben Pixel wahr. Dieser Trick, das soge­nannte Anti-Alia­sing, wird u.a. auch bei der Schrift­glät­tung am Moni­tor einge­setzt. Soweit scheint ja auf den ersten Blick alles in Ordnung zu sein.

Pixelschubserei

Was dann aber bei diesem auto­ma­ti­schen Anti-Alia­sing heraus­kommt, ist meis­tens nicht Gelbe vom Ei. Sehen wir uns doch einmal ein solches Ergeb­nis bei 100 % und im Detail an:

blog_pixelhinting_1

Beim entspre­chen­der Vergrö­ße­rung fallen die beiden Fehler ins Auge:

  • Die Kanten recht­wink­li­ger Formen erhal­ten unnö­ti­ger­weise ein Anti-Alia­sing, die Anmu­tung wird weich und unscharf.
  • Glei­che Buch­sta­ben, zum Beispiel die vier „o“, werden je nach Posi­tion unter­schied­lich geren­dert, das Schrift­bild wird inkonsistent.

Um diese Fehler zu behe­ben, wird an der Pixel­gra­fik von Hand ein Hinting durch­ge­führt: Hori­zon­tale und verti­kale Kanten werden auf ganz­zah­lige Pixel gesetzt. Iden­ti­sche Zeichen und Formen werden als immer glei­ches Pixel­bild verwen­det, die Darstel­lung wird in sich konsis­tent. So sieht die Grafik dann nach erfolg­tem Pixel­hin­ting aus:

blog_pixelhinting_2

„Und wer braucht das?“

Der Aufwand für diese Verfei­ne­rung ist, gemes­sen an den weni­gen Pixeln unse­rer Logos und Icons, natür­lich rela­tiv hoch. Dennoch gehört es zum Gesamt­ein­druck einer profes­sio­nel­len Website, dass diese Grafi­ken eben so scharf und präzise sind, wie es nur irgend­wie geht. Sicher ist dies ein winzi­ges Detail im Gesamt­ein­druck, aber gerade hier wird, wenn auch unter­be­wusst, Quali­tät und Glaub­wür­dig­keit nach aussen dokumentiert.

„Den Unterschied sieht doch eh keiner“

Und doch! Denn Quali­tät entsteht nur im Zusam­men­spiel vieler klei­ner Einzel­hei­ten. Wer das nicht glaubt, sehe sich hier die beiden Vari­an­ten im direk­ten Vergleich an:

blog_pixelhinting_3