+43 699 10843149
office@grafikarin.com

Was ist der Unterschied zwischen Pixel- und Vektorgrafiken?

Wenn du Grafikdokumente erstellst und eventuell diese auch in Druck geben willst, solltest du einige Grundbegriffe kennen. Aber auch, wenn du dich einfach mit GrafikerInnen oder MediendesingerInnen unterhalten und nicht völlig daneben stehen möchtest, schadet es nicht, über einige Themen Bescheid zu wissen. In diesem Artikel möchte ich dir den Unterschied zwischen Pixel- und Vektorgrafiken erklären sowie dich mit den gängigsten Dateiendungen vertraut machen, damit du mitreden kannst, wenn es darum geht wann was am Besten verwendet werden sollte.

Pixelgrafiken

Eine Pixel- oder Rastergrafik ist ein Bild, das sich – wie der Name schon sagt – aus verschiedenen, farbigen Pixeln zusammensetzt. Die Anzeige am Bildschirm erfolgt immer mit Hilfe eines Rasters. Ausschlaggebend ist hierbei die Auflösung – Breite und Höhe in Pixel gemessen – sowie die Farbtiefe. Pixelgrafiken sind alle Bilder, Scans, Fotos, etc. die digital angezeigt werden. Insbesondere von alten Handys kennen manche von euch vielleicht noch die Displays, die nur wenige Pixel zur Verfügung hatten, weshalb die Darstellung sehr grob und wenig detailliert war. Die gängigsten Formate für Pixelgrafiken sind JPEG, BMP, GIF, PNG, TIFF, PSD und RAW.

.JPEG – Joint Photographic Experts Group: Für Bilder wie etwa Fotos ist das wohl das verbreitetste Format, nicht nur, weil gängige Digitalkameras aber auch Smartphones die gekippsten Bilder in diesem Format speichern. Die Komprimierung kann individuell angepasst werden und ist verlustbehaftet, deshalb aber auch weniger speicheraufwändig.

.BMP – Windows Bitmap: Dieses etwas ältere Bildformat speichert Bilder verlustfrei. Die schwache Komprimierung führt aber auch zu größeren Dateien, weshalb das Format besonders im Internet nur selten Anwendung findet. Hierfür sind PNG oder GIF die bessere Alternative.

.GIF – Graphics Interchange Format: Besonders im Internet ist dieses Format weit verbreitet, da es sowohl Transparenzen als auch Animationen unterstützt. Da ein GIF aber nur 256 Farben abbilden kann, ist es für Fotos eher schlecht geeignet.

.PNGPortable Network Graphics: Dieses ebenfalls im Web weit verbreitete Format ist im Gegensatz zu GIF auch für die Darstellung von Bildern möglich, da es eine verlustfreie Komprimierung bietet. Auch Transparenzen werden unterstützt.

.TIFF – Tagged Image File Format: Dieses Format unterstützt den Farbmodus CMYK (mehr dazu in einem späteren Artikel) und wird deshalb vor allem in der Druckvorstufe für hochauflösende Bilder verwendet. Die Komprimierung kann angepasst werden und eine Einbettung von Pfaden ist ebenfalls möglich. 

.PSD – Photoshop Document: Diese Dateiendung wird von Photoshop verwendet und speichert sämtliche Bilddaten, inkl. Informationen über Ebenen, Kanäle, Masken, Vektoren, etc. völlig verlustfrei, was natürlich zur Folge hat, dass die Dateien relativ groß sind. Gelesen werden können die Dateien inzwischen nicht nur von Photoshop sondern auch von einigen anderen Programmen. Zur weiteren Verwendung müssen PSD-Files allerdings in JPEGs, PNGs oder andere Formate – je nach Verwendungszweck – exportiert werden.

.RAW – RAW Graphics Format: In Kontakt mit dem Rohdatenformat kommst du vor allem dann, wenn du eine höherwertige Kamera (z.B. Spiegelreflex) verwendest. Du kannst hier einstellen, dass die Bilder im Rohformat aufgenommen werden, was dir später am Rechner noch viele Einstellungsmöglichkeiten ermöglicht, die du etwa beim Standardformat JPEG, das Digitalkameras liefern, nicht hättest.

Vektorgrafiken

Im Vergleich zu Pixelgrafiken brauchen Vektorgrafiken weniger Speicher. Der größte Unterschied liegt allerdings in der Skalierbarkeit. Vergrößert man Pixelgrafiken, hat man häufig schon den Effekt gesehen, dass Formen oder Bilder sehr unscharf werden. Das liegt daran, dass einfach zu wenig Informationen vorhanden sind. Es werden zwar neue Pixel dazugerechnet, diese aber in anderen Farbtönen, so dass das Bild nicht mehr gleich scharf ist. Vektorgrafiken hingehen können beliebig und völlig verlustfrei skaliert werden, da sie aus Linien, Kreisen und Kurven zusammengesetzt sind. Sie basieren auf einer Bildbeschreibung und nicht auf einem Pixelraster, bei dem jedem Pixel ein Farbwert zugeordnet ist. Folgende sind die gängigen Dateiendungen, wenn es um Vektorgrafiken geht:

.AIAdobe Illustrator: Diese Dateiendung wird von Adobe Illustrator verwendet und speichert analog zu Photoshop bei Vektorgrafiken alle nötigen Informationen der Arbeitsdatei (inkl. Ebenen). Auch AI-Files müssen vor der weiteren Verbreitung in JPEG, PNG, SVG oder PDF umgewandelt werden.

.CRDCorelDRAW: Das Vektorzeichenprogramm war früher stark verbreitet, wurde aber vielerorts aufgrund der besseren Kompatibilität und des höheren Funktionsumfangs durch Adobe Illustrator ersetzt. Importieren und anzeigen kann man alte CDR im Normalfall auch mit Adobe Illustrator.

.DXFDrawing Interchange Format: Der Industriestandard für Vektorgrafiken kann in vielen Programmen geöffnet und bearbeitet werden und eignet sich auch für die Erstellung von 3D-Modellen.

.EPSEncapsulated PostScript: Eine EPS-Datei ist verlustfrei und kann die gleichen Elemente wie eine AI-Datei enthalten. Das Format gilt aber als etwas veraltet, da der urspüngliche Verwendungszweck durch Adobe PDF abgelöst wurde, was unter anderem der Tatsache zugrunde lag, dass es nicht zwischen Bitmap und Vektor unterscheidet. EPS-Dateien sind als relativ speicherintensiv.

.SVG – Scalable Vector Graphics: Dieses relativ neue Format wird für das Web verwendet und zeichnet sich durch kleine Dateigrößen aus, weshalb es öfters für den Dateiaustausch zur Verfügung gestellt wird. Erstellt und geöffnet werden kann es u.a. auch in Adobe Illustrator.

.SWFShockwave Flash: Das Grafik- und Animationsformat von Flash kann Animationen, Töne und Videos enthalten. Während früher komplette Webseiten in Flash gebaut und programmiert wurden hat die Verwendung in den letzten Jahren aber zunehmend abgenommen.

Wozu brauchst du Vektorgrafiken?

Die Antwort ist einfach: für alle Elemente, die früher oder später skaliert werden sollen! Ein Logo sollte etwas immer als Vektorgrafik erstellt werden, da du ja nie weißt, ob du es nicht mal auf einem Rollup, einem Banner oder einem großen Schild anbringen möchtest. Hast du dann lediglich eine Pixelgrafik, wird diese sehr unscharf werden, was natürlich nicht gut aussieht. Auch wenn du z.B. Folienbeklebungen oder T-Shirt-Drucke machen möchtest brauchst du eine Vektorgrafik, da diese die notwendigen Informationen über die Pfade enthält entlang derer geschnitten werden muss.

Was soll ich tun, wenn ich keine Vektorgrafik habe?

In Adobe Illustrator kannst du Pixelgrafiken ganz einfach automatisch nachzeichnen lassen. Füge hierzu einfach dein Pixel-Bild ein und wähle in der 2. Menüleiste oben „Bildnachzeichner“. Hier hast du dann einige Einstellungsmöglichkeiten – probiere aus, welche am Besten für deinen Zweck funktioniert, je nach Bild kann nämlich eine Einstellung besser oder schlechter wirken. Noch ein schneller Klick auf den Button „Umwandeln“ – und schon hast du deine Pixelgrafik vektorisiert. Leider klappt dieser einfache Automatismus nicht bei allen Bildern, weshalb es durchaus vorkommen kann, dass du mal etwas nachzeichnen musst. Dafür legst du dir das Pixelbild am Besten auf eine Ebene und machst dir in Illustrator darüber eine neue, auf der du die Formen nachmalst. Das dauert zwar manchmal etwas, aber muss sein, wenn eine Grafik, ein Icon oder ein Logo größer dargestellt werden soll.

Ich hoffe, ich habe dir den Unterschied halbwegs verständlich erklären können und du bist jetzt bestens gewappnet für das nächste Telefonat mit einer Druckerei. Sonst freue ich mich über Fragen, aber auch Wünsche und/oder Anregungen zu diesem Artikel unter blog@grafikarin.com.

Liebe Grüße,
grafikarin

Tags: , , , , , , , , , ,