Fotos im Web

Zuerst einmal:

PPI (Pixels per Inch) beschreibt die Auflösung in Pixel in einem digitalen Bild.
PPI, oder pixels per inch, bezieht sich sowohl auf die feste Anzahl der Pixel, die ein Bildschirm darstellen kann, als auch auf die Dichte der Pixel innerhalb eines digitalen Bildes. Die Pixelzahl hingegen bezieht sich auf die Anzahl der Pixel entlang der Länge und Breite eines digitalen Bildes – also die Bildgröße in Pixel.

Verschiedene Displays haben je nach Pixelanzahl und Größe unterschiedliche PPI-Werte.

5,5 Zoll bei 1920 x 1080 Pixel = 401 PPI (z.B. iPhone 7 Plus)

24 Zoll bei 1920 x 1080 Pixel = 92 PPI (z. B. gängiger Desktop-Monitor)

Da die Pixel des Smartphones  sind kleiner als die des Monitors, deshalb passen mehr Pixel in den einen Inch. Die Pixeldichte eines Displays ist hardwareseitig festgelegt. Der PPI-Wert eines Bildes hat keinerlei Einfluss auf die Screendarstellung.

Der PPI-Wert gibt die Pixeldichte an, während DPI die Druckpunktdichte einer Druckmaschine (z.B. Tintenstrahl- oder Laserdrucker) angibt.

DPI (Dots per Inch) beschreibt also die Anzahl der Druckpunkte in einem gedruckten Bild. Diese Druckerauflösung wird in Farbpunkten pro Zoll (dpi, Dots per Inch) angegeben. Je mehr Punkte pro Zoll, desto feiner ist im Allgemeinen die Druckausgabe.

DPI (Dots per Inch) spielen keine Rolle im Web / in der Monitorausgabe !

Aber warum gibt es die weitläufige Meinung ist das Bilder für das Web eine Auflösung von 72 dpi haben sollten?

Der 72-dpi-Mythos kommt von einer falschen Bezeichnung für Pixeldichte und von alten Monitoren die damals alle cira 72 ppi hatten.
KURZ: Der originale Macintosh hatte anno 1984 mit seinem 9 Inch Display und 512 x 324 Bildpunkten tatsächlich eine Auflösung von ungefähr 72 ppi(Pixels per Inch).

Seither sind einige Jahre ins Land gezogen und in Sachen Bildschirmtechnologie hat sich ja bekanntlich viel getan. Die meisten Computer Bildschirme haben heute mehr als 100 ppi: ein iMac mit 27 Zoll Bildschirmdiagonale kommt auf 109 ppi, ein 13 Zoll MacBook Air auf 128 ppi usw.....
Programme, die für die Bildschirmausgabe optimiert sind, also Browser, ignorieren alle DPI-Angaben und bilden ein Bild-Pixel immer auf ein Bildschirm-Pixel ab.

Wird ein Bild in 100% Grösse dargestellt, dann wird ein Bild-Pixel von einem physischen Pixel am Bildschirm repräsentiert. Das selbe Bild wird somit auf dem Bildschirm eines MacBook Air (128 ppi) kleiner (in cm) als auf einem iMac (109 ppi) dargestellt. Und dies aus dem einfachen Grund, dass der einzelne Pixel physisch kleiner ist.

Ein Bild mit z. B. 1024 x 683 Pixel wird auf dem Bildschirm genau gleich gross dargestellt, wenn die dpi-Einstellung beim Export des Fotos 72 oder 300 dpi ist.

Die dpi-Auflösung hat im Web keinen Effekt und wird daher ignoriert.

Noch etwas:

Jeder einzelne Pixel repräsentiert eine Farbinformation, die sich aus einem roten, einem grünenund einem blauen Bestandteil zusammensetzt.  Ein Pixel hat keine feste Größe , es dient lediglich als Informationsträger.

Und was ist mit Retina Screens?

Smartphones, Tablets  aber auchauch Laptops haben noch höhere Auflösungen:   Zum Beispiel kommt das iPhone 5  auf 326 ppi, ein MacBook Pro 13" mit Retina Display kommt auf 227 ppi.

Die Retina Displays von Apple haben doppelt so viele Pixel pro Seite als ihre Vorgängermodelle. Dennoch wird das User-Interface nicht halb so klein angezeigt. Dafür schärfer. Was früher mit einem Pixel dargestellt wurde, wird heute auf einigen Geräten  mit vier Pixeln dargestellt. Darum unterscheidet man bei diesen neuen Geräten den Device Pixel (den effektiven physischen Pixel) und den CSS Pixel.

Muss man nun auf einer Website alle Bilder und Grafiken in zwei Grössen hinterlegen?

Nein, nicht unbedingt. Auf einem Computer mit Retina-Display werden «normale» Bilder von der Grafikkarte auf die doppelte Grösse hoch gerechnet. Bei Fotos klappt dies relativ gut. Bei Grafiken (Logos / UI-Elementen) ist aber meistens eine leicht schwammige Darstellung zu sehen. Liegt das Bild oder die Grafik in der doppelten Grösse vor, wird es entsprechend schärfer dargestellt.

Noch ein, zwei Details dazu:

Die sog. CSS-Pixel bestimmen die Größe eines Elements in Pixeln, mit der das Element laut CSS-Code angezeigt werden soll. CSS-Pixel werden von Geräten mit hochauflösenden Displays automatisch umgerechnet.
Die sog. Device-Pixel (Gerätepixel) beschrieben die Anzahl an physikalischen Pixeln, die das Display eines bestimmten Gerätes nutzt um eine Grafik darzustellen. Hochauflösende Displays benutzen dazu mehrere physikalische Pixel, normale Displays nur einen. Das Verhältnis wird in DPR angegeben.
DPR steht für Device-Pixel-Ratio und beschreibt das Verhältnis von CSS Pixeln zu Device Pixeln. Es ist möglich mit Hilfe von Media Queries das Verhältnis abzufragen.

....und für den Druck?

Grundsätzlich hat sich  für die meisten Standard-Druckprodukte der Richtwert 300 dpi etabliert. Die gängige Regel kommt daher, dass ein Mensch eine Linie mit ca 0,1 mm damit dann gerade noch erkennen kann. Bei sehr feinen Grafiken  mit kleinen Schriften sind  400dpi empfehlenswert.

Bei großformatigen Produkten kann der angegebene Wert aber abweichen, Deshalb gilt: Je größer der Abstand zwischen Motiv und Betrachter, desto geringer kann die Auflösung sein.
Zum Beispiel Plakate und Poster könnte man  mit mindestens 200 dpi drucken.Für große Plots würden auch auch schon 150 dpi ausreichen. Die Details dazu werden aber ohnehin von den Druckereien angegeben.