Ist es für das Webdesign obligatorisch, Bilder mit 72 dpi zu speichern?

Ich entwerfe seit mehr als einem Jahr Web-Banner, habe aber nie über die DPI nachgedacht.

Ich habe die Standardeinstellung 72DPI verwendet, aber jetzt möchte ich wissen, ob es erforderlich ist, Webdesigns in 72DPI zu erstellen. Was ist, wenn wir mehr als das verwenden, zum Beispiel 200DPI?

Ich weiß, dass mehr DPI mehr Bildqualität bedeutet und deshalb möchte ich hohe DPI verwenden, aber kürzlich habe ich irgendwo gelesen, dass wir für Web-Banner 72DPI verwenden sollten. Ich möchte nur wissen, ob es obligatorisch ist und ob es sich in irgendeiner Hinsicht negativ auswirkt.

PPI-Einstellungen (Pixels Per Inch) werden in Webbildern nicht verwendet. Bilder im Web, auf Retina-Displays oder auf andere Weise werden anhand ihrer Pixelgröße (Breite und Höhe) ohne PPI / DPI-Einstellung angezeigt. Tatsächlich speichern viele Webbilder wie png, gif, jpg möglicherweise nicht einmal eine ppi-Einstellung in ihren internen Daten und verlassen sich auf die Einstellungen für Breite und Höhe.

Ein Bild mit 100 x 100 Pixeln 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 in einer erhöhten ppi-Einstellung gespeichert. Die Pixeldichte von Retina-Displays ist höher, sie zeigen jedoch immer noch Bilder an, unabhängig von den Bildschirmzuständen, dh der Breite und Höhe eines Bildes, die nicht auf einer PPI-Einstellung basieren.

In der Realität wurde ein Monitor mit einer Pixeldichte von 72ppi seit Anfang bis Mitte der 1980er Jahre nicht mehr gesehen. 72ppi war fast 30 Jahre lang nicht genau. Tatsächlich war es für Windows-Systeme nie genau, da Windows einen Standardwert von 96ppi für die Pixeldichte verwendet.

Glaubst du mir nicht? Probieren Sie es aus. Erstellen Sie in Photoshop zwei Bilder, die jeweils 100 x 100 Pixel groß sind. Machen Sie ein Bild 72ppi und das andere 300ppi. Beide für das Web speichern. Unterscheiden sie sich in einem Webbrowser? Nee. Sie sind beide Standbilder mit einer Auflösung von 100 x 100 Pixel.

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

Beachten Sie, dass einige Hersteller von Mobiltelefonen den Begriff DPIx oder xDPI verwenden, der manchmal einfach als DPI abgekürzt wird. Dies ist nicht die traditionelle Form des Akronyms, und der Hersteller hat das Wasser einfach stark getrübt. Wenn Sie DPI in Bezug auf Bildschirmauflösungen für Mobilgeräte sehen, handelt es sich um effektive PPI-Werte, die sich nicht wirklich auf Dots Per Inch beziehen. Ein geeigneteres Akronym wäre xPPI oder PPIx gewesen, da mobile Bildschirme wie alle Bildschirme Pixel und keine Tinte verwenden.

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

Bei der Arbeit mit mehreren Bildern ist es wichtig, konsistent zu bleiben. Sie möchten, dass alle Ihre Bilder auf den gleichen ppi eingestellt sind, um die Größenänderung und Skalierung von Aspekten zu vermeiden, wenn Sie Teile zwischen Bildern verschieben. Es spielt keine Rolle, ob Sie 72, 96, 200 oder 145,8 ppi verwenden, aber alle Bilder sollten gleich eingestellt sein.

Ich werde anhand von Beispielen ins Detail gehen, was "dpi" eigentlich bedeutet. Damit können Sie die Antwort einfach selbst sehen. :

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

Wenn Sie jetzt ein Bild auf einem Bildschirm anzeigen, fügen Sie normalerweise nur die Punktfarben des Bildes in das Raster der farbigen Rechtecke ein, die auf Ihrem Bildschirm angezeigt werden können. Beachten Sie, dass beide, die ich hier als "Punkte" und Rechtecke bezeichne, als "Pixel" bezeichnet werden - bei genauer Betrachtung sind sie jedoch 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 setzen diese in farbige Rechtecke auf dem Bildschirm und sehen, dass es 5 Zoll breit ist. Dann haben wir 100 Rechtecke pro Zoll, die 100 unserer Punkte pro Zoll anzeigen.
Das heißt, unser Bild hat 100 dpi auf dem Bildschirm.
Wir haben uns aber noch nicht einmal den dpi-Wert in unserer Bilddatei angesehen!

Wenn wir uns nun unsere Datei ansehen, kann dies durchaus bedeuten, dass das Bild 200 dpi groß ist! Der dpi-Wert gibt an, wie viele Farbpunkte pro Zoll Bildschirmbreite oder -höhe sichtbar sind. So wird der dpi - Wert im Bild sagt uns , dass unser Bild seiner 2,5 Zoll breit , wenn sie angezeigt - als ein Versprechen, nicht als Tatsache .

Als wir die Bildpunkte dem Bildschirm zugewiesen haben, hat uns das überhaupt nichts ausgemacht, da wir sie nur angezeigt und die tatsächliche physikalische Auflösung der Bildschirmdarstellung des Bildes gemessen haben .
Wie Sie sehen, war das Versprechen einfach falsch . Und niemand kümmert sich darum! Weil es einfach nicht relevant ist.

Die Datei war vielversprechend - mit 200 dpi - es wird "2,5 Zoll breit, wenn gezeigt". Dann haben wir einen Bildschirm verwendet, der 5 Zoll breit war - wir können das wissen, weil wir wissen, was der tatsächliche Bildschirm ist.
Normalerweise wissen wir nicht einmal, was der Endbenutzer als Anzeige verwenden wird, daher können wir nur raten,

So, jetzt macht es Sinn:

• Wir wussten nicht, welche Auflösung die auf einem Bildschirm angezeigten Bilder haben werden, da wir den Bildschirm nicht kannten.
• Aber wir hatten eine Idee, wie es aussehen sollte: "Ungefähr diese Größe ... ok, dann brauchen wir ungefähr 200 dpi oder so." und speicherte die "200dpi" in der Datei
• Später haben wir auf den Bildschirm geschaut und festgestellt, dass es tatsächlich 100 dpi sind.

Und es gibt nicht nur einen Bildschirm, auf dem das Bild angezeigt werden kann - sie können unterschiedlich groß sein, sodass beim Erstellen einer Bilddatei nicht einmal ein realer dpi-Wert ermittelt werden kann.

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 von der Qualität der Bildshow ab.
Es kann jedoch verwendet werden, um über die Bildqualität zu kommunizieren - in Bezug auf die 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 darauf achten, einen 200-dpi-Bildschirm zu finden. oder vielleicht verwende ich einfach einen alten 75-dpi-Bildschirm, der sich auf meinem Schreibtisch befindet. Das Bild wird ziemlich groß sein, ich muss scrollen - aber das ist mein Problem, und: Sie werden nicht einmal herausfinden, was wirklich verwendet wird - der 200-dpi-Wert hat die Bildqualität nicht kontrolliert - es wurde nur mitgeteilt, wie es "richtig" angezeigt wird Weise ", wenn es mich interessiert.

Während PPI definitiv keine Rolle spielt - es sind die Pixelmaße, die für das Web- und App-Design wichtig sind, sollten Sie beim Verwenden von Designanwendungen und beim Mischen von PPI-Einstellungen sehr vorsichtig sein. Hier ist der Grund:

Wenn Sie jedoch Photoshop und unterschiedliche Pixeldichten für jedes Dokument verwenden möchten, werden beim Ziehen von Ebenen und beim Kopieren von Ebenenstilen zwischen Dokumenten die Ebenenstile skaliert. Wenn Sie eine Ebene von einem 326PPI Retina iPhone-Dokument auf ein 264PPI Retina iPad-Dokument ziehen, werden alle Ebenenstile skaliert um 20% (dann auf die nächste ganze Zahl gerundet). Und das ist wahrscheinlich nicht das, was du willst. 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 72PPI 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 habe gerade zwei Kopien eines mit Photoshop erstellten Bildes getestet. Ich stelle jedoch eine auf 72 dpi und die andere auf 720 dpi ein, um zu überprüfen, ob einer der von mir verwendeten Browser sie auf dem Bildschirm in verschiedenen Größen wiedergibt.

Mit Ausnahme eines Browsers sahen alle Browser in Bezug auf Größe und Qualität identisch aus. Mit der Verwendung von Google Chrome sah die mit 72 jedoch gut aus, aber die mit 720 war extrem winzig - wie es 1/10 der Größe war.

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