Device Pixel Ratio (DPR) Explained
Understand what device pixel ratio is, how it affects rendering, and why it matters for responsive images, canvas drawing, and high-DPI display support.
Detailed Explanation
What Is Device Pixel Ratio?
Device pixel ratio (DPR) is the ratio between physical pixels on a display and CSS pixels used in web layout. It is exposed via window.devicePixelRatio in JavaScript.
Common DPR Values
| DPR | Meaning | Example Devices |
|---|---|---|
| 1 | Standard density | Older desktops, most non-Retina monitors |
| 1.5 | Mid-density | Some Android phones, Windows laptops at 150% scaling |
| 2 | High density (Retina) | MacBook Pro, iPhone, iPad |
| 3 | Ultra-high density | iPhone Plus/Pro Max, flagship Android phones |
How DPR Affects Web Development
When DPR is 2, every CSS pixel is rendered using a 2×2 grid of physical pixels. This means a 100×100 CSS-pixel element actually occupies 200×200 physical pixels. If you serve a 100px-wide image, the browser upscales it, causing blurriness.
Handling High-DPI Images
Use the srcset attribute to provide multiple image resolutions:
<img
src="photo-400.jpg"
srcset="photo-400.jpg 1x, photo-800.jpg 2x, photo-1200.jpg 3x"
alt="Example photo"
/>
Canvas Rendering on High-DPI Screens
When drawing on a <canvas>, scale both the canvas buffer and the CSS size:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
canvas.width = 300 * dpr;
canvas.height = 150 * dpr;
canvas.style.width = '300px';
canvas.style.height = '150px';
ctx.scale(dpr, dpr);
This ensures crisp rendering on Retina and HiDPI screens without blurry edges.
Use Case
Front-end developers building responsive websites need to understand DPR to serve correctly sized images, render crisp canvas graphics, and test layouts across standard and Retina displays.