Pixel Density beschreibt, wie dicht die Bildpunkte auf einem Bildschirm physisch beieinanderliegen. Gemessen wird sie in Pixeln pro Zoll, abgekürzt ppi. Sie ergibt sich allein aus der Zahl der Bildpunkte und der Bildschirmdiagonale, ist also eine echte physikalische Größe. Die Device Pixel Ratio leitet sich zwar daraus ab, bleibt aber eine dimensionslose Verhältniszahl, die der Hersteller festlegt.
- Pixel Density
Physikalische Dichte der Bildpunkte auf einem Bildschirm, angegeben in Pixeln pro Zoll und mit ppi abgekürzt.
Beispiel: „Der neue Monitor hat rund 160 ppi, deshalb wirkt die Schrift dort viel glatter.“Auch: Pixeldichte, Punktdichte. Im Druck heißt die vergleichbare Größe dpi, also dots per inch. Beide Kürzel werden im Alltag oft vermischt, am Bildschirm ist fast immer ppi gemeint.
Abgrenzung: Retina Display ist eine Marketingbezeichnung von Apple für Geräte, deren Pixel Density einen bestimmten Wert überschreitet. Die Device Pixel Ratio sagt, wie der Browser rechnet. Die Pixel Density sagt, was das Panel physisch hergibt.
Wie sich die Dichte berechnet
Für die Rechnung brauchst du zwei Angaben: die Auflösung in Bildpunkten und die Bildschirmdiagonale in Zoll. Aus Breite und Höhe ergibt der Satz des Pythagoras die Diagonale in Bildpunkten, geteilt durch die Diagonale in Zoll steht die ppi-Zahl da.
Ein 27-Zoll-Monitor mit 2560 mal 1440 Bildpunkten hat eine Bilddiagonale von rund 2937 Punkten, geteilt durch 27 Zoll sind das etwa 109 ppi. Ein 24-Zoll-Monitor mit Full-HD-Auflösung landet mit demselben Rechenweg bei rund 92 ppi. Aktuelle Telefone erreichen ein Vielfaches davon, weil sie eine ähnliche Punktzahl auf wenigen Zoll unterbringen.
Warum ppi und Device Pixel Ratio auseinanderfallen
Die Dichte allein sagt noch nichts darüber, wie groß Inhalte erscheinen. Entscheidend kommt der Betrachtungsabstand dazu: Ein Telefon hältst du rund 30 Zentimeter vor die Augen, einen Fernseher siehst du aus mehreren Metern. Deshalb braucht das Telefon erheblich mehr ppi als der Fernseher, um gleich scharf zu wirken.
Genau hier setzt die Device Pixel Ratio an. Der Hersteller legt fest, wie viele Bildpunkte auf einen CSS-Pixel fallen, und gleicht damit Dichte und Abstand gegeneinander aus. Zwei Geräte mit derselben DPR von 2 können sich in ihrer Pixel Density um Hunderte ppi unterscheiden.
Was die Dichte fürs Webdesign bedeutet
Direkt ansprechen kannst du ppi im Browser nicht. CSS kennt zwar die Einheit dpi im Media Feature resolution, gemeint ist dort aber das Verhältnis zum CSS-Pixel und nicht die physische Dichte des Panels. Als Steuerwert für dein Layout fällt die Dichte damit aus.
Wichtig bleibt sie beim Bildmaterial. Je höher die Dichte, desto eher fällt ein zu klein abgelegtes Foto oder ein Logo als Pixelgrafik auf. Das ist der häufigste Grund, aus dem Kunden nach einem Relaunch über unscharfe Bilder klagen: Die Dateien stammen aus einer Zeit, in der ein Pixel in der Datei einem Bildpunkt auf dem Bildschirm entsprach.