§ 03

Gęstość pikseli ekranu (PPI)

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

Odpowiedź: 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.

Wzór

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

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

Symbole i jednostki we wzorze
Symbol	Znaczenie	Jednostka
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

Ważność i źródło

Źródło: Geometri (Pythagoras' læresætning)

Przykład obliczeniowy

Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.

Wstawiono

Opløsning — bredde1920 px
Opløsning — højde1080 px
Skærmens diagonal15,60 tommer

Dawca

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

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

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.

Krok za krokiem

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.

Typowe błędy

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.

Przykłady z codzienności

Kontorets bærbare

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

Opløsning — bredde: 1920 px
Opløsning — højde: 1080 px
Skærmens diagonal: 15,6 cale

To znaczy: Tætheden er 141 PPI og skærmen har 2,07 megapiksel. 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: 1179 px
Opløsning — højde: 2556 px
Skærmens diagonal: 6,1 cale

To znaczy: 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: 3840 px
Opløsning — højde: 2160 px
Skærmens diagonal: 27 cale

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

Reguła praktyczna

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

Jak sprawdzić odpowiedź

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