What is Pixel Density and Why Should You Care?
Pixel density is the number of pixels per linear physical unit. Measured in pixels per inch (ppi or dpi). Pixel density and resolution are technically the same thing, but often people say “resolution” to mean “pixel count,” a related metric:
count = densityH * width * densityV * height
When other things are held constant:
Small pixels ~ more pixels ~ high density ~ high resolution
Large pixels ~ fewer pixels ~ low density ~ low resolution
Usually pixels are square, so the vertical and horizontal density are the same.
A 200×600 pixel image displayed on two same-physical-size screens is physically smaller on the higher resolution screen.
It started with the iPhone
- Before Retina, typical screens were 160 dpi.
- With Retina, dpi doubled.
- Designers export graphics in two formats, since a 44px button on a non-Retina (1x) display needed to be 88px to be the same physical size on a Retina display (2x).
- 1x & 2x are pixel density ratios.
- Users are spoiled by 2x.
- We can no longer use pixels as a universal unit of measurement—a 7px margin means different things on different screens.
- New unit in iOS is points (pt) where:
- for 1x,1 pt = 1px
- for 2x, 1pt = 2px
- for 3x, 1pt = 3px
- For a given device screen:
- [pixels] = [points] * [pixel density ratio]
- Designing at 1x is convenient
Notes & Complications
- Android uses density-indepent pixels (dip or dp) instead of points (pt). Better name for the exact same idea.
- Android has 1x mdpi, 1.5x hdpi, 2x xhdpi, 3x xxhdpi, 4x xxxhdpi, as well as ldpi and tvdpi but those are rare.
- Note: For both Android and iOS, pixel density ratios aren’t always exact, so e.g. 3x is a category of close ratios.
- Physical screen size, viewing distance, mouse vs touch.
- Will there be more densities in the future?
How to avoid blurriness
- When possible, use vectors.
- Vectors be exported at any density without blurriness.
- One day we’ll be able to use vectors directly without rasterizing.
- When possible, draw simple shapes programmatically.
Why should devs care about pixels?
- Many APIs still deal in units of pixels, so your application will need to convert dips or points to and from pixels.
- setTranslation, setScale, setMatrix
- This will likely be the case for a long time, since dips and points are convenient framework concepts, but we can’t totally get away from pixels because they’re still the framework-agnostic fundamental unit of computer graphics.
