Pixel vs. Millimeter: Der komplette Umrechnungsleitfaden

Jeder Bildschirm und jeder Druckauftrag liegt auf derselben Bruchlinie: ein Pixel hat keine feste physikalische Größe. Dasselbe Rechteck mit 100 Pixeln sieht auf einem typischen Browser wie 26 Millimeter aus, auf einer Magazinseite wie 8 Millimeter und auf einem hochwertigen Kunstdruck nur wie 4 Millimeter. Die Zahl, die zwischen digitalen Pixeln und realer Länge übersetzt, ist DPI (Punkte pro Zoll, dots per inch) — und sie richtig zu treffen ist der Unterschied zwischen einer Schaltfläche, die du bequem antippen kannst, und einer, über die dein Finger hinausschießt; zwischen einem Logo, das scharf druckt, und einem, das verschwommen herauskommt.

Dieser Leitfaden geht durch, was ein Pixel wirklich ist, warum DPI zählt, welche Mathematik zwischen Pixeln und Millimetern umrechnet, welchen DPI-Standards du in der Praxis begegnest und welche Workflows Designer, Fotografen und Entwickler zur Umrechnung zwingen. Unterwegs verweisen wir auf den kostenlosen Pixel-Umrechner auf Screen Ruler Online — öffne ihn in einem zweiten Tab und prüfe die Zahlen beim Lesen mit.

Was ist ein Pixel?

Ein Pixel (kurz für "picture element", Bildpunkt) ist die kleinste diskrete Einheit eines digitalen Bildes oder Bildschirms. Auf einem Bildschirm ist es ein einzelner adressierbarer Punkt, meist aus drei Subpixeln — Rot, Grün und Blau — die kombiniert eine wahrgenommene Farbe ergeben. In einer Bilddatei ist es ein einzelner Eintrag in einem Raster aus Farbwerten. Entscheidend ist: ein Pixel ist eine logische Einheit, keine physikalische. Seine reale Größe hängt vollständig davon ab, wie das Gerät, das es rendert, kalibriert wurde.

Betrachte ein Bild mit 1920×1080 Pixeln. Auf einem 24-Zoll-Monitor in nativer Auflösung ist jeder Pixel etwa 0,265 mm breit. Auf einem 5,5-Zoll-Telefon, das dasselbe Bild eingepasst anzeigt, ist jeder Pixel rund 0,06 mm. Auf einem mit 300 DPI gedruckten Magazin wird jeder Pixel zu 0,085 mm. Das Bild ist dasselbe; die physikalische Größe der Pixel ist eine Funktion des Ausgabemediums.

Deshalb brechen reine Pixelvorgaben in dem Moment zusammen, in dem du das Medium wechselst. Eine Regel wie "mach diese Schaltfläche 44 px hoch", die auf einem iPhone ein bequemes Antippziel liefert, ergibt auf einem 4K-Monitor einen winzigen Streifen und auf einer Plakatwand eine massive Form. Um über reale Größen zu sprechen, musst du über DPI sprechen.

Was ist DPI (und PPI)?

DPI steht für "dots per inch" (Punkte pro Zoll) — die Anzahl der Pixel (oder Punkte beim Druck), die in einem linearen Zoll physikalischer Oberfläche stecken. PPI ist dieselbe Idee, speziell auf Bildschirme angewandt ("pixels per inch"). Beide Begriffe werden umgangssprachlich austauschbar verwendet; dieser Leitfaden sagt meist DPI, weil davon die Umrechnung abhängt.

DPI ist der Umrechnungsfaktor:

inches = pixels / DPI
millimeters = (pixels / DPI) × 25.4

Die Konstante 25,4 ist fix: per internationaler Definition gibt es exakt 25,4 Millimeter in einem Zoll. Die Variable ist DPI, und genau die wechselt zwischen Medien:

Kontext	Typische DPI	Bedeutung
Web (CSS-Pixel)	96 DPI	Die Referenzauflösung für Browser und Betriebssysteme
Klassische Mac-Typografie	72 DPI	Ein Pixel = ein Druckerpunkt in früher Apple-Software
Entwurfs-/Großformatdruck	150 DPI	Poster, Banner, Proofs
Hochwertiger Druck	300 DPI	Magazine, Bücher, Verpackungen
Foto / Fine Art	600 DPI	Fotodrucke, Strichzeichnungen, Text unter Vergrößerung

Dieselben 100 Pixel ergeben bei diesen fünf DPI-Werten:

DPI	Zoll	Millimeter
72	1.389	35.28
96	1.042	26.46
150	0.667	16.93
300	0.333	8.47
600	0.167	4.23

Beachte, wie drastisch die physikalische Länge schrumpft, wenn die DPI steigt. Die Pixelzahl ändert sich nie; nur die angenommene Dichte tut es.

Die Mathematik, Schritt für Schritt

Angenommen, du hast ein Banner mit 800 Pixeln Breite und willst wissen, wie groß es auf dem Bildschirm wird. Beginne mit der Formel:

inches = pixels / DPI = 800 / 96 ≈ 8.33 inches
millimeters = inches × 25.4 ≈ 211.67 mm
centimeters = inches × 2.54 ≈ 21.17 cm

800 px bei den standardmäßigen 96 DPI im Web sind also etwa 21 cm breit — grob die Hälfte eines DIN-A4-Blattes.

Jetzt verlege dieselben 800 px in einen 300-DPI-Druck:

inches = 800 / 300 ≈ 2.67 inches
millimeters ≈ 67.73 mm

Dieselbe Pixelzahl, drastisch kleinerer Druck. Um dieselbe physikalische Größe im Druck zu erhalten, müsstest du die Pixelzahl auf etwa 2400 px verdreifachen. Genau deshalb verlangen Print-Designer "300-DPI-Versionen" von Web-Assets — das Foto oder Logo muss mit höherer Pixeldichte neu abgetastet oder neu exportiert werden, damit dieselbe physikalische Größe scharf landet.

Die umgekehrte Richtung ist ebenso üblich. Eine Druckerei verlangt ein 100 mm × 50 mm großes Logo bei 300 DPI. Die benötigten Pixelmaße sind:

pixels = (millimeters / 25.4) × DPI
       = (100 / 25.4) × 300 ≈ 1181 px wide
       = (50 / 25.4) × 300 ≈ 591 px tall

Der Pixel-Umrechner erledigt diese Hin- und Rückrechnung in Echtzeit. Tippe 100 ins Millimeter-Feld, stelle DPI auf 300 — und mit einem Klick auf einen Einheiten-Chip zeigt er dir 1181 Pixel.

Web-Realität: 96 DPI und der CSS-Pixel

Moderne Web-Browser, Betriebssysteme und CSS-Spezifikationen standardisieren alle auf 96 Referenz-Pixel pro Zoll. Das bedeutet, eine Linie von 96 px soll als ein Zoll physikalischer Bildschirmfläche erscheinen. In der Praxis verkomplizieren ein paar Dinge das Bild:

1. Display-Skalierung. macOS und Windows können die Benutzeroberfläche mit 125 %, 150 %, 200 % usw. skalieren. Eine 100-px-Linie auf einem 4K-Display bei 200 % Skalierung erscheint in derselben physikalischen Größe wie auf einem 1080p-Display bei 100 % — eine systemweite Anpassung, damit Text auf hochauflösender Hardware nicht zu unleserlicher Größe schrumpft.
2. Device Pixel Ratio (DPR). Ein "Retina"- oder HiDPI-Display rendert mehrere physikalische Pixel pro CSS-Pixel. iPhone-Bildschirme laufen häufig mit DPR 3, was bedeutet, dass der Browser pro angegebenem CSS-Pixel 3 tatsächliche Pixel zeichnet. Das hält Text scharf, ohne dass du etwas Besonderes tust; CSS spricht weiterhin in CSS-Pixeln, und die GPU übernimmt das Hochskalieren.
3. Browser-Zoom. Vom Nutzer initiierter Zoom multipliziert CSS-Pixel relativ zu physikalischen Pixeln. 150 % Zoom verwandeln eine 100-px-Linie in 150 CSS-Pixel Arbeit für die Layout-Engine.

Die Quintessenz: für Webdesign 96 DPI verwenden. CSS-Pixel sprechen bereits die richtige Sprache. Wenn du ein physikalisches Mockup erstellst, das in exakter Größe gedruckt werden soll, schalte den Umrechner auf 300 DPI und rechne neu.

Print-Realität: 300 DPI und Resampling

Druck erwartet, dass jedes Pixel der Quelldaten physikalisch in der Auflösung des Geräts gepackt wird. Ein Magazin, das mit 300 DPI läuft, will pro gedrucktem Zoll rund 300 Pixel an Detail sehen. Schickst du weniger, muss die Druckmaschine interpolieren — deine Kanten werden weich, feine Linien zacken aus.

Designer rechnen in zwei Phasen um:

1. Layout in realen Einheiten. Ein Magazin-Doppelseite ist "210 mm × 297 mm" (A4 hoch), nicht "2480 × 3508 Pixel". InDesign, Affinity Publisher und Photoshops Druckmodus erlauben dir alle, Arbeitsflächen in Millimetern oder Zoll einzurichten.
2. Export bei der Ziel-DPI. Wenn das Layout für die Druckerei zu PDF oder TIFF exportiert wird, tastet die Software Rasterbilder auf die Ziel-DPI neu ab. Ein Foto, das bei 100 % Maßstab auf einer 300-DPI-Seite platziert ist, sollte pixelmäßig bereits bei 300 DPI liegen. Liegt es pixelmäßig nur bei 150 DPI, wird es beim Export verdoppelt — und genau dann schleicht sich Unschärfe ein.

Der Pixel-Umrechner ist am nützlichsten in Phase 1 — beim Ausrechnen, wie viele Pixel du beschaffen musst. Wenn ein Logo auf einer 300-DPI-Broschüre exakt 50 mm breit drucken soll, brauchst du 591 px an Quelldetail. Beschaffst du nur 300 px, siehst du im Druck Unschärfe.

Fotografie: vom Sensor zum Druck

Eine 24-Megapixel-Kamera produziert ein Bild mit etwa 6000 × 4000 Pixeln. Fotografen rechnen ständig zwischen Pixeln und physikalischen Druckgrößen um:

At 300 DPI: 6000 / 300 = 20 inches wide → 50.8 cm
At 240 DPI: 6000 / 240 = 25 inches wide → 63.5 cm
At 180 DPI: 6000 / 180 ≈ 33 inches wide → 84.7 cm

300 DPI ist der Goldstandard für Drucke, die auf Armlänge betrachtet werden (Bücher, Galerieabzüge). 240 DPI ist akzeptabel, wenn der Betrachtungsabstand wächst — große Wandkunst, vor der man zurücktritt. 180 DPI ist die Untergrenze, ab der die meisten Menschen Unschärfe wahrzunehmen beginnen.

Die 300- und 600-DPI-Voreinstellungen des Pixel-Umrechners decken den Foto-Workflow sauber ab: Pixelzahl deines Sensors eingeben, Druckmaße in Zoll und Zentimetern sehen, entscheiden, ob du in nativer Auflösung druckst oder hochrechnest.

Retina, HiDPI und die Device Pixel Ratio

Das iPhone 4 führte 2010 das "Retina"-Branding ein — ein Display, dicht genug, dass einzelne Pixel bei typischen Betrachtungsabständen unterhalb der Auflösung des menschlichen Sehens liegen. Heute sind die meisten Laptop-, Tablet- und Telefonbildschirme HiDPI, mit zwei oder drei physikalischen Pixeln pro CSS-Pixel.

Für den Umrechner ändert das nichts. CSS-Pixel sind nach Web-Konvention weiterhin 96 DPI. Die HiDPI-Mathematik übernimmt der Browser. Wenn du Icon-Design oder Asset-Export speziell auf devicePixelRatio ausrichtest (z. B. @2x- und @3x-Versionen desselben Assets exportierst), dann verdoppelst oder verdreifachst du natürlich die Pixelzahl deiner Quelle — aber die Umrechnung in physikalische Millimeter verwendet für die CSS-Referenz weiterhin 96 DPI.

Wenn du ein visuelles Mockup in 1:1-Physikalgröße auf einem HiDPI-Bildschirm erstellst, hast du zwei Optionen:

• In CSS-Pixeln bei 96 DPI weiterarbeiten (empfohlen — das OS regelt die Skalierung)
• Mit window.devicePixelRatio für die tatsächliche physikalische Pixelzahl multiplizieren und dann durch die echte PPI des Geräts teilen (die je nach Hardware variiert), um die physikalische Größe zu erhalten

Der Umrechner macht die einfachere Variante. Für eine genaue physikalische Größenmessung auf einem bestimmten Bildschirm kalibriere zuerst mit dem Screen Ruler-Tool.

Häufige Fallstricke

72 und 96 vermischen. Alte Mac-Assets, exportiert aus Illustrator oder Photoshop, tragen manchmal ein 72-DPI-Metadatentag. Importierst du sie in ein 300-DPI-Drucklayout, skaliert die Software sie unerwartet hoch. Prüfe immer die "tatsächlichen" Pixelmaße der importierten Datei, nicht ihr DPI-Tag.

"DPI" bei Web-Exports. Photoshops "Für Web speichern" setzt DPI standardmäßig auf 72 — und es ist egal, denn Browser ignorieren das Tag und nehmen 96 an. Mach dir keine Gedanken. Für das Web zählt die Pixelzahl.

Druck unter die native Auflösung schrumpfen. Unter 200 DPI für Druck auf Leseabstand wird Unschärfe offensichtlich. Der Pixel-Umrechner hält dich nicht auf, aber die Mathematik sagt dir die Wahrheit: ein Asset von 600 px bei 50 mm Breite ergibt 305 DPI; dasselbe Asset bei 100 mm Breite nur 152 DPI.

CSS-Skalierung auf 4K-Monitoren vergessen. Ein 1080p-Design, das auf einem 4K-Monitor bei 200 % Skalierung getestet wird, sieht gut aus. Stelle die Skalierung auf 100 %, und dasselbe Design wirkt halb so groß. Teste immer mit der typischen Nutzerskalierung, nicht in nativer Auflösung.

Seitenverhältnis-Drift beim Resampling. Skalierst du ein 1920 × 1080-Bild in ein 1024 × 1024-Quadrat, wirst du entweder zuschneiden oder verzerren. Die Pixelzahl ändert sich; das Seitenverhältnis zählt ebenfalls. Kombiniere den Pixel-Umrechner mit dem Aspect Ratio Calculator, wenn beide Faktoren ins Spiel kommen.

Wann welche DPI?

Eine schnelle Referenz für die DPI-Wahl:

• Webdesign, App-UI, reine Browser-Assets: 96 DPI. Immer.
• Dokumentvorlagen, die in den Druck gehen können: 96 fürs Layout, aber den Druckausgang vor dem Export bei 300 DPI modellieren.
• Druck-Proofs, Großformat-Banner, aus der Distanz betrachtete Poster: 150 DPI reichen.
• Magazine, Bücher, Verpackungen, aus der Nähe gelesene Marketing-Materialien: 300 DPI als Untergrenze.
• Fotodrucke, feine Strichzeichnungen, textlastige Layouts unter Vergrößerung: 300–600 DPI.
• Alte Mac-Legacy-Assets: 72 DPI existiert aus Kompatibilitätsgründen. Nicht für neue Arbeiten verwenden.

Im Zweifel: standardmäßig 96 für Bildschirm, 300 für Druck. Der Pixel-Umrechner hat beide als Ein-Klick-Voreinstellungen.

Alles zusammensetzen

Ein typischer Tag im Leben eines Marken-Designers könnte so aussehen. Der Product Manager fragt nach "einem Hero-Banner, 1920 × 720 px, der bei 300 DPI für ein Veranstaltungsplakat scharf druckt". Du öffnest den Umrechner, gibst 1920 ins Pixelfeld ein, schaltest auf 300 DPI: das sind 162,56 mm Breite. Die Plakatspezifikation ist 297 mm × 420 mm (A3). Bei 162,56 mm füllt das Asset nur die obere Hälfte — also brauchst du eine 3508 × 1316-px-Quelle für volle 297 mm Breite bei 300 DPI. Jetzt weißt du, was du beim Fotografen anfragen musst.

Ein Webentwickler, der ein Print-Mockup adaptiert, geht den umgekehrten Weg. Das Mockup ist 100 mm hoch bei 300 DPI — das sind 1181 px in der Quelle, aber die Website zeigt auf dem Bildschirm bei 96 DPI an. Platziert er das Asset mit 1181 px Höhe in CSS, wird es auf dem Bildschirm rund 308 mm hoch — viel zu groß. Er muss entweder auf 378 px herunterrechnen (= 100 mm × 96 / 25,4) oder die CSS-Maße explizit in mm-Einheiten angeben.

Die Umrechnungen sind nach ein paar Runden einfach genug zum Auswendiglernen. Aber wenn du Assets im Tempo zwischen Medien verschiebst, ist ein dediziertes Werkzeug, das die Mathematik erledigt, sich die DPI-Voreinstellungen merkt und dich das Ergebnis kopieren lässt, der Unterschied zwischen einem flüssigen Workflow und ständiger Rechnerei. Genau dafür ist der Pixel-Umrechner da.

Verwandt

• Aspect Ratio Calculator — wenn du Pixelmaße umrechnest, zählt auch das Seitenverhältnis
• Screen Ruler — um physische Objekte gegen deinen Bildschirm in kalibrierter 1:1-Größe zu messen
• Device Specs Database — um die tatsächliche PPI eines beliebigen Telefons, Tablets oder Laptops nachzuschlagen