Pixel Density
Pixel density is the number of physical pixels packed into a physical unit of screen area, usually measured in pixels per inch.
High-density displays pack multiple physical device pixels into a single logical CSS pixel. This creates the distinction between logical dimensions and physical asset rendering, requiring exported graphics at multiple resolutions.
How it works
A standard screen has a 1x ratio where one CSS pixel equals one hardware pixel. High-DPI screens pack 2x or 3x physical pixels into the same space, requiring higher resolution images to prevent blurry rendering.
When to use it
Account for pixel density when exporting raster images like photographs, serving scalable SVGs for icons, and defining responsive srcset image attributes in HTML.
Common mistakes
Serving only 1x resolution raster images on modern smartphones, resulting in blurry, fuzzy graphics on high-end Retina displays.
Key takeaways
- High pixel density makes text and vectors sharp by fitting more pixels per inch.
- Raster images must be supplied at 2x and 3x scale to look crisp on Retina displays.
- Vector SVGs scale automatically across all densities without extra files.
Learn this
Lessons and exercises mapped to this concept.
Common questions
- Why don't SVG files need 2x or 3x versions for high-density screens?
- SVGs use mathematical equations to draw shapes instead of fixed pixel grids, so the browser redraws them with perfect sharpness at any pixel density.