Ist es für das Webdesign zwingend erforderlich, Bilder mit 72 dpi zu halten?

PPI-Einstellungen (Pixels Per Inch) werden in Webbildern nicht verwendet. Bilder im Internet, Retina-Displays oder andere, werden anhand ihrer Pixelabmessungen (Breite und Höhe) angezeigt, nicht anhand einer PPI/DPI-Einstellung. Tatsächlich speichern viele Webbilder wie PNG, GIF, JPG möglicherweise nicht einmal eine ppi-Einstellung in ihren internen Daten und verlassen sich auf Breiten- und Höheneinstellungen.

Ein 100 Pixel x 100 Pixel großes Bild wird unabhängig von der PPI/DPI-Einstellung im Web angezeigt.

Aus diesem Grund werden Bilder für Retina-Displays in doppelter Größe und nicht mit einer erhöhten ppi-Einstellung gespeichert. Die Pixeldichte von Retina-Displays ist höher, sie zeigen jedoch immer noch Bilder an, unabhängig davon, wie der Bildschirm die Breite und Höhe eines Bildes anzeigt, das nicht auf einer PPI-Einstellung basiert.

Tatsächlich wurde seit Anfang bis Mitte der 1980er Jahre kein Monitor mit einer Pixeldichte von 72 ppi mehr gesehen. 72 ppi sind seit über 40 Jahren nicht mehr genau. Tatsächlich war es für Windows-Systeme nie genau, da Windows eine Standardeinstellung von 96 ppi für die Pixeldichte verwendet.

Glauben Sie mir nicht? Probieren Sie es selbst aus. Erstellen Sie zwei Bilder in Photoshop, beide 100 x 100 Pixel groß. Machen Sie ein Bild mit 72 ppi und das andere mit 300 ppi. Speichern Sie beide für das Web. Unterscheiden sie sich in einem Webbrowser? Nö. Sie sind beide 100 x 100 Pixel große Bilder.

DPI-Einstellungen (Dots Per Inch) gelten nur beim Drucken eines Bildes. DPI hat keinen Einfluss auf Bilder, die für den Bildschirm bestimmt sind. DPI bezieht sich auf die Menge an Tintenpunkten/Punkten, die die Druckmaschine innerhalb eines Zolls platziert. Da kein Bildschirm auf der Erde Tinte verwendet, ist DPI ein falscher Begriff für alles, was mit Bildschirmen zu tun hat.

Beachten Sie, dass einige Hersteller mobiler Geräte den Begriff DPIx oder xDPI verwenden, der manchmal einfach zu DPI abgekürzt wird. Dies ist nicht die traditionelle Form des Akronyms und der Hersteller hat einfach viel getrübt. Wenn Sie DPI in Bezug auf mobile Bildschirmauflösungen sehen, sprechen sie über effektive PPI und beziehen sich nicht wirklich auf Dots Per Inch. Ein passenderes Akronym wäre xPPI oder PPIx gewesen, da mobile Bildschirme, wie alle Displays, Pixel und keine Tinte verwenden.

Es spielt keine Rolle, welche ppi-Einstellung Sie für Webbilder verwenden. Es sind die (Pixel-)Breite und (Pixel-)Höhe eines Bildes, die wichtig sind.

Bei der Arbeit mit mehreren Bildern ist es wichtig, konsistent zu bleiben . Sie möchten, dass alle Ihre Bilder auf denselben ppi eingestellt werden, um eine Größenänderung und Skalierung von Aspekten zu vermeiden, wenn Sie Teile zwischen Bildern verschieben. Ob Sie sich für 72, 96, 200 oder 145,8 ppi entscheiden, spielt keine Rolle, aber alle Bilder sollten gleich eingestellt sein.

Während PPI definitiv keine Rolle spielt – es sind Pixelabmessungen, die für Web- und App-Design wichtig sind, sollten Sie sehr vorsichtig sein, wenn Sie Designanwendungen verwenden und PPI-Einstellungen mischen. Hier ist der Grund:

Wenn Sie jedoch vorhaben, Photoshop und unterschiedliche Pixeldichten für jedes Dokument zu verwenden, skaliert das Ziehen von Ebenen und das Kopieren von Ebenenstilen zwischen Dokumenten die Ebenenstile – das Ziehen einer Ebene von einem 326PPI-Retina-iPhone-Dokument zu einem 264PPI-Retina-iPad-Dokument bedeutet, dass alle Ebenenstile skaliert werden um 20 % (dann auf die nächste ganze Zahl gerundet). Und das ist wahrscheinlich nicht das, was Sie wollen. Außerdem zeigt die Vorschau von OS X 72PPI-Bilder in der exakten Größe an, unabhängig davon, wie Sie sie eingerichtet haben.

Pixel pro Zoll ist nur ein Tag

Aus diesen Gründen weise ich allen meinen Designdokumenten 72 PPI zu, und ich empfehle Ihnen, dasselbe zu tun. Um die Pixeldichte Ihres Photoshop-Dokuments zu ändern, ohne die Größe der Bilddaten zu ändern, öffnen Sie das Dialogfeld „Bildgröße“, deaktivieren Sie „Bildgröße ändern“ und geben Sie die gewünschte Pixeldichte ein.

Ich werde anhand von Beispielen im Detail darauf eingehen, was "dpi" tatsächlich bedeutet; Damit können Sie die Antwort möglicherweise selbst sehen. :

Kurz gesagt, Ihr Bild besteht aus Farbpunkten, die nebeneinander liegen. Aber sie haben keine Größe im physikalischen Sinne.

Wenn Sie nun ein Bild auf einem Bildschirm zeigen, setzen Sie normalerweise einfach die Punktfarben des Bildes in das Raster farbiger Rechtecke, die Ihr Bildschirm anzeigen kann. Beachten Sie, dass sowohl das, was ich hier "Punkte" als auch Rechtecke nenne, "Pixel" genannt werden - aber genau betrachtet sind sie etwas anderes.

Wenn wir ein Bild auf diese natürliche Weise auf einem Bildschirm anzeigen, können wir seine Größe messen.
Zum Beispiel ist unser Bild 500 Punkte breit, wir platzieren diese in farbigen Rechtecken auf dem Bildschirm und sehen, dass es 5 Zoll breit ist. Dann haben wir 100 Rechtecke pro Zoll, die 100 unserer Punkte pro Zoll zeigen.
Das heißt, unser Bild hat 100 dpi auf dem Bildschirm.
Aber wir haben nicht einmal auf den dpi-Wert in unserer Bilddatei geschaut!

Wenn wir uns jetzt unsere Datei ansehen, kann es gut sein, dass das Bild 200 dpi hat! Der dpi-Wert gibt an, wie viele Farbpunkte pro Zoll Bildschirmbreite oder -höhe sichtbar sind. Der dpi-Wert im Bild sagt uns also, dass unser Bild bei der Anzeige 2,5 Zoll breit sein wird – als Versprechen, nicht als Tatsache .

Als wir die Bildpunkte dem Bildschirm zugewiesen haben, war uns das egal, weil wir es nur angezeigt und die tatsächlichen, physikalischen dpi der Bildschirmdarstellung des Bildes gemessen haben.
Also, wie Sie sehen, war das Versprechen einfach falsch . Und niemanden interessiert es! Weil es einfach nicht relevant ist.

Die Datei war vielversprechend - mit 200 dpi - sie wird "2,5 Zoll breit, wenn sie angezeigt wird". Dann haben wir einen Bildschirm verwendet, der ihn mit einer Breite von 5 Zoll anzeigte – wir können das wissen, weil wir wissen, was der tatsächliche Bildschirm ist.
Normalerweise wissen wir nicht einmal, was der Endbenutzer als Display verwenden wird, also können wir sowieso nur raten,

So, jetzt ergibt es Sinn:

• Wir wussten nicht, welche dpi die Bilder haben werden, die auf einem Bildschirm angezeigt werden, weil wir den Bildschirm nicht kannten.
• Aber wir hatten eine Vorstellung davon, wie es aussehen sollte, "ungefähr diese Größe ... ok, dann brauchen wir ungefähr 200 dpi oder so." und die "200dpi" in der Datei gespeichert
• Später haben wir uns den Bildschirm angesehen und gemessen, dass es tatsächlich 100 dpi sind;

Und es gibt nicht nur einen Bildschirm, auf dem das Bild angezeigt werden könnte – sie könnten unterschiedlich groß sein, sodass es nicht einmal möglich ist, einen echten dpi-Wert zu kennen, wenn eine Bilddatei erstellt wird.

Siehe auch meine Antwort auf Was genau ist ein "Pixel"? .

Direkt zur Frage, basierend auf dem oben Gesagten:

Wenn Sie dpi in einer Bilddatei angeben, hängt dies nicht direkt mit der Qualität der Bildanzeige am Ende zusammen.
Aber es kann verwendet werden, um über die Bildqualität zu kommunizieren - in Bezug auf Absichten: Sie können sagen "Ich möchte, dass dieses Bild auf einem 200-dpi-Bildschirm angezeigt wird".

Wenn ich dieses Bild zeigen möchte, kann ich aufpassen und nach einem 200-dpi-Bildschirm suchen; oder vielleicht verwende ich einfach einen alten 75-dpi-Bildschirm, der möglicherweise auf meinem Schreibtisch steht. Das Bild wird ziemlich groß, ich muss scrollen - aber das ist mein Problem, und: Sie werden nicht einmal herausfinden, was wirklich verwendet wird - der Wert von 200 dpi hat die Bildqualität nicht gesteuert - es wurde nur mitgeteilt, wie es "richtig" angezeigt wird Weg" wenn es mich interessiert.

Ich habe gerade zwei Kopien eines Bildes getestet, das ich mit Photoshop erstellt habe. Ich habe jedoch einen auf 72 dpi und den anderen auf 720 dpi eingestellt, um zu sehen, ob einer der von mir verwendeten Browser sie in unterschiedlichen Größen auf dem Bildschirm darstellen würde.

Auf allen Browsern bis auf einen sahen sie identisch aus – in Bezug auf Größe und Qualität. Mit der Verwendung von Google Chrome sah das mit 72 hergestellte jedoch gut aus, aber das mit 720 hergestellte war extrem klein - als wäre es 1/10 der Größe.

Gute Trauer. Das scheint ein Argument dafür zu sein, alle freistehenden (nicht auf eine Webseite beschränkten) Bilder auf 72 zu setzen. Praktisch alle meine (welche Zahl unter den vielen Hunderten) haben 120 dpi. Auch wenn sie in Chrome immer noch groß genug aussehen, sollte ich vielleicht mit diesem Browser daran arbeiten, sie alle auf 72 zu setzen. Vielleicht gibt es irgendwo im Kleingedruckten in den Einstellungen von Chrome eine Abhilfe.