DPI, PPI und native Auflösung: All diese Begriff sagen einem irgendwas, erklären können sie die meisten aber nicht. Die Folge: Begriffe werden durcheinander geworfen und falsch verwendet. Das mag unsere Grafikabteilung so gar nicht, deshalb folgt  hier etwas Aufklärungsarbeit.

Eine Info vorab:

Vieles rund um PPI, Auflösungen und die Workflow-Änderungen, welche dadurch für Grafikdesigner entstehen, gibt es bei Sebastien Gabriel. Unsere Erklärung lehnt sich an seinen Ausführungen an und möchte große Ähnlichkeiten nicht abstreiten, denn seine Erläuterungen finden wir gut. Mehr zu den Unterschieden zwischen DPI, PPI und der Arbeit mit Bilddateien gibt es bei Andreas Beitinger.

Was ist DPI und PPI

DPI, also Dots Per Inch (zu Deutsch Punkte pro Zoll) ist eine Maßeinheit aus dem Druck. Sie gibt an, wie viele Tintenpunkte der Drucker auf einem Zoll druckt. Weniger DPI sorgen für einen weniger detailreichen Druck.
Dieses Konzept wurde auf Bildschirme unter dem Namen PPI, also Pixel Per Inch, (Deutsch Pixel pro Zoll) übertragen. PPI gibt an, wie viele Pixel der Bildschirm auf einem Zoll anzeigt.
Zum Gebrauch der Begriffe DPI und PPI lässt sich folgendes sagen: Beide werden häufig synonym benutzt, denn es gibt keine trennscharfe Definition. Wenn es um Druck geht, ist DPI die richtige Begriffswahl. Im Bereich Web-Design ist PPI die richtige Bezeichnung.
Bemerkung am Rande: Als Kontinentaleuropäer sind wir das metrische System mit Metern als Längeneinheit gewohnt. Die Normen der Computerwelt kommen aber aus dem englischen Sprachraum, und dort ist Zoll die übliche Maßeinheit. Zur Orientierung: 1 Zoll = 2,54cm.
Der Standard bei Windows-Computern ist 96 PPI, bei Macs liegt er bei 72. De facto liegt der Standardwert der PPI bei normalen Desktop-Computern heutzutage zwischen 72 und 120. Für unsere Grafikabteilung heißt das: Zwischen 72 und 120 PPI designen, damit die Arbeiten überall grob dieselbe Größe haben.
Anders sieht das ganze bei den Displays von Smartphones aus. Hier wurden mit Retina-Displays & Co große Sprünge bei den PPI-Werten gemacht. Aus diesem Grund werden hier verschiedene Grafiksets genutzt.

Ein Beispiel

Wir wollen wissen, wie viel PPI das Mac Cinema Display 27“ hat. Apple liefert uns diese Angabe nicht direkt in den Produktinformationen. Um den PPI-Wert zu errechnen, brauchen wir die Angabe, wie viele Pixel das Display anzeigen kann, und wie groß es ist.
Die Pixelzahl, für die ein Display gebaut ist, gibt die native Auflösung an. Im konkreten Fall wären das 2560*1440px. Im Display sind also auf einer horizontalen Linie 2560 Pixel verbaut, auf einer vertikalen Linie 1440 Pixel. Die Breite des Displays ist etwa 23,5 Zoll. Teilen wir Pixelzahl durch die Breite kommen wir auf die Pixeldichte: 2560px/23,5 Zoll~109PPI. Das Display zeigt also auf einem Zoll 109 Pixel an.

PPI beim Grafikdesign

Wichtig ist die Pixeldichte beim Grafikdesign deswegen, weil jeder Bildschirm einen anderen PPI-Wert hat.  Designen wir ein Quadrat von 96*96px auf dem Windows-Computer-Bildschirm. Auf diesem Bildschirm ist die reale, physikalische Größe des Quadrats 1 Zoll. Man kann ein altmodisches Lineal nehmen, es an den Bildschirm legen und nachmessen.
Auf einem Bildschirm mit 72PPI ist das Quadrat größer. Der Bildschirm braucht etwa 1,5 Zoll um das Quadrat darzustellen. Warum? Bei 96PPI hat das Display auf 1 Zoll 96 Pixel zur Verfügung, die es nutzt, um das Quadrat darzustellen. Bei 72PPI reicht 1 Zoll nur für 72 Pixel. Um die restlichen 24 Pixel darzustellen, braucht dieser Bildschirm nochmal etwa 0,3 Zoll. Für die 96 Pixel braucht er also etwa 1,3 Zoll.

96 PPI vs. 72 PPI: Darstellung Pixelgröße
Pixel sind keine absolute Größeneinheit. Sie werden von Grafikprozessoren so umgerechnet, dass sie zum Ausgabegerät passen. Für Grafikdesigner erstmal eine ärgerliche Sache. Sie müssen einen Kompromiss eingehen zwischen optimalem Design und Anpassungen an die Bildschirmvielfalt.

Bildschirm-Auflösung und native Auflösung

Die Bildschirm-Auflösung kann einen erheblichen Einfluss darauf haben, wie ein Benutzer ein Design wahrnimmt. Glücklicherweise neigen die meisten Benutzer dazu, die native Auflösung der Monitore zu nutzen, die von sich aus ein gutes Bildschirmgrößen/PPI-Verhältnis garantiert. Bei einer Änderung der Auflösung, kann es aber zu Problemen kommen.
Die Auflösung definiert die auf einem Bildschirm dargestellte Anzahl an Pixel (2560*1440px beim Cinema Display 27“). Wer nun weiß, was PPI sind, kann sich vorstellen, dass die Auflösung kein Maß für die physikalische Größe sein kann. Es kann einen 2560*1440px Bildschirm in der Größe einer Wand oder in der Größe einer Hand geben.
Heutige LCD-Monitore haben eine vordefinierte Standard- oder native Auflösung, die der exakten Anzahl Pixel entspricht, die der Bildschirm darstellen kann. Nehmen wir das Cinema Display 27″, das 109 PPI bei einer nativen Auflösung von 2560*1440px darstellen kann. Reduziert man die Auflösung um die Hälfte, erscheinen die Elemente größer. Man hat nach wie vor in der Horizontalen 23,5 Zoll, die mit praktisch weniger Pixeln gefüllt werden wollen.
Reduziert man die Auflösung um die Hälfte, benötigt die Anzeige eigentlich nur ein Viertel des Displays, um alles ordnungsgemäß darzustellen. Auf der Horizontalen sind 2560 Pixel verbaut, aber nur die Hälfte wird benötigt um eine Auflösung von 1280*720px umzusetzen, sodass die restlichen Pixel ungenutzt bleiben.

Reduziert man die Auflösung, vergrößert sich die Darstellung
Damit bei der niedrigeren Auflösung nicht nur ein Viertel des Platzes auf dem Bildschirm genutzt wird, streckt das Betriebssystem die Anzeige auf den ganzen Bildschirm. Der (Grafik-)Prozessor wird jeden einzelnen Pixel nehmen und für das neue Verhältnis berechnen.

Wechsel der Auflösung

Möchte man eine Auflösung von 1280*720px haben, wird der Grafikprozessor so tun müssen, als seien die Pixel doppelt so groß, um den Bildschirm zu füllen. Was passiert? Naja, das Bild wird unscharf. Während das ganze beim halben Verhältnis noch weitestgehend gut aussieht, wird man mit einem Verhältnis von 1/3 oder ¼ Probleme haben. Man landet bei Dezimalzahlen als Multiplikator. Man kann Pixel aber NICHT teilen.
Nehmen wir das Beispiel unten. Man nehme eine 1px Linie in einer beliebigen nativen Auflösung. Lässt man sich diese Linie in einer 66% kleineren Auflösung anzeigen (2/3 Verhältnis), geschieht folgendes: Um den Bildschirm zu füllen, muss der Prozessor die Anzeige auf 150% hochrechnen, also alles mit 1,5 multiplizieren. 1px*1,5=1,5px, aber es gibt keine halben Pixel.  So werden umgebende Pixel teilweise mitgefüllt und es entsteht Unschärfe.

1px breite Linie bei nativen und bei verkleinerten Auflösung

Es empfiehlt sich also, die Bildschirmauflösung auf den Standardeinstellungen zu belassen, zumindest, wenn man eine präzise Darstellung haben möchte.

Vielfalt macht viel Arbeit

Was unsere Grafikabteilung uns sagen möchte: Die vielen verschiedenen Displaygrößen und Auflösungen sind toll, machen für den Grafikdesigner aber eben auch viel Arbeit. Die fertigen Werke sehen auf jedem Bildschirm anders aus. Neben PPI, Auflösung und tatsächlicher Größe kommen schließlich noch eine Menge weiterer Faktoren dazu, die man beachten muss. Darunter Farbwerte, Helligkeit, Touch-Usability usw…

Ein Glück dass wir sie haben, die Grafiker!

Quellen:
https://sebastien-gabriel.com/designers-guide-to-dpi/home
https://fotovideotec.de/ppi_und_dpi/

Bild: 
https://www.t-pw.com/what-is-dpi-resolution/