§ 03

Pixeldichte des Bildschirms (PPI)

Hvor mange pixels pr. tomme (PPI) har denne skærm, og hvor skarp regnes den for?

Antwort: Pixels per inch (PPI) fortæller hvor tæt pixels sidder på en skærm, og regnes ud fra skærmens opløsning og den fysiske diagonal i tommer. Jo højere PPI, jo skarpere fremstår teksten og billederne — og jo mere sandsynligt er det, at skærmen bruger en device pixel ratio over 1x, så billeder skal leveres i højere opløsning end de vises i CSS.

Formel

PPI = √(bredde_px² + højde_px²) ÷ diagonal (tommer)

Eksempel: 1920×1080 px på 15,6" ≈ √(1920²+1080²)/15,6 ≈ 141 PPI

Symbole und Einheiten in der Formel
Symbol	Bedeutung	Einheit
bredde_px	Opløsning — bredde	px
hoejde_px	Opløsning — højde	px
diagonal_tommer	Skærmens diagonal	tommer
=	Pixeltæthed (PPI)	PPI
=	Samlet antal pixels	megapixel

Gültigkeit und Quelle

Quelle: Geometri (Pythagoras' læresætning)

Rechenbeispiel

Die eigenen Standardwerte des Rechners sind eingesetzt. Die Zahlen sind mit genau der Formel berechnet, die das Werkzeug verwendet.

Sat ind

Opløsning — bredde1.920 px
Opløsning — højde1.080 px
Skærmens diagonal15,60 tommer

Geber

Pixeltæthed (PPI)141 PPI
Samlet antal pixels2,07 megapixel

Nur für Mitglieder

Der Rechner selbst ist gesperrt

Lege einen kostenlosen Zugang an, um alle Artikel, Rechner, Vorlagen und das Sortiment freizuschalten — und Zugriff auf Quizze und Klassen zu erhalten. Es dauert unter einer Minute: Name, E-Mail und ein Passwort. Keine Zahlungskarte.

Kostenlosen Benutzer erstellen →Anmelden

Willst du zuerst etwas ausprobieren? Sieh, was du ohne Konto nutzen kannst — der Junior-Bereich, das Lexikon, die Videos und mehr.

Sådan bruger du den

Når du tester et design på forskellige skærme, forklarer pixeltætheden, hvorfor det samme billede ser skarpt ud på én skærm og sløret på en anden. Høj PPI betyder en device pixel ratio over 1, og så skal billeder leveres i flere størrelser med srcset.

Schritt für Schritt

Find skærmens opløsning i pixels og diagonalen i tommer i databladet.
Regn diagonalen i pixels med Pythagoras: √(bredde² + højde²).
Del med diagonalen i tommer. Det er PPI.
Over ca. 200 PPI bruger enheden typisk DPR 2 eller mere.

Typische Fehler

At tro at CSS-pixels er fysiske pixels. Med DPR 2 består hver CSS-pixel af 2 × 2 skærmpixels.
At teste billeder kun på en skærm med høj PPI. Der ser alt skarpt ud, mens en DPR 1-skærm afslører for tunge filer.
At bytte om på bredde og højde. Det giver samme PPI, men forkert sideforhold i dine noter.

Beispiele aus dem Alltag

Kontorets bærbare

Kundens medarbejdere bruger bærbare med 15,6" skærm i 1920 × 1080.

Opløsning — bredde: 1.920 px
Opløsning — højde: 1.080 px
Skærmens diagonal: 15,6 Zoll

Es bedeutet: Tætheden er 141 PPI og skærmen har 2,07 Megapixel. Den kører normalt med 125 % skalering i Windows, altså DPR 1,25.

En moderne iPhone

Du tester en webshop på en iPhone med 6,1" skærm og 1179 × 2556 px.

Opløsning — bredde: 1.179 px
Opløsning — højde: 2.556 px
Skærmens diagonal: 6,1 Zoll

Es bedeutet: Tætheden er 461 PPI. Telefonen bruger DPR 3, så et billede, der vises 390 CSS-pixels bredt, skal være ca. 1170 px for at se skarpt ud.

27" 4K-skærm

Designeren arbejder på en 27" skærm i 3840 × 2160.

Opløsning — bredde: 3.840 px
Opløsning — højde: 2.160 px
Skærmens diagonal: 27 Zoll

Es bedeutet: Tætheden er 163 PPI, og skærmen har 8,29 Megapixel. Den kører typisk med 150 % skalering, så designet ser skarpere ud her end hos de fleste brugere.

Faustregel

Under ca. 120 PPI er en almindelig skærm (DPR 1), over ca. 200 PPI er en «retina»-skærm (DPR 2-3).

So überprüfst du die Antwort

Skriv window.devicePixelRatio i konsollen på enheden. Det viser den faktiske DPR.