Ein Flugzeug
Ein Propeller

Blickfang – Der Agenturblog

Von Pixelmillionären und Zweizeilern

Unsere Welt ist voll von digitalen Bildern. Kein Wunder, die Kamera im Smartphone ist ja stets zur Hand. PCs und Laptops sind beruflich und privat umfassend präsent, so sehen wir täglich Bilder am Monitor und inzwischen wurde jedes gedruckte Bild, sei es in einer Zeitung oder einer Broschüre, mit Hilfe von Grafikdaten reproduziert. Doch wie verarbeiten Computer und Smartphones digitales Bildmaterial?

Zunächst lassen sich zwei grundverschiedene Klassen von Bilddateien unterscheiden: Rastergrafiken und Vektorgrafiken. Rastergrafiken, umgangssprachlich auch als Pixelbilder bezeichnet, unterteilen ein Bild oder eine Grafik in Pixel. Der Name Pixel ist ein Kunstwort aus englisch „picture“ – verkürzt „pix“ – und „element“. Pixel sind – in erster Näherung – quadratischen Flächen, die einen bestimmten Farbwert annehmen können, ähnlich wie bei einem Mosaik. Sind diese Flächen klein genug, kann unser Auge den Mosaikeffekt nicht mehr wahrnehmen und wir erleben das Bild als „natürlich“.

 

Rasterbild mit Ausschnittsvergrößerung

Dabei kommen jede Menge Informationen zusammen. Bei einer Auflösung von 300 Pixel pro Inch (typische Auflösung für den Druck z. B. einer Zeitschrift) entspricht eine DIN A4 Seite 8.699.840 Pixeln also 8,7 Megapixel. Pro Pixel müssen folgende Informationen abgespeichert werden: x- und y-Position innerhalb des Bildes und drei Farbwerte (Bildschirmwiedergabe mit Rot Grün und Blau) beziehungsweise vier Farbwerte (Druckwiedergabe mit Cyan MagentaGelb und Schwarz). Zusammengenommen ergibt das 43.499.200 (ca. 43,5 Millionen) bzw. 52.199.040 (ca. 52,2 Millionen) Werte je nach Anzahl der Farbwerte. 

Kein Wunder, dass es verschiedenen Techniken gibt, um diese Datenmengen zu reduzieren. Bei der Bildschirmdarstellung hat man sich die Tatsache zunutze gemacht, dass unser Gehirn dazu neigt, Mosaikstrukturen als natürliche Bilder wahrzunehmen auch wenn physikalisch die einzelnen Mosaiksteinchen sprich Pixel sichtbar sind. Beispiel PC-Monitor: Bei einem Betrachtungsabstand von 50 cm liegt die Wahrnehmungsgrenze für einzelne Pixel bei einer Auflösung von 200 Pixeln pro Inch. Bei Werten darunter ist unser Auge physikalisch in der Lage einzelne Pixel wahrzunehmen. Klassische PC-Monitore bieten jedoch „nur“ eine Auflösung von 72 bis 96 Pixel pro Inch und trotzdem empfinden wir die meisten Bilder als natürlich, ohne das Pixelraster zu sehen. Nur in Extremfällen, z. B. bei der Darstellung einer diagonalen schwarzen Linie auf weißem Grund sehen wir auf manchen Geräten „Treppchen“ am Rand der Linie, wenn wir genau hinsehen. Dank leistungsfähiger Grafikkarten und Displays kommen zunehmend PCs auf den Markt, deren Bildschirmauflösungen bei 300 Pixeln pro Inch und sogar darüber liegen. Bei diesen ist dann tatsächlich auch physikalisch kein einzelner Pixel mehr erkennbar. Hochwertige Smartphone-Displays verfügen über ähnliche hohe Auflösungen. 

In der graphischen Industrie verlässt man sich nicht darauf, dass niedrige Auflösungen nicht als störend wahrgenommen werden. Um die Datenmengen zu verringern, hat man hier verschiedene Techniken zur Datenkomprimierung entwickelt, die in der Lage sind, die Größe von Bilddateien deutlich zu reduzieren. Die Komprimierung des am weitesten verbreiteten *.jpg-Formats kann eine Einsparung von ca. 50% der Dateigröße bei nicht sichtbaren Qualitätsverlusten erbringen. 90% Einsparung der Dateigröße sind ohne störende Qualitätsverluste möglich. In den Anfangstagen der digitalen Bildbearbeitung als die Rechner noch Ihre liebe Not mit den großen Bilddatenmengen hatten, galt ein geflügeltes Wort unter Bildbearbeitern: „Buy more memory, it’s cheaper than a therapy“. (Kaufe mehr Arbeitsspeicher, es ist billiger als eine Therapie). Denn während der Bearbeitung sind die Bilddaten natürlich nicht komprimiert.

Vektorgrafiken

Vektorgrafiken, der Name leitet sich von den Vektorbildschirmen ab, die zwischen den 1960er und 1980er Jahren gebräuchlich waren, basieren auf Beschreibungen der Objekte aus denen ein Bild aufgebaut ist. Um ein Rechteck zu beschreiben, genügen folgende Werte: die x- und y-Koordinate des linken oberen Ecks (Ursprungspunkt), seine Breite und Höhe sowie die Farbwerte für die Füllungsfarbe und ggf. noch die Farbwerte für die Konturfarbe und der Wert für die Konturstärke. Der Code für unser Rechteck würde in einem gängigen Textdokument gerade einmal zwei Zeilen benötigen.

 

Codebeispiel Vektorgrafik svg-Format

Vergleichen wir dies mit einer Rastergrafik für ein Rechteck von 5,08 cm Breite und 2,54 cm Höhe bei einer Auflösung von 300 Pixeln pro Inch, so benötig diese die Werte für 180.000 Pixel. Dieses Beispiel verdeutlicht die Überlegenheit von Vektorgrafiken sobald es darum geht, Bildelemente zu zeigen, die sich aus sogenannten grafischen Primitiven wie Linien, Rechtecken, Kreisen, Polygonen und mathematisch beschreibbaren Kurven zusammensetzen lassen. Die Dateigrößen sind erwartungsgemäß um ein vielfaches geringer, für ein Firmenlogo genügen oft schon einige Kilobyte. Ein weiterer Vorteil von Vektorgrafiken besteht darin, dass sie verlustfrei beliebig vergrößert werden können. Im Beispiel unseres Rechtecks müssen bei einer Vergrößerung um den Faktor 10 lediglich die Werte für die x- und y-Koordinate und die Breite und die Höhe mit 10 multipliziert werden. Auch wenn sie nichts mit Grafikprogrammen zu tun haben, so nutzen Sie vermutlich täglich Vektorgrafiken. Sie bilden die Grundlage der Computerschriften, die Sie bei der Textverarbeitung verwenden oder mit denen eine Internetseite dargestellt wird. Dies gilt sowohl für den PC, als auch für Ihr Mobiltelefon. Fotografien lassen sich natürlich nicht als Vektorgrafiken darstellen, die Anzahl an geometrischen Beschreibungen für jedes Fotodetail wäre so groß, dass diese Methode in der Praxis nicht umsetzbar ist.

 

 

Pfeil nach oben