Vektor oder Pixel: Grafikarten, Formate und Auflösung

Worum es geht

Montagmorgen im Wildpark Rotberg. Die Parkleitung will zur Saisoneröffnung ein Banner von 2.5 m Breite am Eingang. Timo, Mediamatiker im 1. Lehrjahr, sucht das Logo und findet genau eine Datei: logo_briefkopf.jpg, 500 × 180 Pixel, irgendwann aus einem alten Word-Briefkopf herauskopiert. Auf dem Bildschirm sieht es ordentlich aus. Auf 2.5 m gedruckt wäre jedes Pixel rund einen halben Zentimeter breit, und die Kanten des Hirschkopfs würden zu Treppenstufen.

Solche Situationen erlebst du in jeder Agentur und jeder Kommunikationsabteilung, oft mehrmals pro Woche. Wer sofort erkennt, ob eine Datei taugt, und das der Kundschaft verständlich erklären kann, spart Korrekturschlaufen und teure Fehldrucke. Dafür brauchst du drei Dinge: den Unterschied zwischen Vektor- und Pixelgrafik, das passende Dateiformat und eine einfache Rechnung mit der Auflösung. Genau das lernst du in dieser Lektion. Am Schluss rechnest du in einem Code-Labor selbst aus, ob ein Bild für einen Druck reicht.

Zwei Arten, ein Bild zu speichern

Stell dir vor, du willst einer Kollegin am Telefon einen roten Kreis beschreiben. Du hast zwei Möglichkeiten:

1. Du sagst: «Kreis, Mittelpunkt bei 50/50, Radius 40, Füllung rot.» Sie kann ihn auf einen Notizzettel oder auf eine Hauswand zeichnen, er wird immer perfekt rund.
2. Du legst ein Gitter mit 100 × 100 Kästchen darüber und sagst für jedes Kästchen, welche Farbe es hat. Das sind 10 000 Angaben. Überträgt sie das Gitter auf die Hauswand, werden die Kästchen riesig.

Variante 1 ist eine Vektorgrafik, Variante 2 eine Pixelgrafik (auch Rastergrafik oder Bitmap genannt).

Ein Foto lässt sich nicht sinnvoll als Vektor speichern: Jede Hautpore und jedes Blatt müsste ein eigener Pfad sein. Umgekehrt ist ein Logo als Pixelbild immer an eine bestimmte Grösse gebunden. Die Faustregel lautet deshalb: Was gezeichnet wird, ist Vektor. Was fotografiert wird, ist Pixel.

Viele Dateien enthalten beides. Ein Flyer-PDF kann ein Vektorlogo, Vektorschrift und ein eingebettetes Foto enthalten. Ob ein PDF wirklich Vektoren enthält, siehst du erst, wenn du stark hineinzoomst oder es in Illustrator öffnest: Ein JPG, das jemand in ein PDF gelegt hat, bleibt ein Pixelbild.

Die wichtigsten Dateiformate

Auflösung: Pixel brauchen eine Druckgrösse

Ein Pixelbild hat zuerst nur eine Pixelzahl, zum Beispiel 3000 × 2000 px. Wie gross es gedruckt wird, entscheidet erst die Auflösung in ppi (pixels per inch, Pixel pro Zoll). Ein Zoll sind 2.54 cm.

Diese drei Formeln brauchst du immer wieder:

Druckgrösse in cm   = Pixel / ppi × 2.54
benötigte Pixel     = cm / 2.54 × ppi
effektive Auflösung = Pixel / (cm / 2.54)

Beispiel: 3000 px bei 300 ppi ergeben 3000 / 300 × 2.54 = 25.4 cm. Dieselben 3000 px auf 50 cm Breite gedruckt ergeben 3000 / (50 / 2.54) = 152 ppi.

Wie viel Auflösung nötig ist, hängt vom Betrachtungsabstand ab. Einen Flyer liest du aus 30 cm, ein Banner siehst du aus mehreren Metern. Die folgenden Faustwerte sind in der Praxis verbreitet. Die verbindlichen Vorgaben macht die Druckerei.

Zwei Begriffe werden oft verwechselt: ppi beschreibt die Pixeldichte des Bildes. dpi (dots per inch) beschreibt, wie viele Farbpunkte ein Drucker pro Zoll setzt. Ein Drucker mit 1200 dpi braucht deshalb nicht 1200 ppi im Bild. Im Alltag sagen trotzdem viele «300 dpi» und meinen 300 ppi.

Bildgrösse ändern: mit oder ohne Neuberechnung

Im Dialog Bildgrösse von Photoshop (ähnlich in Affinity Photo und GIMP) gibt es die Option Neu berechnen. Sie entscheidet über alles:

• Ohne Neuberechnung bleibt die Pixelzahl gleich. Du änderst nur die Angabe, wie dicht die Pixel gedruckt werden. Aus 3000 px bei 72 ppi (105.8 cm) werden 3000 px bei 300 ppi (25.4 cm). Kein Qualitätsverlust, das Bild wird nur kleiner gedruckt.
• Mit Neuberechnung ändert sich die Pixelzahl. Beim Verkleinern werden Pixel zusammengefasst, das ist unproblematisch. Beim Vergrössern muss das Programm fehlende Pixel aus den Nachbarpixeln erraten. Das heisst Interpolation. Dabei entstehen keine neuen Details, nur weichere Übergänge.

Verfahren wie «Bikubisch», «Details erhalten» oder KI-gestützte Hochskalierung können ein Foto auf etwa das Doppelte retten. Ein Logo mit harten Kanten und kleiner Schrift auf das Zwanzigfache zu vergrössern, funktioniert dagegen nie sauber: Die KI rät Kanten, und Buchstaben verändern ihre Form.

Schritt für Schritt: Taugt das Wildpark-Logo für das Banner?

Ausgangslage: logo_briefkopf.jpg mit 500 × 180 px. Das Banner misst 250 × 90 cm, das Logo soll die volle Breite einnehmen. Die Druckerei verlangt für Banner 100 ppi.

1. Benötigte Pixel berechnen. 250 cm / 2.54 = 98.43 Zoll. 98.43 × 100 ppi = 9843 px Breite.
2. Mit dem Vorhandenen vergleichen. 9843 / 500 = 19.7. Das Logo müsste fast zwanzigfach vergrössert werden.
3. Effektive Auflösung berechnen. 500 px / 98.43 Zoll = 5.1 ppi. Ein Pixel wäre 2.54 / 5.1 = rund 0.5 cm breit.
4. Gegenprobe mit der Höhe. 180 px auf 90 cm ergeben 180 / (90 / 2.54) = 5.1 ppi. Dasselbe Bild.
5. Optionen systematisch abwägen. Timo geht diesen Entscheidungsweg durch:

6. Entscheiden und begründen. Zuerst fragt Timo bei der Parkleitung und bei der Agentur, die das Logo damals entworfen hat, nach einer AI-, PDF-, EPS- oder SVG-Datei. Gibt es keine, zeichnet er das Logo in Illustrator nach. Hochrechnen scheidet aus: Faktor 19.7 ist viel zu viel, und ein Logo ist eine Grafik, die sich als Vektor perfekt beschreiben lässt.
7. Der Kundschaft erklären. Timo schreibt dem Parkleiter ohne Fachchinesisch:

Guten Tag Herr Kurmann

Das Logo, das wir haben, ist ein kleines Pixelbild (500 Pixel breit). Für das Banner
bräuchten wir knapp 10 000 Pixel. Würden wir es einfach vergrössern, wären die Kanten
des Hirschs deutlich gezackt und die Schrift unscharf.

Haben Sie oder die damalige Agentur das Logo als AI-, PDF-, EPS- oder SVG-Datei?
Falls nicht, zeichne ich es als Vektorgrafik nach (Aufwand rund einen halben Tag).
Danach ist es in jeder Grösse scharf, von der Visitenkarte bis zum Banner.

Freundliche Grüsse
Timo

Jetzt bist du dran: Programmiere die Auflösungsrechnung selbst. So eine kleine Funktion ist auch ein guter Spickzettel für dich.

Typische Fehler

• Nur die ppi-Zahl ansehen. «Das Bild hat 300 dpi» sagt ohne Pixelzahl nichts. 300 ppi bei 600 px Breite reichen gerade für 5 cm. Frag immer nach der Pixelzahl oder lies sie in den Dateiinformationen ab.
• Hochrechnen als Lösung verkaufen. Interpolation erfindet keine Details. Ein hochgerechnetes Logo bleibt unscharf, auch wenn danach in den Dateiinformationen 300 ppi steht.
• Format mit Inhalt verwechseln. Ein JPG wurde «als PDF gespeichert» und gilt nun als Vektor. Prüfe durch Zoomen oder im Vektorprogramm, ob wirklich Pfade vorhanden sind.
• Ein Foto vektorisieren wollen. Der Bildnachzeichner macht aus einem Porträt ein Poster mit Tausenden Flecken. Für Fotos brauchst du genug Pixel, nicht Vektoren.
• Für alles 300 ppi verlangen. Ein Messebanner mit 300 ppi ergibt riesige Dateien ohne sichtbaren Vorteil. Richte dich nach Betrachtungsabstand und nach den Vorgaben der Druckerei.

Zusammenfassung

• Vektorgrafiken bestehen aus mathematisch beschriebenen Pfaden und sind verlustfrei skalierbar. Pixelgrafiken haben eine feste Anzahl Bildpunkte.
• Logos, Icons und Schrift gehören in Vektorformate (AI, SVG, PDF), Fotos in Pixelformate (JPG, TIFF, PSD, WebP, AVIF).
• Druckgrösse in cm = Pixel / ppi × 2.54. Benötigte Pixel = cm / 2.54 × ppi.
• Die nötige Auflösung hängt vom Betrachtungsabstand ab: rund 300 ppi für Flyer, 150 ppi für Plakate, 70 bis 100 ppi für Banner.
• Bildgrösse ohne Neuberechnung ändert nur die Druckgrösse. Mit Neuberechnung wird interpoliert, und Vergrössern erzeugt keine echten Details.
• Bei ungeeigneten Kundendaten gilt die Reihenfolge: Original anfragen, Grafiken nachzeichnen, bei Fotos neues Material beschaffen. Hochrechnen nur bei kleinen Faktoren.