Vektorgrafik vs. Pixelgrafik – Vorteile, Nachteile?

In jeder Art des Designs sind Bilddarstellungen zentraler Bestandteil. Seien es Webseiten, mobile Anwendungen, Broschüren, Visitenkarten oder Imageflyer – die Darstellung von Grafiken und Bildern ist nicht wegzudenken, geben sie dem Betrachter doch erst einen richtigen Eindruck von dem, was der Grafiker ihm eigentlich sagen will. Doch Grafik ist nicht gleich Grafik. Unterschiedliche Dateiformate sind notwendig, damit das Bild in dem jeweiligen Medium richtig dargestellt wird und es den technischen Voraussetzungen Genüge tut. Dies muss schon im Vorfeld bei der Erstellung des Designs beachtet werden.

Welche Arten der Bilddarstellung gibt es?

Grundsätzlich verwendet der Grafiker zwei Arten der Bilddarstellung: Pixelgrafiken (auch: Bitmapgrafiken) und Vektorgrafiken. Obwohl beide Typen dem letztendlich selben Zweck dienen, sind die technischen Grundlagen komplett verschieden, und es ist notwendig, diese Unterschiede zu kennen, da das Ergebnis ansonsten sehr unbefriedigend ausfällt und es sogar bis zum „worst case“, zu einem nicht verwertbaren Ergebnis, kommen kann. Bitmapgrafiken setzen sich aus einzelnen Bildpunkten zusammen, Vektorgrafiken dagegen werden mathematisch berechnet und definiert. Im Folgenden betrachten wir die einzelnen Spezifikationen, Unterschiede und Verwendungsmöglichkeiten.

Fakten über Bitmap-Darstellungen

Bitmap-Bilder (auch als Raster- oder Pixelbilder bezeichnet) bestehen aus einzelnen Pixeln in einem festgelegten Raster. Pixel sind Bildelemente, die man sich als winzige Quadrate von individueller Farbe vorstellen muss. Diese setzen das Bild zusammen, welches auf dem Display zu sehen ist. Alle diese kleinen Bildpunkte sind farblich definiert und bilden die verschiedenen Farben und Tonwerte, mit der das Bild auf dem Monitor dargestellt wird. Alle Displays zeigen Bildpunkte an, und die effektive Anzahl ist abhängig von den Bildschirmeinstellungen des Monitors und der Leistungsfähigkeit der Grafikkarte. Ein Smartphone kann zum Beispiel mehr Pixel anzeigen als ein Computerdisplay. Beispielsweise sind die Symbole auf Ihrem Monitor in der Regel mit 32 x 32 Pixel abgebildet. Das heißt, dass 32 Pixel sich in Länge und Breite abbilden. In Kombination bilden diese winzigen Punkte ein Bild. Wenn Sie eine dieser Abbildungen extrem vergrößern würden, könnten Sie jeden separaten Pixel deutlich sehen. Auch die weißen Bereiche des Hintergrundes werden durch Bildpunkte erzeugt, obwohl sie farblos erscheinen. Die Bilder, die ein Scanner oder eine Digitalkamera liefert, sind durchweg pixelbasierende Bilder.

Bitmap-Auflösung

Bitmap-Bilder sind auflösungsabhängig. Die Auflösung wird angegeben in dots per inch (DPI) oder pixel pro inch (PPI). Bitmap-Bilder auf Displays haben eine Auflösung von ca. 100 PPI oder 72 PPI. Beim Ausdrucken eines pixelbasierenden Bildes benötigt ein Drucker jedoch viel mehr Bildinformationen als ein Display. Um ein Bitmap-Bild präzise zu rendern, benötigt der typische Desktopdrucker ca. 300 PPI. Das ist auch der Grund, warum ein Scan mit 300 dpi auf dem Monitor viel größer erscheint. Drucken Sie ein Bild mit 72 PPI auf Papier, werden Sie schnell feststellen, dass die Bilddarstellung „ausreißt“ und das Bild unscharf erscheint. Bei weiterer Vergrößerung „verpixelt“ das Bild total und es kann quasi jeder einzelne Bildpunkt bestimmt werden.

Änderung der Größe von Pixelbildern

Da Pixelbilder auflösungsabhängig sind, ist es nicht möglich, ihre Größe zu erhöhen oder zu verringern, ohne ein gewisses Maß an Bildqualität zu opfern. Wenn Sie eine Größenänderung an einem pixelbasierenden Bild durch eine Softwarefunktion vornehmen und das Bild verkleinern, werden Bildpunkte gelöscht. Wenn Sie das Bild jedoch vergrößern, werden durch die jeweilige Software neue Pixel generiert. Hierbei muss die Software berechnen, welche Farbwerte die neuen Pixel in Abhängigkeit von den umliegenden Bildpunkten haben müssen. Dieser Prozess wird als Interpolation bezeichnet. In dem Fall, dass ein roter und ein grüner Pixel nebeneinanderliegen, muss die Software bei einer Bildvergrößerung zum Beispiel zwei neue Bildpunkte berechnen. Ebenso muss die entsprechende Farbe der neuen Punkte berechnet werden. Diese Interpolation ist ein Rechenprozess, bei dem entschieden wird, welche Farbe die generierten Punkte haben werden; die Software fügt hinzu, was sie für richtig hält. Die Größenänderung eines Pixelbildes wirkt sich nicht auf den Ursprung des Bildes aus; das heißt, es wird nicht die Anzahl der einzelnen Pixel verändert, sondern sie werden nur größer gemacht. Wenn ein pixelbasierendes Bild in der Layoutsoftware vergrößert wird, kommt es ab einer gewissen Prozentzahl zu der eben erwähnten Verpixelung. Auch wenn dies auf dem Display nicht erkennbar ist, wird es spätestens in dem gedruckten Bild zu sehen sein. Das Verkleinern eines Bitmaps hat keinen nennenswerten Effekt. Hierbei wird die effektive PPI-Zahl der Abbildung erhöht und das Bild erscheint im Druck schärfer. Dieser Effekt rührt daher, dass das Bild immer noch über die gleiche Anzahl von Bildpunkten verfügt, die jedoch auf eine kleinere Fläche verteilt sind.

Bitmaps und Transparenz

Pixelbasierende Bilder unterstützen von sich aus zumeist keinen transparenten Modus. Auch die Hintergründe sind nicht transparent, selbst wenn dies am Monitor so erscheint. Transparenz wird nur durch einige spezielle Formate wie GIF und PNG unterstützt. Auch Bildbearbeitungsprogramme können mit Transparenz arbeiten, dazu muss das Bild jedoch im softwareeigenen Format gespeichert werden. Wird das Bild in eine andere Software geladen und in dessen Format gespeichert, gehen transparente Bereiche zumeist verloren, da die Transparenz eine native Eigenschaft des Ursprungsformates ist. Bei einigen Bildbearbeitungsprogrammen gibt es eine Funktion, mit der transparente Bildflächen gesperrt und somit erhalten werden können.

Bildbearbeitungssoftware und verschiedene Dateiformate

Gängige Bildbearbeitungssoftwares sind zum Beispiel Paint von Microsoft, Photoshop von Adobe, Paint Shop Pro und die Opensource-Software GIMP. Häufige Bild-Formate sind *gif, *jpg, *png und *tiff. Auch das Photoshop-eigene Format *psd gehört in diese Kategorie. Konvertierungen zwischen Bildformaten ist in der Regel so unkompliziert wie das Öffnen oder Exportieren des Bildes in einem Editor. Anschließend kann ausgewählt werden, in welchem Format das Bild abgespeichert werden soll.

Fakten über Vektorgrafiken

Vektorbasierende Grafiken sind anders aufgebaut als pixelbasierende Bilder und verfügen über viele Vorteile. Vektorbilder bestehen aus vielen einzelnen Objekten, die man verlustfrei skalieren kann. Diese Vektorobjekte sind durch mathematische Gleichungen berechnet und definiert. Einzelne Objekte oder Pfade werden durch Beziere-Kurven gebildet. Sie sind geräteunabhängig, sodass sie immer in der höchsten Qualität dargestellt und gedruckt werden können. Vektorobjekte bestehen aus verschiedenen Elementen wie Linien, Kurven, Formen und Polygonen. Alle Attribute wie Farbe, Füllung und Umrisse können separat bearbeitet werden. Diese Änderungen wirken sich nicht auf das ursprüngliche Objekt selbst aus. Weiterhin ist eine Bearbeitung durch Knoten und Steuerelementen möglich. Schriften sind auch eine Art von Vektorobjekten. Auch die Schriften können mit Attributen versehen werden und verlustfrei an die Grafikobjekte angepasst werden.

Vorteile von Vektoren in Dateien

Vektorbasierte Bilder sind aufgrund ihrer Skalierbarkeit nicht abhängig von der Auflösung. Eine Vektorgrafik kann beliebig vergrößert und verkleinert werden und alle Objekte sind sowohl am Bildschirm als auch im Druck scharf. Vektorbasierende Objekte können über anderen platziert werden und das untenliegende Objekt wird an den transparenten Stellen durchscheinen. Ein Vektorenkreis und der Kreis eines Pixelbildes sehen auf einem neutralen Hintergrund gleich aus, aber wenn der Kreis eines Pixelbildes über ein Objekt in anderer Farbe gelegt wird, wird er von den weißen Pixeln im Bild mit einem rechteckigen Rahmen umgeben.

Nachteile von Vektorgrafiken

Vektorbilder haben viele Vorteile, aber der Hauptnachteil ist, dass sie für die Darstellung von fotorealistisch wirkenden Bildern nur bedingt geeignet sind. Vektorbilder bestehen normalerweise aus einfarbigen Bereichen oder Verläufen und können deshalb keine realistischen Eindrücke wie ein pixelbasierendes Bild darstellen. Aus diesem Grund sehen die meisten Vektorgrafiken in der Regel wie Zeichnungen aus. Jedoch werden auch vektorbasierende Programme immer weiterentwickelt, sodass die Darstellungen schon recht nahe an einen fotorealistischen Eindruck herankommen. Mit speziellen Werkzeugeinstellungen können Objekten Texturen zugewiesen werden, um ihnen ein realistisches Aussehen zu verleihen, und sie können weiche Übergänge, Transparenzen und Schattierungen erstellen, die früher in Vektorzeichenprogrammen nur schwer zu realisieren waren.

Vektorbilder rastern

Vektorgrafiken entstammen hauptsächlich der Produktion aus einer Software. Bilder können nicht einfach gescannt und als Vektordatei gespeichert werden. Jedoch lassen sich vektorbasierende Bilder leicht in Bilddateien umwandeln. Man spricht hierbei von „Rastern“. Wenn ein Vektorbild in eine Bilddatei umgewandelt wird, muss die Ausgabeauflösung der Bilddatei für die gewählte Größe angegeben werden. Wichtig ist hierbei, dass immer eine Kopie der Ursprungsdatei im nativen Format erhalten bleibt. So ist gesichert, dass immer noch eine Kopie der Datei mit den zugewiesenen Attributen der Objekte existiert.

Wenn zum Beispiel eine Vektordatei in eine Pixelabbildung mit 100 x 100 Pixel konvertiert wird und sich herausstellt, dass die Abbildung größer sein muss, muss die ursprüngliche Datei neu umgewandelt und exportiert werden. Beim Offnen einer Vektorabbildung in einem Bildbearbeitungsprogramm geht die Qualität der Grafikdatei verloren, und es werden Rasterdaten angelegt. Der häufigste Grund, eine Vektorgrafik in eine Bilddatei zu konvertieren, ist eine Verwendung im Screendesign. Ein weit verbreitetes Vektorformat ist zum Beispiel Scalable Vector Graphics (SVG). Früher wurden zumeist Formate wie GIF oder PNG verwendet, um sie in Webseiten integrieren zu können; mittlerweile können aber alle Browser auf allen Systemen SVG-Daten rendern, sodass dies heutzutage die bevorzugte Wahl ist.

Vektorsoftware und die entsprechenden Dateiformate

Die bekanntesten Grafikprogramme sind Illustrator von Adobe und CorelDRAW. Sie speichern auch sogenannte Metadateien, die nicht nur Vektordaten enthalten, sondern auch ein Rasterbild im Pixelformat. Vorteil ist, dass zusammen mit dem Vektorbild ein pixelorientiertes Vorschaubild gespeichert wird. Gängige Vektorformate sind *ai (Illustrator), *cdr (Corel Draw), *dxf (3D-Software) und *wmf (Windows). Metadateiformate sind beispielsweise *eps, *pdf und *pict.