Dasselbe Bild. Völlig andere Mathematik.

Wie Pixelgrafiken ein Bild speichern

Ein Pixelbild ist buchstäblich ein Raster. Ein Bild mit 1920×1080 speichert 2.073.600 einzelne Pixel, jedes mit einem Farbwert (typischerweise 24 Bit – je 8 Bit für Rot, Grün, Blau) plus optional 8 Bit Alpha. Das Bild „ist“ die Pixeldaten.

Kompression (PNG, JPG, WebP) verringert den Speicherbedarf auf der Festplatte, ändert aber nicht das zugrunde liegende Modell – wenn Sie die Datei öffnen, erhalten Sie weiterhin ein 1920×1080-Raster aus Pixelwerten zum Arbeiten. Das Bild hat eine feste Auflösung, die bei der Aufnahme oder Erstellung einbetoniert wird.

Wie Vektorgrafiken ein Bild speichern

Ein Vektorbild ist eine Abfolge von Zeichenanweisungen. Ein Logo könnte sein: „beginne bei (10, 10), zeichne eine Bézier-Kurve nach (50, 80) mit den Kontrollpunkten (20, 30) und (40, 70), fülle die entstehende Fläche mit dem Hexwert #00B74A.“

Die Datei speichert die Anweisungen, nicht das Bild. Wenn Sie sie öffnen, geht der Renderer (Browser, Plotter, CNC) die Anweisungsliste durch und zeichnet das Ergebnis in der gewünschten Ausgabegröße. Die Anweisungen ändern sich nicht; das Rendering schon.

Die Skalierungsmathematik

Nehmen Sie ein Pixellogo mit 200×200 und lassen Sie es vom Browser in 2000×2000 anzeigen. Es sind 4.000.000 Pixel zu zeichnen, in der Quelle stecken aber nur 40.000. Der Browser muss die übrigen 3.960.000 per Interpolation erfinden – meist bilinear oder bikubisch, was unscharfe Kanten erzeugt. Die tatsächliche Informationsdichte des Bildes bleibt bei 2000×2000 weiterhin 200×200; Sie haben es nur gedehnt.

Nehmen Sie dasselbe Logo als Vektor und rendern Sie es in 2000×2000. Die Mathematik wird bei der neuen Auflösung neu berechnet – jedes Kurvensegment wird ausgewertet, um exakt in das 2000×2000-Raster zu passen. Die Kanten bleiben gestochen scharf, weil der Renderer von Grund auf die volle Ausgabeauflösung nutzt.

Abwägung von Dateigröße und Rechenaufwand

Pixel- und Vektorformate tauschen Speicherplatz gegen Rechenzeit. Pixel sind günstig zu rendern (einfach das Raster auf den Bildschirm blitten), aber teuer bei hohen Auflösungen zu speichern. Vektoren sind günstig zu speichern, erfordern aber Rechenleistung beim Rendern.

DPI, Auflösung und warum Vektoren beides ignorieren

DPI (Dots per Inch) ist ein Konzept der Pixelformate. Es beschreibt, wie viele Pixel pro Zoll der Ausgabe die Datei belegen soll. Ein Bild mit 1200×1200 bei 300 DPI druckt in 4×4 Zoll; bei 72 DPI druckt es in etwa 16,7×16,7 Zoll, sieht im Druck aber pixelig aus, weil nur 72 Pixel pro Zoll an Detail vorhanden sind.

Vektordateien haben kein DPI – die Mathematik rendert bei der Pixeldichte, die das Ausgabegerät verlangt. Ein Vektorlogo druckt bei 300 DPI genauso sauber wie bei 72 DPI wie bei 4800 DPI (Offsetdruck). Die Trennlinie Pixel-vs.-Vektor ist zugleich eine Trennlinie DPI-vs.-auflösungsunabhängig.

Anti-Aliasing — der sichtbare Kompromiss

Wenn ein Vektor bei einer niedrigen Ausgabeauflösung rendert, werden die Kurven auf ein grobes Pixelraster abgetastet. Der Renderer nutzt Anti-Aliasing – teiltransparente Pixel entlang der Kanten –, damit die Kurve glatt wirkt. Bei höheren Ausgabeauflösungen schrumpft der Anti-Aliasing-Saum und die Kante wirkt schärfer.

Pixelbilder haben das Anti-Aliasing bereits bei der Quellauflösung „einbetoniert“. Wenn Sie sie hochskalieren, wachsen die einbetonierten Anti-Aliasing-Pixel proportional mit und werden als unscharfe Kanten sichtbar. Es gibt keine Möglichkeit, einem Pixelbild ohne Neuzeichnung mehr Anti-Aliasing hinzuzufügen – die Quellauflösung ist eine harte Obergrenze.

Wann was gewinnt — nach Inhaltstyp

Fotografische Inhalte

Immer Pixel. Vektoren können die Millionen feiner Tonwertabstufungen, die eine Kamera erfasst, nicht darstellen. Selbst KI-Vektorisierer liefern stilisierte Interpretationen, keine originalgetreue Fotowiedergabe.

Logos und Markenzeichen

Immer Vektor. Sie müssen vom Favicon bis zur Plakatwand skalieren, ohne neu gemastert zu werden.

Icons und UI-Grafiken

Vektor. SVG-Icon-Sets rendern bei jedem Bildschirm-DPI gestochen scharf; Pixel-Icons brauchen mehrere Auflösungsvarianten (1×, 2×, 3×).

Produktions-Schnittpfade (Vinyl, CNC, Laser)

Vektor. Das Schneidewerkzeug braucht Pfadgeometrie, keine Pixeldaten.

Vorlage zur Stickerei-Digitalisierung

Vektor. Stichgerechte Geometrie entsteht aus sauberen Vektorpfaden.

Screenshots und Bildschirmaufnahmen

Pixel. Die Quelle ist pixelnativ (Ihr Bildschirm).

Gemischt Foto + Text (Magazinanzeigen, Poster)

Beides. Pixel für das Foto, Vektor für Text und Grafikelemente. Kombiniert in einer PDF/X-4 für den Druck oder in einer mehrschichtigen PSD/AI zur Bearbeitung.