Pixel Density, Retina Displays, and @2x/@3x Assets

In 2010, the introduction of high-density displays (such as Apple's Retina) separated CSS pixels from physical device pixels:

• Device Pixel Ratio (DPR): The ratio between physical hardware pixels and logical CSS pixels.
• Standard DPR (1x): 1 CSS pixel = 1 physical screen pixel.
• Retina DPR (2x / 3x): 1 CSS pixel = a 2x2 grid (4 physical pixels) or 3x3 grid (9 physical pixels).

If an engineer serves a 100x100px raster image on a 2x display, the hardware scales it across 200x200 physical pixels, making the image look fuzzy. To maintain crispness, designers must export raster assets at 2x and 3x dimensions.