Pixel- vs. Vektorgrafik

Was ist was? Und wieso Pixel- vs. Vektorgrafik?

Wer sich bereits mit Fotos auseinander gesetzt hat, der weiß bestimmt, dass digitalisierte Fotos in sogenannte Pixelbilder verarbeitet und aufbereitet werden. Ich möchte in diesem Beitrag nicht technisch werden – keine Sorge.
Soviel sei gesagt: Ein Bild/Foto/Grafik hat bestimmte Werte, mit denen die Schwere, Auflösung, Pixeldichte, etc. gemessen werden.

Die Bemessung ist etwas kompliziert und Bedarf viel Umrechnen. Alleine über das Thema, wie das Gewicht von Pixelbildern berechnet wird, kann man wieder einen ganzen Beitrag schreiben, aber so viel will ich gar nicht erzählen.

Ich möchte hier über die Unterschiede von Pixel- und Vektorgrafiken hinweisen und berichten, warum es so wichtig ist, die Unterschiede zu kennen und wie diese Grafiken das Aussehen und die Reputation eines Unternehmens beeinflussen können!

Wie kann sowas schädlich sein?

Gehen wir von einem Beispiel aus: Ein Grafikdesigner benötigt von seinem Kunden das Logo, um es für die sozialen Medien, auf Flyern, Plakaten, Visitenkarten und der Website – einmal als Logo in der Navigation und einmal größer für die Full-Width Landingpage – darzustellen.

Der Kunde schickt dem Grafikdesigner fix das Logo per Word-Datei oder noch „besser“: per WhatsApp! Denn why not?

Und hier geht der Spaß los! Das Beispielbild, das ich mir bei Adobe Stock für diesen Blogbeitrag herausgesucht habe, passt dazu gut.

Fangen wir von hinten an: Eine Word-Datei ist keine (!) Zip! Die Bilder werden zwar komprimiert, können aber, sofern es Bilder mit den Endungen *.jpg, *.png, *.gif, o. ä., sind, nicht rekonstruiert werden. Pixel- und Datenmengen, die gelöscht werden, bleiben gelöscht. Ähnlich ist es, wenn man ein schönes Portraitfoto per WhatsApp verschicken möchte, um es im Zwischenspeicher zu behalten und es bei Rossmann am Fotodrucker für Omas nächsten Geburtstag ausdrucken möchte. Die Server zur Übertragung von Bildern sind selbst bei WhatsApp begrenzt und deswegen (und, um die Schnelligkeit der Übertragung zu gewährleisten) komprimiert WhatsApp hochauflösende und schwere Bilder auf ein Minimum und zwar auf das, was benötigt wird, um es noch am Handy anschauen zu können. Sobald aber herangezoomt wird, sind die Pixel erkennbar.

Pixelgrafik

Nehmen wir das Beispielbild und benutzen einen Ausschnitt, um genauer definieren zu können, wie die Auflösung die Darstellung eines Bildes verändert. Benutzt man von Anfang an ein komprimiertes Bild (wenig Pixel; als Beispiel über WhatsApp verschickt), so kann man das Bild zwar im Ganzen erkennen, jedoch bilden sich sogenannte Pixel-Artefakte beim Zoomen. Das liegt daran, dass das Bild für das bestimmte Medium angepasst wurde. Pixelgrafiken zu vergrößern, also Pixel hinzu zu addieren, ist zwar möglich, macht das Bild im wesentlichen aber unschärfer und damit für, z. B. Printmedien, unbrauchbar.

Und sind wir mal ehrlich: Wer möchte schon eine Zeitschrift mit verpixelten Bildern lesen? Wir leben in einem sehr visuellen Zeitalter, weswegen wir versuchen sollten – zumindest besten Gewissens – auch eine ordentliche Arbeit abzuliefern. Manchmal bedeutet das, lieber Sachen an externe Experten abzugeben oder sich zumindest belehren zu lassen, falls man sich nicht ganz sicher ist. Ein doppelter Check hilft jedem.

Wichtig: Um Pixelbilder (auch Bitmap genannt) zu bearbeiten, nutzt ihr Photoshop. Die einen oder anderen werden beim Lesen dieses Satzes bestimmt denken: „Ja, ist doch klar!“. Ist es auch, aber achtet darauf, dass ihr Photoshop auch nur für das Bearbeiten pixelbasierter Bilder verwendet (solltet ihr die Adobe Creative Cloud benutzen)! Für abweichende Arbeiten, sind andere Programme da.

Vektorgrafik

Vektorgrafiken sind ganz anders als pixelbasierte Bilder. Vektorgrafiken sind, wie ihr bereits erahnen könnt, mathematischer Natur. Hierbei stellen wir uns ein kartesisches Koordinatensystem mit einer x- und einer y-Achse vor. Auf diesen Achsen haben wir unsere Maßeinheit von 0 bis n (n steht hierbei für eine endlich-unendliche Zahl). Ich habe die Maßeinheit von Vektorgrafiken hier extra nicht bestimmt, da ein sogenannter Vektorpfad lediglich von Punkt A nach Punkt B geht – simpel ausgedrückt. Ein Vektorpfad ist also, im Grunde genommen und kurz zusammengefasst, eine Funktion in einem Koordinatensystem und kann verschiedene Informationen besitzen.

Der Unterschied zu Pixelgrafiken ist, dass ein Pixel einen festgeschriebenen Wert (den HEX-Farbcode, bestehend aus sechs Ziffern von 0 bis F, was wiederum im Hintergrund vom PC oder Mac aus dem Hexadezimal in die binäre Form (0 und 1 in Viererstellen) umgerechnet wird) besitzt, als Beispiel: 000000 (für die Farbe Schwarz) oder FFFFFF (für die Farbe Weiß). Berechnet wird hier in Bits und dem RGB-Wert (Rot-Grün-Blau; die Lichtfarben), wobei die ersten zwei Ziffern des HEX-Codes für den Farbkanal Rot, die zweiten zwei Ziffern für den Farbkanal Grün und die dritten zwei Ziffern für den Farbkanal Blau stehen.

Diese Information kann bei einer Vektorgrafik natürlich auch ein Farbcode sein, doch wird hier nicht in festen Größen berechnet, sondern in den Abständen oder den Punkten A und B (und C und D und…).

Das ist alles ein wenig viel und dieses Thema ist auch so umfangreich und technisch, dass es mehr Bedarf als einen Blogbeitrag, um alle Unterschiede aufzulisten und verstehen zu können. Ich hoffe einfach, dass ich alles ein wenig Anschaulicher darstellen kann und sich einige Fragen bei euch durch die paar Sätze meinerseits bis jetzt schon beantwortet haben.

Bei diesen beiden Beispielbildern seht ihr wieder den ausgewählten Bildausschnitt. Dieses Mal sind die Bilder jedoch keine Pixel-, sondern Vektorgrafiken!

Ja, Pixelbilder können relativ unkompliziert vektorisiert werden (achtet hierbei aber auf die Auflösung des Pixelbildes, da es sonst sehr unsauber und grob vektorisiert werden kann).

Im ersten Beispiel seht ihr das vektorisierte Pixelbild, das dem Original zum Verwechseln ähnlich sieht, nicht wahr? Zoomt man jedoch heran, so erkennt man seltsame Fragmente, die Inseln auf einer Landkarte ähneln. Um diese Fragment-Ansicht zu erhalten, hilft einem Adobe Illustrator. Mit der Tastenkombination STRG+Y (bei Windows) oder CMD+Y (bei Mac), kann die Pfadansicht aktiviert werden.

Die Pfadansicht zeigt alle angelegten Pfade der Vektorgrafik und kann euch zudem helfen, Fehler zu erkennen, sollte mal eine Fläche über einer anderen liegen oder zwei Punkte nicht vernünftig verbunden sein.

Was ist nun der Vorteil einer Vektorgrafik?

Die Vektorgrafik steht eigentlich nicht in Konkurrenz zur Pixelgrafik. Beide sind so unterschiedlich, wie nur möglich. Um es auf den Punkt zu bringen: Vektorgrafiken können bis ins Unendliche skaliert (vergrößert oder verkleinert) werden, ohne dabei einen Informationsverlust zu erleiden. Pixelgrafiken können zwar auch vergrößert werden, jedoch werden Pixel bikubisch hinzugerechnet, was das Bild unscharf werden lässt. Der neue und hinzuaddierte Pixel besitzt nämlich den Farbmittelwert der anderen Farben um ihn herum. Das Verkleinern von Pixelgrafiken ist – sollte – kein Problem sein; kleiner geht immer.

Logos sollten in der Regel als Vektorgrafik angelegt werden. Mit sollten meine ich, das nicht nett, sondern bestehe als Grafikdesigner darauf, dass meine Kolleg:innen kein Logo als Pixelgrafik erstellen! Der Grund dafür sollte klar sein: Die Vergrößerung des Logos ist nicht möglich! Wenn man es gerne „unscharf“ möchte, go for it: Dann sieht euer 13-Mrd.-Umsatz-Konzern-Logo halt aus wie eine von eurem Mathe-Lehrer in Word erstellte Einladungskarte zum Kindergeburtstag.

Habt ihr schon Erfahrungen mit der „Verwechslung“ von Vektor- und Pixelgrafiken gemacht? Lasst es mich in den Kommentaren wissen! 🤗