§ 03

Skærmens pixeltæthed (PPI)

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

Svar: 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

Symboler og enheder i formlen
Symbol	Betydning	Enhed
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

Gyldighed og kilde

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

Regneeksempel

Beregnerens egne standardværdier sat ind. Tallene er regnet med præcis den formel værktøjet bruger.

Sat ind

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

Giver

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

Kun for medlemmer

Selve beregneren er låst

Opret en gratis bruger for at låse op for alle artikler, beregnere, skabeloner og sortiment — og få adgang til quizzer og klasser. Det tager under et minut: navn, email og en adgangskode. Intet betalingskort.

Opret gratis bruger →Log ind

Vil du prøve noget først? Se hvad du kan bruge uden konto — junior-zonen, leksikonet, videoerne og mere.

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.

Trin for trin

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.

Typiske fejl

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.

Eksempler fra hverdagen

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 tommer

Det betyder: 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 tommer

Det betyder: 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 tommer

Det betyder: 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.

Tommelfingerregel

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

Sådan tjekker du svaret

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