Bild-DPI erklärt: Spielen 72 oder 300 DPI online eine Rolle?

Kurzantwort: DPI ist nicht der Web-Qualitätsschalter

Für normale Webbilder entscheidet 72 DPI vs. 300 DPI nicht darüber, wie scharf das Bild online wirkt. Der Browser arbeitet vor allem mit:

• den tatsächlichen Pixelmaßen des Bildes, etwa 1200 × 800,
• der CSS-Größe auf der Seite, etwa 600 px Breite,
• den Regeln für responsive Bilder wie srcset und sizes,
• der Pixeldichte des Bildschirms,
• Kompression und Dateiformat der exportierten Datei.

Ein 1200 × 800 JPG mit Tag „72 DPI" und dasselbe 1200 × 800 JPG mit Tag „300 DPI" werden auf einer Webseite in aller Regel identisch dargestellt. Sie enthalten dieselben Pixel. Der DPI-Wert ist im Kern eine Druck-Anweisung.

Spannend wird DPI erst, wenn das Bild eine physische Größe annehmen soll. Ein 2 × 2 Zoll Passfoto bei 300 DPI braucht 600 × 600 Pixel, ein 4 × 6 Zoll Druck bei 300 DPI braucht 1200 × 1800 Pixel. Genau dort wird die DPI-Zahl nützlich: Sie verknüpft Pixel mit Zoll oder Millimetern.

Wenn also jemand „300 DPI" fordert, lautet die beste Rückfrage:

Geht es um Druck oder brauchen Sie eigentlich ein größeres Pixel-Bild fürs Web?

DPI, PPI, Pixel und CSS-Pixel

DPI wird für ziemlich viele Dinge gleichzeitig benutzt – deshalb ist der Rat dazu oft so widersprüchlich.

Für digitale Bilddateien ist PPI der präzisere Begriff. Eine Datei enthält keine Druckpunkte, sie enthält Pixel. Doch die meisten suchen nach DPI, Fotolabore fragen nach DPI und Kunden sagen DPI, wenn sie PPI meinen – daher benutzt dieser Leitfaden beide Begriffe bewusst.

Die praktische Formel ist einfach:

Pixel = Druckzoll × PPI
Druckzoll = Pixel / PPI

Ein 3000 Pixel breites Foto kann 10 Zoll breit gedruckt werden bei 300 PPI, 20 Zoll breit bei 150 PPI oder 41,7 Zoll breit bei 72 PPI. Die Datei wird dadurch weder besser noch schlechter. Sie legen nur fest, wie dicht die vorhandenen Pixel aufs Papier gesetzt werden.

Was der DPI-Wert in einer Bilddatei tatsächlich tut

Viele Bildformate können einen Auflösungs- oder Dichtewert speichern. In der Alltagssoftware taucht er auf als:

• 72 DPI,
• 96 DPI,
• 240 PPI,
• 300 PPI,
• Feld „Auflösung" in Photoshop,
• horizontale und vertikale Density-Metadaten in JPG oder PNG.

Dieser Wert ist Metadaten. Er schlägt vor, wie groß das Bild gedruckt oder in ein Layout eingefügt werden soll, das diese Dichte respektiert. Er fügt keine Details hinzu.

Nehmen Sie ein Foto mit 3000 × 2000 Pixeln:

Gleiche Pixel. Andere vorgeschlagene Druckgröße.

An dieser Stelle geraten die meisten ins Straucheln. Wenn Sie nur das DPI-Feld ändern, haben Sie das Bild nicht fürs Web verkleinert, nicht komprimiert und nicht schärfer gemacht – Sie haben lediglich das Druck-Etikett getauscht.

Was Browser stattdessen benutzen

Für gängige Webseitenarbeit stützen sich Browser auf die Pixeldaten der Datei und die Layout-Anweisungen der Seite.

Sagt HTML oder CSS, dass ein Bild mit 600 CSS-Pixeln Breite angezeigt werden soll, legt der Browser es mit 600 CSS-Pixeln Breite ab. Liefern Sie dafür ein Quellbild mit 1200 Pixel Breite, reicht das für ein 2× HiDPI-Display. Liefern Sie nur 400 Pixel Breite, wirkt das Bild vermutlich weich, weil der Browser es hochskalieren muss.

Deshalb klingt Web-Bildarbeit meist so:

• Hero-Bild: rund um die größte erwartete Anzeigebreite exportieren, oft mit responsiven Varianten.
• Blog-Bild: eine 1200–1600 px breite Version, sofern das Design nicht mehr verlangt.
• Thumbnail: nah an der angezeigten Kartengröße exportieren.
• Retina-Icon: 2× oder 3× Quellpixel für die CSS-Größe bereitstellen.
• Langsame Seite: Pixel verkleinern und komprimieren, nicht das DPI-Tag.

MDNs Beschreibung von naturalWidth hilft an dieser Stelle: Sie gibt die Bildbreite in CSS-Pixeln an, nicht als „was auch immer im DPI-Tag steht". Die MDN-Anleitung zu responsiven Bildern erklärt außerdem, wie srcset und sizes dem Browser helfen, eine passende Quelle je nach Layout und Gerätebedingungen zu wählen.

Es gibt eine technische Feinheit: CSS kennt eine experimentelle Eigenschaft image-resolution, und W3C CSS Images beschreibt Metadaten zur Bildauflösung. MDN markiert image-resolution derzeit als experimentell und weist darauf hin, dass die Browserunterstützung für den produktiven Einsatz noch fehlt. Verlassen Sie sich fürs normale Web-Publishing also nicht darauf, dass das DPI-Metadatum eines JPG oder PNG die sichtbare Größe auf der Seite steuert.

Warum sich 72 DPI als Web-Folklore hielt

Die Regel „72 DPI fürs Web" ist im Wesentlichen eine geerbte Gewohnheit.

Frühe Desktop-Publishing-Workflows hatten eine engere Verbindung zwischen Bildschirmpixeln, Punkt und Zoll. Alte Macintosh-Bildschirmkonventionen werden oft mit 72 Pixel pro Zoll assoziiert; Windows und die CSS-Historie brachten 96 DPI ins Spiel. W3C CSS Values definiert die feste Beziehung 1in = 96px, und die MDN-Doku zu Auflösung erklärt, dass in CSS 1dppx genau 96dpi entspricht.

Das heißt trotzdem nicht, dass Sie Webbilder mit 96 DPI exportieren müssten.

Es heißt nur, dass CSS ein Bezugssystem für Layout-Einheiten hat. Ihr eigentliches Webbild braucht weiterhin genug Pixel für die Größe, in der es erscheint. Ein 5000 px breites Foto ist zu schwer für ein 300 px Thumbnail – egal, ob es 72 DPI oder 300 DPI trägt. Ein 400 px breites Logo wirkt in einem 600 px Slot wahrscheinlich weich, ganz gleich, was im DPI-Feld steht.

Für Webbilder ist die bessere Frage:

Wie viele Pixel wird dieses Bild im Layout einnehmen, und wie viele Quellpixel liefere ich für die Bildschirme, die mir wichtig sind?

Die Resampling-Falle in Photoshop

Photoshop und ähnliche Programme zeigen Breite, Höhe und Auflösung meist in einem einzigen Dialog. Für den Druck ist das praktisch – für Webarbeit wird es zur Falle.

Adobes Doku zur Bildgröße unterscheidet:

• Abmessungen: die Pixelzahl.
• Breite und Höhe: die physische oder Layout-Größe, je nach Einheit.
• Auflösung: Pixel pro Zoll für die Druckqualität.
• Neu berechnen: Pixel hinzufügen oder entfernen.

Der entscheidende Schalter heißt Neu berechnen.

Ist er aus, ändert der Wechsel von 72 PPI auf 300 PPI nur die vorgeschlagene Druckgröße – die Pixel bleiben. Eine 3000 × 2000 Datei bleibt 3000 × 2000. Das ist reine Metadaten-Arbeit.

Ist er an, kann eine Änderung der Auflösung – abhängig von Breite und Höhe – Pixel hinzufügen oder entfernen. Damit ändern sich die Bilddaten. Die Datei wird größer oder kleiner, schärfer oder weicher, und beim starken Hochskalieren treten Interpolationsartefakte auf.

Für den Webeinsatz meiden Sie den vagen Auftrag „mach es 72 DPI". Nennen Sie stattdessen das echte Ziel:

• „Skaliere das auf 1600 px Breite."
• „Exportiere ein 320 px Thumbnail."
• „Komprimiere dieses JPG unter 200 KB."
• „Baue ein 2×-Bild für einen 600 CSS-px Slot, also 1200 px Breite."

Ändert das DPI-Feld die Dateigröße?

Meistens nicht.

Wenn Sie ausschließlich das DPI/PPI-Metadatum bearbeiten, bleibt die Dateigröße gleich oder verändert sich nur um wenige Bytes, weil sich die Metadaten geändert haben. Die Bilddaten sind weiterhin dasselbe Pixelraster.

Wirklich kleiner wird eine Datei durch:

• Verkleinern der Pixelmaße,
• Zuschneiden,
• Absenken der JPG-/WebP-/AVIF-Qualität,
• Konvertieren in ein anderes Format,
• Entfernen von EXIF- und anderen Metadaten,
• Reduzieren von Transparenz,
• Kürzen von Animationsframes oder -dauer.

Wenn ein Portal höchstens 500 KB akzeptiert, ist der Wechsel von 300 auf 72 DPI die falsche Antwort. Verkleinern Sie das Bild, komprimieren Sie es oder beides.

Wann 300 DPI tatsächlich zählen

300 DPI sind eine praktische Kurzschrift für Drucke, die aus der Nähe betrachtet werden. Sie besagen, dass die Druckdatei 300 Pixel pro Zoll des Endformats mitbringt.

Typische 300-DPI-Fälle:

• Pass- und Visumfotos,
• 4 × 6 und 5 × 7 Zoll Fotolabor-Abzüge,
• kleine Flyer und Broschüren,
• Buch- und Zeitschriftenseiten,
• Produktetiketten, die aus der Nähe gelesen werden,
• Scans mit kleiner Schrift oder feinen Linien.

Die Mathematik:

Für den Druck ist die physische Größe nicht optional. „300 DPI" allein ist unvollständig. Ein 300-DPI-Bild für ein 2 × 2 Zoll Passfoto sind 600 × 600 Pixel. Ein 300-DPI-Bild für eine A4-Seite sind rund 2480 × 3508 Pixel. Das sind völlig unterschiedliche Dateien.

Wann 300 DPI keine Rolle spielen

Auf 300 DPI zu schielen ist meist der falsche Hebel bei:

• Website-Bildern,
• Social-Media-Beiträgen,
• E-Mail-Anhängen,
• Produkt-Thumbnails,
• Blog-Screenshots,
• App-Icons und UI-Grafiken,
• Online-Formularen, die Pixelmaße und Dateigröße prüfen.

Manche Upload-Portale erwähnen DPI in den Vorgaben, weil das Ergebnis am Ende gedruckt wird. Selbst dann prüft das Portal in der Praxis eher Pixelmaße, Seitenverhältnis, Dateigröße, Farbmodus oder Gesichtsposition als den Metadaten-Tag. Steht dort „2 × 2 Zoll bei 300 DPI", rechnen Sie das in Pixel um: 600 × 600.

Für Bildschirme zählen Pixelvorgaben. Für Druck zählen Pixelvorgaben plus physische Größe.

Retina- und HiDPI-Bildschirme sind keine „300 DPI"

Hochauflösende Displays brauchen mehr Quellpixel als ältere Bildschirme, aber das ist nicht dasselbe wie ein Datei-Metadatum auf 300 DPI zu setzen.

Beispiel:

• Das Design zeigt ein Produktfoto in 600 CSS-Pixeln Breite an.
• Ein 1×-Bildschirm kommt mit einer 600 px breiten Quelle aus.
• Ein 2×-Bildschirm profitiert von einer 1200 px breiten Quelle.
• Ein 3×-Bildschirm profitiert bei detailreichen Motiven von einer 1800 px breiten Quelle.

Ob die Datei mit 72, 96 oder 300 DPI getaggt ist, ändert an dieser Layout-Logik nichts. Entscheidend ist das Verhältnis zwischen Quellpixeln und angezeigten CSS-Pixeln.

Deshalb verwenden responsive Bilder Deskriptoren wie 1200w oder 2x und nicht „300dpi". Der Browser sucht schlicht ein Bild mit genügend Pixeldaten für die tatsächlich gerenderte Größe, die Bildschirmdichte und die Netzwerksituation.

So übersetzen Sie typische Anfragen

Wer nach einer DPI-Änderung fragt, meint häufig etwas ganz anderes. Übersetzen Sie den Wunsch, bevor Sie die Datei anfassen.

Diese eine Zusatzfrage verhindert die meisten DPI-Fehler.

Wie PhotoTools DPI-nahe Aufgaben löst

PhotoTools baut konsequent auf das, was die Ausgabe wirklich ändert: Pixel.

Für Webarbeit:

1. Größe anpassen und die echten Pixelmaße setzen.
2. Komprimieren, wenn ein Dateigrößen-Ziel existiert.
3. Das Original unberührt lassen.
4. Eine Web-Kopie mit sprechendem Namen exportieren, etwa hero-1600.jpg oder card-600.webp.

Für Pass- oder ID-Fotodruck:

1. Passfoto-Werkzeug öffnen.
2. Ein Preset wählen, z. B. 2 × 2 Zoll, 35 × 45 mm oder eine eigene Größe.
3. Das Tool rechnet die physische Fotogröße bei gewählter DPI in Pixel um.
4. Es baut einen 4 × 6 oder 6 × 4 Zoll Druckbogen im Browser.
5. Mit 100 % Skala drucken, tatsächliche Größe, „An Seite anpassen" ausgeschaltet.
6. Das gedruckte Foto vor der Abgabe nachmessen.

Die lokale Umsetzung errechnet Pixelmaße aus gewählter Fotogröße, Bogengröße und DPI. Ein 4 × 6 Zoll Bogen bei 300 DPI wird so zu einer 1200 × 1800 Pixel Leinwand, ein 2 × 2 Zoll Fotofeld bei 300 DPI zu 600 × 600 Pixeln.

Das ist ein echtes Drucklayout. Etwas ganz anderes, als ein kleines Webbild zu öffnen, das Metadaten-Feld auf 300 zu stellen und zu hoffen, dass der Druck dadurch scharf wird.

Praktische Checkliste

Nutzen Sie diese Checkliste, bevor Sie wegen einer DPI-Anfrage an eine Datei gehen:

• Ziel ist eine Website? Nach Pixelmaßen und Dateigrößen-Limits fragen.
• Ziel ist ein Druck? Nach physischer Größe und Ziel-DPI/PPI fragen.
• Datei ist zu schwer? Verkleinern oder komprimieren, nicht Metadaten ändern.
• Bild wirkt unscharf? Quellpixel, Kompression und Anzeigegröße prüfen.
• Druck wirkt weich? Nachrechnen, ob die Quelle genug Pixel hat.
• Druck hat die falsche physische Größe? Drucker-Skalierung und Papierformat prüfen.
• Es ist ein Pass- oder Visumfoto? Das fertige Print nachmessen und die amtliche Vorgabe verifizieren.

Die Kurzfassung: DPI verbindet Pixel mit Papier. Pixel und CSS steuern das Web.

Geprüfte technische Quellen

Dieser Leitfaden wurde gegen folgende Referenzen abgeglichen:

• W3C CSS Values and Units Module Level 4 für absolute CSS-Einheiten, Auflösungseinheiten und die Beziehung 1dppx = 96dpi.
• W3C CSS Images Module Level 4 für die CSS-Definition der Bildauflösung und die Eigenschaft image-resolution.
• MDN: image-resolution für aktuelle Implementierungshinweise und den experimentellen Status von CSS-image-resolution.
• MDN: HTMLImageElement naturalWidth für die Bildgrößenbestimmung des Browsers in CSS-Pixeln.
• MDN: img-Element-Referenz für srcset, sizes, Width-Deskriptoren und die Quellwahl des Browsers.
• Adobe Photoshop – Bildgröße und Auflösung für Photoshops Trennung von Abmessungen, Auflösung und Neuberechnung.
• Adobe Photoshop – Größenänderung und Resampling dazu, wie Resampling Pixeldaten verändert und warum Auflösung/physische Größe Druckkonzepte sind.

Kernaussage: Am DPI-Tag zu drehen, ist selten die Lösung. Legen Sie zuerst das Ziel fest und ändern Sie dann die Pixel, die Kompression oder das Drucklayout, die dieses Ziel wirklich braucht.