Device Pixel Ratio (DPR) is a crucial concept in modern web design. It defines the relationship between
physical hardware pixels and logical CSS pixels.
Common DPR Values: • 1.0: Standard desktop monitors (Non-Retina)
• 2.0: Apple Retina displays, many modern laptops
• 3.0: High-end smartphones (e.g., iPhone Pro, Pixel)
💡
Expert Tip: Image
Optimization
For high-DPR screens, use the srcset attribute in your <img>
tags. This allows the browser to download the appropriate image size (1x, 2x, or 3x) based
on the user's screen, saving bandwidth.
Common Mistakes
Serving Huge Images: Don't serve a 3x image to everyone. It wastes data for 1x
users.
Ignoring Favicons: High-DPR screens need high-res favicons (e.g., 32x32, 192x192)
to look sharp.
Assuming 1px Border: On 2x screens, a 1px CSS border is actually 2
physical pixels wide. Use 0.5px for a true hairline if supported.
AS
Reviewed by Alex Smith, UI/UX Designer
Updated November 26, 2025
Frequently Asked Questions
What is Device Pixel Ratio (DPR)?
Device Pixel Ratio (DPR) is the ratio between physical pixels on the screen and logical (CSS)
pixels. A DPR of 2 means there are 2x2 physical pixels for every 1 CSS pixel (Retina display).
Why is DPR important for web design?
DPR determines how sharp images look. On high-DPR screens, you need to serve higher resolution
images (e.g., @2x or @3x) to prevent blurriness.
What is a Retina display?
Retina is Apple's marketing term for screens with a high pixel density (usually DPR 2 or higher),
where individual pixels are indistinguishable to the human eye at a normal viewing distance.
Does DPR affect CSS media queries?
Yes, you can target specific pixel densities using media queries like `@media
(-webkit-min-device-pixel-ratio: 2)` to apply styles only for high-resolution screens.