⌘K
We use cookies to improve your experience
We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience.
Definition
Pixel density (measured in PPI — pixels per inch) describes how many pixels are packed into each inch of a display. Higher pixel density means sharper, more detailed rendering. Standard displays are around 96 PPI, while Retina/HiDPI displays range from 200 to 500+ PPI.
PPI (pixels per inch) measures screen pixel density, while DPI (dots per inch) technically measures print resolution. The terms are often used interchangeably in casual discussion, but they refer to different things. A 27-inch 4K monitor has about 163 PPI. An iPhone 15 Pro has 460 PPI. A typical laser printer outputs at 600-1200 DPI. Higher PPI means each pixel is smaller and less individually visible, creating a sharper, more natural-looking image.
High-PPI displays (Apple calls them "Retina") require web images to be served at 2x or 3x their display size to appear sharp. A 200x200px image displayed on a 2x Retina screen needs to be 400x400px in the source file. HTML's srcset attribute and CSS's image-set() function let developers serve different resolutions to different screens. Without this, images appear blurry on high-PPI devices because the browser upscales them.
Browsers expose the device pixel ratio (window.devicePixelRatio) — the ratio of physical pixels to CSS pixels. A value of 1 means standard density, 2 means Retina/HiDPI (each CSS pixel maps to a 2x2 grid of physical pixels), and 3 is common on flagship phones. Web developers use this to serve appropriately sized images, render sharp canvas graphics, and generate crisp favicon sets. The CSS media query (min-resolution: 2dppx) can target high-density displays specifically.