Vektor- vs. Rastergrafiken

Hallo Design Freunde und willkommen zurück auf unserem Blog. Dieses Mal haben wir wieder ein Design Thema für dich: und zwar erklären wir dir hier den Unterschied zwischen Vektor- und Rastergrafiken. Du erfährst, was das überhaupt ist, wofür du welches Format verwenden solltest und worin die Vor- und Nachteile des jeweiligen Formates bestehen.

Buddy-Tipp: Wir haben den gesamten Beitrag hier auch in Videoform in nur 3-Minuten auf unserem YouTube Kanal für dich. Perfekt, wenn du es vielleicht eilig hast oder Lesen nicht so dein Ding ist. Oder wenn du einfach nur gerne schöne Animationen ansiehst 😉

Was sind Vektor- und Rastergrafiken?

Lass uns doch mal mit einer kurzen Beschreibung beider beginnen. Vektor- uns Rastergrafiken sind beides Formattypen für das Speichern von Bilddateien. Eine Rastergrafik ist dabei das typischere und ältere Format und speichert eine Grafik mit mehreren Millionen farblichen Bildpunkten ab – diese nennt man auch Pixel. Gängige Formate für Rastergrafiken sind z.B. JPEG, PNG oder GIF. Vektorgrafiken sind moderner und lösen in einigen Bereichen die Rastergrafiken ab. Sie speichern ihre Inhalte nicht mithilfe vieler einzelner Bildpunkte ab, sondern bedienen sich der Mathematik und speichern ihre Inhalte mithilfe von Ankerpunkten in einem Koordinatensystem. Die Ankerpunkte werden durch mathematischen Formeln verbunden, wodurch unterschiedlichste, selbst runde, Flächen entstehen können, die man beliebig einfärben kann. Gänge Vektorformate sind z.B. SVG, PDF, AI.

Auflösung und Skalierung

Da Rastergrafiken eine vorgegebene und somit limitierte Anzahl an Pixeln beinhalten, sind sie in ihrer Größe limitiert und werden “pixelig” oder “verpixelt”, wenn sie über diese Größe hinaus skaliert werden. Eine Vektorgrafik hingegen kann beliebig groß skaliert werden, da sie mathematisch berechnet wird und die Verhältnisse der Ankerpunkte zueinander der Größe angepasst wird. Das klein skalieren beider Varianten ist hingegen immer ohne Qualitätsverlust möglich.

Dateigröße

Nehmen wir die Datei einer Flagge als Beispiel: Die Vektorgrafik hat eine gesamte Dateigröße von 152 Kilobyte und besteht aus zwei Formen. Die Rastergrafik hingegen hat eine Dateigröße von 2,7 Megabyte (2700 Kilobyte) und besteht aus sage und schreibe 200.000 Bildpunkten (Pixel). Wenn wir die Flagge größer anlegen, vergrößert sich die Dateigröße der Rastergrafik proportional zur Pixelanzahl. Die Vektorgrafik hingegen besteht weiterhin aus nur zwei Elementen mit denselben mathematischen Formeln und verändert sich nicht in der Dateigröße. Cool, oder?

Wann benutzt man welches Format?

Jetzt stellt sich die große Frage, wann wir welches Format nutzen sollten? Rastergrafiken werden für alle möglichen Bilddatei genutzt und sind, wie bereits gesagt, das gängigere Format. Sie sind unschlagbar für detailreiche Grafiken und Texturen und sehr einfach zu handhaben. In deinem Alltag arbeitest du ständig mit Rastergrafiken. Jedes Mal wenn du ein Foto schießt, einen Screenshot machst oder eine Datei als JPEG-Datei speicherst, erstellst du eine Rastergrafik.

Vektorgrafiken hingegen sind ideal für den Einsatz von Logos, Text und Illustrationen geeignet, lassen sich jedoch etwas komplizierter erstellen. Jeder einzelne Ankerpunkt muss für jedes Objekt individuell in einem speziellen Vektor Programm gesetzt, verbunden und angepasst werden.

Konvertieren

Raster- und insbesondere Vektorgrafiken können beide in das jeweils andere Format umgewandelt/konvertiert werden. Dabei ist die Umwandlung einer Vektorgrafik zu einer Rastergrafik wesentlich einfacher, da diese in einfach in ihrer Größe skaliert, durch Pixel beschrieben und als Rastergrafik abgespeichert werden kann. Eine Rastergrafik hingegen kann nicht so einfach mit mathematischen Formeln beschrieben werden. Die einzelnen Pixel müssen manuell von Hand zu Pfaden nachgezeichnet werden, weshalb das Ergebnis meist etwas anders aussieht. Durch die Hilfe von digitalen Bildnachzeichnern ist es zwar möglich den Vorgang zu beschleunigen, jedoch schwankt das Ergebnis zwischen detailliert, grob und … interessant. 😆

Bearbeitung und Animation

Die einzelnen Elemente in einer Vektorgrafik können jederzeit und unabhängig voneinander angefasst und verändert werden. Dadurch verändert sich lediglich die mathematische Formeln der Form, was ein Computer leicht berechnen kann. So kann z.B. mit nur einem Klick einen Farbverlauf verändert werden. Bei den Rastergrafiken hingegen ist die Bearbeitung nicht so leicht. Mit dem menschlichen Auge erkennen wir zwar einzelnen zusammenhängende Element, der Computer erkennt jedoch nur einzelne Pixel mit einem bestimmten Farbwert. Man muss dem Bildbearbeitungsprogramm vermitteln, welche Pixel/Pixelgruppen man verändern möchte. Dabei ist es oft schwer, wirklich jeden Pixel der zu verändernden Fläche anzufassen, weshalb der Prozess mühsamer und oft auch ungenauer ist, als bei einem Vektor.

In der Animationsbranche werden überwiegend Vektorgrafiken verwendet, da bei ihnen die einzelnen Flächen und Elemente bewegt werden können. Auch können sie schnell und einfach in ihrer Form und Farbe verändert werden und beliebig skaliert werden, ohne Qualitätsverlust.  Rastergrafiken müssen hingegen aufwendig freigestellt, verformt und mit filtern eingefärbt werden.

Fazit

Beide Formate haben definitiv ihre Daseinsberechtigung! Rastergrafiken sind unschlagbar schnell erstellt und universell nutzbar. Sowohl in der Fotografie, als auch in der Illustration sind sie unverzichtbar und unersetzlich. Jedoch sind Rastergrafiken nicht immer sinnvoll und wenn du bisher immer alles als JPG gespeichert hast, solltest du überlegen, auch ab und zu Gebrauch von einer Vektorgrafik zu machen. Insbesondere Schriften und Illustrationen wie Icons oder Logos sollte man grundsätzlich immer als Vektor speichern. Denn mit nur einer kleinen Datei kannst du sowohl eine kleine Visitenkarte ausschmücken, als auch ein ganzes Flugzeug mit deinem Logo bedrucken. Denk da mal drüber nach! 😀 

Erklärvideo

Und das war es auch schon. Du kennst jetzt den Unterschied zwischen den beiden Formaten und für welchen Zweck du welches verwenden sollst. Wir hoffen dir hat dieser Beitrag geholfen und wenn du magst, kannst du auch unser animiertes Video dazu ansehen. Oder Folge gleich unserem YouTube Kanal, um weitere Videos zu sehen.

Liebe Grüße aus Berlin,

deine Buddies
Hanna und Dorian