Pixel oder Vektorgrafik – Unterschiede und Verwendung

Bilder im Internet

Quelle: CC0 pixabay.com

Ein Bild sagt mehr wie tausend Worte: Dieses Zitat von Kurt Tucholsky (1926) wird immer wieder – und fast schon übermäßig – hergeholt, wenn oft langweilige Textwüsten mit Bildern ausgeschmückt werden sollen. Besonders im Medium Internet, wo viele Webseiten nur durch Bilder und Bildsprache wirken, Emotionen erwecken und Fantasien anregen.
In der realen Welt gibt es Bilder, seit es Menschen gibt: Beginnend mit Höhlenmalereien, Ölbildern, Fotografien: „Analoge Bilder“ gibt es schon sehr lange, aber welche Möglichkeiten gibt es, diese Bilder in ein digitales, maschinenlesbares Format zu bringen?
Pixelgrafiken (auch Rastergrafiken) und Vektorgrafiken sind hier die Lösung. 
Sie haben eine gemeinsame Funktion: Es werden Bilder in eine elektronisch lesbare, digitale Form umgewandelt, um sie darstellen und bearbeiten zu können.

Inhalt
1. Pixelgrafiken
1.1 Bildqualität von Pixelgrafiken
1.2 Pixelgrafik als Kunstform (Pixel-Art)
2. Vektorgrafiken
2.1 Beispiele für Vektorgrafiken
3. Vergleich Pixel- und Vektorgrafiken

1. Pixelgrafiken

Am Anfang war die Rastergrafik: Schon vor langer Zeit erschufen Menschen mit viel Geduld und Kunsthandwerk Bilder mit den Methoden der Rastergrafik:

Mosaik Quelle: Pixabay.com Creative Commons CC0


Bei entsprechender Entfernung werden die Mosaiksteine als ganzes Bild wahrgenommen. Bei Rastergrafiken ist es nicht anders: Die Rasterelemente (Pixel) bestehen aus gleich großen Bildpunkten, denen je eine Farbe zugewiesen wird. Wenn diese Elemente klein genug sind („große Auflösung„) entsteht ein gut sichtbares Bild.
Die Qualität hängt einerseits von der Anzahl der Pixel (dpi – dots per Inch) oder die Anzahl der Spalten und Zeilen pro Fläche und andererseits von der Feinheit der Farbabstufungen (Farbtiefe) ab.
Rastergrafiken sind das meist verwendete Grafikformat. Digitalkameras, Smartphones und Bildschirme basieren immer auf der Rastergrafiktechnologie. Andere Formate (wie z.B. Vektorgrafiken) müssen durch „Rendern“ mühsam in Rastergrafiken umgewandelt werden, um sie darstellen zu können – Pixelgrafiken haben diese Einschränkung nicht.
Im Internet (und Consumer-Bereich) werden daher in der Regel nur Pixelgrafiken verwendet, wenn sehr komplexe Grafiken, Fotos und Bilder dargestellt werden sollen.

Punktedichte und Farbtiefe von Pixelgrafiken Quelle: Friedrich Graf https://de.wikipedia.org/wiki/Datei:Punktdichte%2BFarbtiefe.svg#filelinks

1.1 Bildqualität von Pixelgrafiken

Pixelgrafik: Bildqualität bei Änderung der Auflösung Quelle: http://www.pixel.nanutz.de/Pixelgrafik.html

1.2 Pixelgrafik als Kunstform (Pixel-Art)

In den Anfangszeiten der IT (zu Beginn der 1970-er Jahre) war die Bildschirmgrafik noch durch technische Einschränkungen (Bildschirmauflösung, nur schwarz-weiße Pixel) bestimmt. Diese besondere Form der sich selbst einschränkenden Bildgestaltung (Puristen verwenden heute nur Werkzeuge, die einzelne Pixel setzen) wird heute als eigene Kunstrichtung weiter gepflegt und enthält Anspielungen auf die Video- und Computerspiele der 1980er und frühen 1990er Jahre.
Für eigene Versuche findet man hier ein kostenloses Tool: https://www.pixilart.com/draw

Pixel-Art Plurabelle Quelle: https://www.youtube.com/watch?v=A4F414LFY6I
Pixel Art: A Japanese Tree Quelle: YouTube GucioDevs

2. Vektorgrafiken

Diese Grafiken entstehen nicht durch Bildpunkte sondern durch grafische Primitiven (Linien, Kurven, Kreise, Polygone), die durch Parameter wie Farben, Radius, Strichstärke und Füllung zweidimensional beschrieben werden. Beispiele sind Diagramme, Firmenlogos, Schriften, einfache Grafiken. Für komplexe Bilder sind sie in der Regel nicht geeignet.

Vektorgrafiken werden vor allem bei der Produktion von Werbematerialien und in der Druckereibranche verwendet: also immer, wenn besonders hohe Auflösungen benötigt werden und das Bild „gestochen scharf“ werden soll.

Beispiel Vektorgrafik (Quelle: Peter Butter CC0 2018 erstellt mit Adobe Illustrator CC 2019)

Da Vektorgrafiken nur die Parameter speichert, sind die Dateien wesentlich kleiner als Pixelgrafiken. Der Hauptvorteil ist die stufenlose und (beliebig) große verlustfreie Skalierbarkeit.

2.1 Beispiele für Vektorgrafiken

3. Vergleich Pixel- und Vektorgrafiken

PIXELGRAFIK VEKTORGRAFIK
Speicherung als einzelne PixelSpeicherung als mathematische Formeln
Vorteile:Vorteile:
– gängiges Format (jpg, png)
– leicht bearbeitbar
– hohe Bildqualität

– geringe Dateigröße
– Bilder beliebig skalierbar
– leichte Umwandlung in Pixelgrafik
Nachteile:Nachteile:
– unscharf bei Vergrößerung
– viel Speicherplatz (hohe Auflösung)
– Umwandlung in Vektorgrafik schwer
– Fotos nur schwer als Vektorgrafik
– für Wiedergabe Bild rendern
– Bearbeitung schwerer als bei Pixelgrafik
Unterschied Vektor/Pixelgrafik Quelle: https://www.flyeralarm.com/blog/de/der-unterschied-von-pixel-und-vektorgrafiken/

Vektorgrafiken Quelle: https://www.youtube.com/watch?v=cdl7qFD0hbU
Vektor vs. Pixelgrafik Quelle: https://www.youtube.com/watch?v=2PjMbgtWKfo