DPI vs. PPI vs. Pixeldichte: ein Praxis-Ratgeber für Designer

Drei Zahlen, drei Bedeutungen:

• DPI (Dots per Inch) — wie viele Tintenpunkte ein Drucker pro linearem Zoll setzt. Eine Hardware-Eigenschaft des Druckers.
• PPI (Pixels per Inch) — wie viele Bildpixel bei der Zielgröße pro linearem Zoll gedruckt oder angezeigt werden. Eine Eigenschaft davon, wie das Bild gerendert wird.
• Pixeldichte — die Geräte-Pixel pro CSS-Pixel auf einem Bildschirm. Eine Eigenschaft des Bildschirms (Retina, 4K usw.).

Fast jedes Design-Tool beschriftet sein “Auflösungs”-Feld mit DPI, obwohl eigentlich PPI gemeint ist. Der Fehlgebrauch ist so verbreitet, dass die Faustregel lautet: Wenn ein Designer DPI sagt, gehen Sie von PPI aus, sofern nicht buchstäblich von der bewerteten Ausgabe eines physischen Druckers die Rede ist.

Was jede Zahl tatsächlich aussagt

DPI (Drucker oder Scanner)

Moderne Tintenstrahldrucker arbeiten mit 1200–4800 DPI. Laserdrucker mit 600–2400 DPI. Beide Zahlen beschreiben, wie fein die Hardware Tintenpunkte setzen kann, nicht wie viel Bilddetail eine Seite aufnehmen kann. Ein 4800-DPI-Drucker kann kein 4800-PPI-Bild drucken — die typische effektive Bildauflösung (PPI) liegt selbst bei den besten Tintenstrahldruckern bei etwa 300–400, weil die Darstellung eines einzelnen Bildpixels mehrere Tintenpunkte erfordert (Rasterung im Halbtonverfahren).

PPI (die Zahl, wo Bild auf Zielgröße trifft)

PPI beschreibt ein Bild nur, wenn Sie eine physische Zielgröße angeben. Ein Bild von 3000×2000 Pixeln, gedruckt mit 10×6,67 Zoll, hat 300 PPI. Gedruckt mit 5×3,33 Zoll sind es 600 PPI. Gedruckt mit 20×13,33 Zoll sind es 150 PPI. Dieselbe Datei, drei verschiedene PPI-Werte.

Standardregeln, welche PPI Sie benötigen:

• 72–96 PPI — Web-Anzeige. Browser ignorieren die eingebettete PPI; nur die Pixelanzahl zählt.
• 150 PPI — Zeitungsdruck, großformatiges Poster, das aus Distanz betrachtet wird.
• 300 PPI — Buch, Zeitschrift, Fotodruck, der in Armlänge betrachtet wird.
• 600+ PPI — Strichzeichnungen, technische Zeichnungen, feine Typografie.

Pixeldichte (die Retina-Zahl)

Auf modernen Bildschirmen ist “1 Pixel” in CSS nicht ein Bildschirmpixel. iPhones, MacBook Pros und die meisten modernen Android-Smartphones verwenden eindevicePixelRatio von 2 oder 3 — das heißt, ein CSS-Pixel entspricht dem 2- oder 3-Fachen der physischen Pixel. Deshalb erzeugt ein Designer, der in Figma bei 1× arbeitet, Bilder, die auf einem Smartphone unscharf wirken, sofern er sie nicht mit 2- oder 3-facher Auflösung exportiert.

Konkrete Zahlen: Ein iPhone von 2020 hat eine CSS-Pixel-Auflösung von 390×844, aber eine physische Auflösung von 1170×2532 (3× DPR). Designer müssen beide kennen. Die DPI des physischen Bildschirms ist wiederum eine eigene Zahl (~460 PPI bei diesem Smartphone), doch in CSS-Begriffen zählt das Device-Pixel-Ratio.

Praktische Zahlen für gängige Deliverables

Wo die Verwirrung zuschlägt

1. Das “72-DPI”-Export-Problem

Ein Designer baut in Figma/Sketch bei “72 DPI” (was auf dem Bildschirm bedeutungslos ist, aber vom Tool angezeigt wird), exportiert ein PDF und sendet es an eine Druckerei. Die Druckerei erhält eine Datei, die 72 PPI in ihren Metadaten angibt; die gerenderte Ausgabe hat 1/4 der beabsichtigten Dichte, und der Druck wirkt pixelig. Lösung: mit 300 PPI neu exportieren und sicherstellen, dass die Pixelanzahl ausreicht, um diese Dichte zu tragen.

2. Retina-@1×-Exporte

Ein Designer, der in Figma bei 1× arbeitet, exportiert ein Icon mit exakt den CSS-Abmessungen (z. B. 24×24 px). Auf einem 3×-Gerät wird das Icon unscharf gerendert, weil das Hochskalieren des Browsers nicht so scharf ist wie ein nativer 72×72-Export. Lösung: @1× plus @2×- und @3×-Varianten exportieren und dann HTML-srcsetoder image-set in CSS verwenden, um die richtige Datei auszuliefern.

3. Quell-PPI mit Ziel-PPI verwechseln

Ein Fotograf nimmt ein Roh-Bild von 6000×4000 Pixeln auf. Die Kamera bettet 300 PPI in den Metadaten ein. Der Fotograf legt es in ein Web-Layout von 600×400 Pixeln. Das Bild hat 10-mal mehr Pixeldaten, als das Layout benötigt; die Quell-PPI-Metadaten sind irrelevant. Lösung: mit einem echten Downsampling-Algorithmus auf die Ziel-Pixelabmessungen verkleinern (oder das 2-Fache davon für Retina) — unser Tool zum Bildskalieren erledigt das.

Schnellreferenz: wann welche Zahl zählt

• Web-Arbeit: nur Pixelanzahl + DPR zählen. Eingebettete PPI-Metadaten ignorieren.
• Druck-Arbeit: PPI zählt absolut. Passen Sie sie an den Betrachtungsabstand des Drucks an (300 PPI für die Hand, 150 PPI für die Wand, weniger für Distanz).
• Foto-Archiv: Behalten Sie die ursprüngliche Quelle in voller Auflösung. Erzeugen Sie für jede nachgelagerte Nutzung herunterskalierte Varianten.
• UI-Design: bei 1×-CSS-Abmessungen entwerfen, mit 2× und 3× exportieren.

Für den tiefergehenden einseitigen Vergleich siehe unseren DPI-vs.-PPI-Vergleich. Für die Farbumrechnungsseite des Designs behandelt die Farb-Methodik-Seite RGB vs. CMYK und ICC-Profile.

Durchgerechnetes Beispiel: ein Icon für drei Plattformen exportieren

Ein 24×24-CSS-Pixel-Symbolleisten-Icon muss auf einem Desktop-Browser, einem iPhone 15 Pro (3× DPR) und einer Druckerei bei 300 PPI scharf aussehen.

• Desktop @1×: 24 × 24 PNG exportieren. Dateigröße ~1,2 KB.
• Retina @2×: 48 × 48 PNG exportieren, ausgeliefert über image-set oder srcset mit dem 2x-Deskriptor. Dateigröße ~2,8 KB.
• iPhone @3×: 72 × 72 PNG exportieren, ausgeliefert mit 3x. Dateigröße ~4,5 KB.
• Druck bei 300 PPI, gedruckt mit 0,5 Zoll:150 × 150 PNG exportieren (oder besser ein SVG, damit der Rasterer der Druckerei die Auflösung übernimmt).
• Bessere Antwort für alles: Liefern Sie die SVG-Quelle aus. Vektor-Primitive kümmern sich nicht um DPR oder PPI; der Renderer rastert bei Bedarf in der Zielauflösung. Reservieren Sie PNG/JPG ausschließlich für Raster-Inhalte (Fotos, Verlaufsillustrationen).

Häufige Fehler

• Das PPI-Feld in Photoshop ändern, statt neu zu rastern.Photoshops “Bildgröße”-Dialog hat ein “Neu berechnen”-Kontrollkästchen. Die PPI ohne Neuberechnung umzustellen ändert nur die Druckgröße-Metadaten; Pixelanzahl und sichtbare Qualität bleiben unverändert. Mit aktivierter Neuberechnung fügen Sie tatsächlich Pixel hinzu oder entfernen sie.
• Standardmäßig in Figma bei 2× entwerfen.Figma verwendet 1 Einheit = 1 CSS-Pixel. Wenn Sie bei 2×-Abmessungen entwerfen, ist Ihr exportiertes @1× doppelt so groß wie beabsichtigt und Ihr @2× ist 4×. Entwerfen Sie bei 1× und lassen Sie den Export die Multiplikatoren übernehmen.
• Druck und Web in derselben Datei mischen.Ein 300-PPI-Druck-PDF bettet für den Druck dimensionierte Raster ein; ein Web-Export aus derselben Quelle ist für das Web maßlos überdimensioniert. Halten Sie getrennte Web- und Druck-Master, beide aus dem Original abgeleitet.
• Beschnitt und Anschnitt beim Druck vergessen.Eine Visitenkarte mit 3,5" × 2,0" benötigt 3,625" × 2,125" (0,125" Beschnitt). Bei 300 PPI sind das 1087 × 637 Pixel, nicht 1050 × 600.
• “Web” als eine Auflösung behandeln.Moderne Viewports reichen von 320 CSS-px (kleine Smartphones) bis 3840 CSS-px (4K-Monitore), mit DPR von 1 bis 4. Erzeugen Sie pro Asset mindestens drei Rastergrößen und lassen Sie den Browser wählen.

Sonderfälle

• Faltbare Smartphones. Einige Samsung-Galaxy-Fold-Geräte melden DPR 2,625 — ein gebrochenes Verhältnis. Browser rastern über den nächstensrcset-Deskriptor; liefern Sie 1×/2×/3× aus und lassen Sie wählen.
• Browser-Zoom. Ein auf 200 % gezoomter Nutzer verdoppelt faktisch sein DPR. Vektor-Assets bewältigen das problemlos; Raster werden vom Browser hochskaliert. Stellen Sie genug Auflösung bereit, damit das Hochskalieren des Browsers Spielraum hat.
• Druck zu Hause vs. Druck in der Druckerei.Tintenstrahldrucker zu Hause haben nominell 1200–4800 DPI, liefern aber nur ~200 PPI effektives Bilddetail. Kommerzielle Druckereien liefern echte 300 PPI. Passen Sie Ihre Quelle an die Zieldruckerei an, nicht an den Heimdrucker.
• E-Paper-Geräte. Kindle Paperwhite, reMarkable und Ähnliche verwenden Carta-E-Ink mit ~300 PPI, lesen sich aber ganz anders als ein LCD. Bildkontrastkurven zählen hier mehr als PPI; flache Designs gewinnen.

Quellen: Adobes Print Production Reference (2023); W3C HTML Living Standard (Image Source Set); Apple Human Interface Guidelines zum Layout; W3C CSS Values and Units Module Level 4 (Auflösungseinheiten).