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.

Pixelgrafiken

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.

Vektorgrafiken

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.

Dateiformate und Grafikprogramme

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.

 

Grafikformate

Grafikprogramme

Pixelgrafik

TIF, JPG, BMP, PNG, GIF

Adobe Photoshop, GIMP, Corel PaintShop Pro

Vektorgrafik:

SVG, EPS, AI, CDR, WMF

Adobe Illustrator, Corel Draw, Inkscape

Anwendungsbereiche

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.

Rasterung und Vektorisierung

Während die Rasterung von Vektorgrafiken zu Pixelgrafiken keinen großen Aufwand darstellt und bei jeder Vektorgrafik, die gedruckt oder auf einem Bildschirm dargestellt wird, im Hintergrund abläuft, ist der umgekehrte Weg mit größeren Anstrengungen verbunden. Die Vektorisierung eines Rasterbildes erfolgt entweder durch manuelles Nachzeichnen oder mithilfe eines Vektorisierungsprogramms wie Xara Xtreme oder Inkscape, die entsprechende Funktionen wie Bitmap Tracer oder Potrace zur Verfügung stellen. Eine solche Umwandlung ist jedoch fehleranfällig, da sich Vektorisierungsprogramme den komplexen Farb- oder Helligkeitsverläufen in Pixelgrafiken nur annähern und diese als sichtbar abgegrenzte Bänder darstellen (Banding).

VorteileNachteile
Pixelgrafik
  • Reich an Farb- und Helligkeitsabstufungen
  • Jeder einzelne Bildpunkt lässt sich bearbeiten
  • Skalierung geht mit Qualitätsverlust einher
  • Kompression kann zu Qualitätsverlust führen
  • Hoher Speicherbedarf bei qualitativ hochwertigen Grafiken
  • Vektorisierung mit großem Aufwand verbunden
Vektorgrafik
  • Ohne Qualitätsverlust skalierbar
  • Verlustfreie Kompression
  • Eigenschaften von Objekten lassen sich beliebig anpassen
  • Leicht zu rastern
  • Nicht geeignet für komplexe grafische Darstellungen
  • Wiedergabe erfordert Rasterung

Auf dem Laufenden bleiben?

Jetzt für unseren Newsletter anmelden und gratis Online-Marketing Whitepaper für lokale Anbieter sichern!