Pixelgrafik oder Vektorgrafik? Vor- und Nachteile im Vergleich

Neben textbasierten Inhalten sind Bilder zentrale Elemente einer Website. Fürs Webdesign finden sich zwei Klassen von Computergrafiken, die sich in ihren Eigenschaften grundlegend unterscheiden: Pixelgrafiken und Vektorgrafiken. Wir verraten Ihnen, wie diese Grafiktypen aufgebaut sind und welche Anwendungsbereiche sich aus den spezifischen Eigenschaften ergeben.

Die kleinste Einheit einer jeden Pixelgrafik ist der Bildpunkt (Pixel), dem ein spezieller Farbwert zugeordnet ist. Da Computergrafiken dieser Art aus einer Vielzahl quadratischer Bildpunkte bestehen, die in einem Raster angeordnet sind, werden Pixelgrafiken auch Rastergrafiken genannt. Die zentralen Eigenschaften, mit denen sich Pixelgrafiken beschreiben lassen, sind die Anzahl der verwendeten Bildpunkte und die Farbtiefe der einzelnen Pixel. Während die Gesamtanzahl der Pixel die Höhe und Breite einer Grafik und somit die Bildauflösung bestimmten, lassen sich durch die Farbtiefe Farb- und Helligkeitswerte für jeden einzelnen Bildpunkt definieren.

Mit diesen Eigenschaften bieten sich Pixelgrafiken zur Abbildung detaillierter Bilder wie an. Klassische Beispiele sind Fotos einer Digitalkamera oder mit einem Scanner erstellte Bilder. Da Pixelgrafiken aus einer festgelegten Anzahl an Bildpunkten bestehen, sind sowohl die Qualität als auch der Speicherbedarf dieser Grafiken abhängig von der Gesamtanzahl der Pixel. Je mehr Pixel eine Rastergrafik aufweist, desto größer kann diese dargestellt werden und desto mehr Speicher benötigt die Datei. Die Abhängigkeit von Bildqualität und Pixelanzahl hat zur Folge, dass sich Pixelgrafiken nicht verlustfrei skalieren lassen.

Anders als Pixelgrafiken bestehen Vektorgrafiken nicht aus einzelnen Bildpunkten, sondern aus sogenannten grafischen Primitiven wie Linien, Kreisen oder Kurven, die durch Parameter wie Anfangspunkt, Endpunkt, Radius, Kantenlänge, Linienstärke, Farbe und Füllmuster definiert werden. Moderne Vektorzeichenprogramme geben zudem Farbverläufe und Transparenz wieder. Diese Objekte werden nicht als eine Anreihung von Pixeln definiert, sondern anhand ihrer Eigenschaften logisch beschrieben. Für die Beschreibung eines einfachen Kreises werden bei einer Vektorgrafik somit ausschließlich die Lage des Mittelpunktes und der Radius sowie Farbe und Linienstärke benötigt, um das Objekt in jeder denkbaren Größe darzustellen.

Hier zeigt sich der große Vorteil von Vektorgrafiken gegenüber Rastergrafiken: Ein Bild, das unabhängig von Bildpunkten anhand von Objekteigenschaften beschrieben wird, lässt sich ohne Qualitätsverlust beliebig skalieren, da die gespeicherten Parameter einfach auf die neue Größe umgerechnet werden. Ein Kreis hingegen, der in einer Pixelgrafik durch eine genau festgelegte Anzahl an Bildpunkten definiert wurde, zeigt ab einer bestimmten Vergrößerung Treppen- oder Alias-Effekte, bei denen die einzelnen Pixel zum Vorschein treten. Die Darstellungsgröße einer Vektorgrafik hat im Gegensatz zur Pixelgrafik, bei der für großformatige Bilder auch proportional mehr Bildpunkte benötigt werden, keinen Einfluss auf den Speicherbedarf. Dieser ergibt sich stattdessen aus der Anzahl der der gespeicherten Parameter.

Da alle gängigen Anzeigemedien (Bildschirm, Druck) Bilder ausschließlich als Rastergrafiken ausgeben, müssen Vektorgrafiken vor der Darstellung zu Rastergrafiken konvertiert werden (Rasterung). Je nach Komplexität der beschriebenen Objekte kostet dieser Schritt sowohl Zeit als auch Rechenleistung.

Für die Erstellung und Bearbeitung von Raster- und Pixelgrafiken findet sich eine Vielzahl von Grafikprogrammen, die eine Reihe spezifischer Dateiformate unterstützen. Die folgende Tabelle zeigt eine Auswahl geläufiger Grafikformate und Bearbeitungsprogramme für Raster- und Vektorgrafiken.

Durch die verlustfreie Skalierung eignen sich Vektorgrafiken besonders für die Darstellung von Diagrammen, Firmenlogos, geometrischen Figuren, Schriften, Icons und technischen Zeichnungen. Komplexe Bilder wie Digitalfotos natürlicher Objekte mit vielen verschiedenen Farb- und Helligkeitswerten lassen sich durch Vektoren hingegen nicht verlustfrei darstellen. Hier bieten sich Pixelgrafiken an.