Images
A 320 CSS-pixel image slot needs about 640 source pixels along its width at DPR 2. Generate practical candidates instead of exporting only the largest asset.
Device Pixel Ratio Checker
Your browser's current CSS-to-device-pixel ratio, with visual examples and image asset size recommendations.
Your device pixel ratio is
… × …
Try resizing this window — all values update live
Viewport→
Color depth
Paste the report into a bug ticket, or send the link to support/QA. Nothing is stored on our servers.
Insight
CSS pixels vs. device pixels
Every length on the web is specified in CSS pixels, while the browser renders into device pixels. DPR describes the relationship at the current rendering scale: device ≈ CSS × DPR. Browser zoom and operating-system scaling can affect that reported ratio, so it should not be treated as proof of a display's native panel resolution.
High DPR is what makes text look crisp on modern phones and "Retina" laptops. It's also why screenshots are bigger than the layout sizes you wrote in CSS. Use the asset advisor above to generate practical image dimensions and responsive snippets, open the fullresponsive image calculator, or check any phone's exact DPR in ourphone screen size chart.
Where DPR changes the work
Screenshots
Screenshot files often use physical pixels, so they can be larger than the CSS layout you measured. Divide a screenshot width by DPR to estimate the layout width that produced it.
Canvas
Canvas and WebGL surfaces need a larger backing buffer on high-DPR screens. Size the CSS box for layout, then scale the drawing buffer by DPR for crisp rendering.
Frequently asked questions
›What is device pixel ratio (DPR)?
DPR is the ratio between CSS pixels and device pixels at the browser's current rendering scale. A DPR of 2 means a 100 CSS px-wide element corresponds to about 200 device pixels along each axis before any additional scaling.
›Why is my DPR not a whole number?
Operating systems allow fractional scaling — Windows at 125% gives a DPR of 1.25, and many Android phones use values like 2.625 or 3.75. Browser zoom also changes the reported DPR.
›What DPR should I design for?
Provide 1x and 2x image assets at minimum; 3x covers current high-density phones. Use the asset advisor above to turn a CSS image size into exact 1x/2x/3x pixel dimensions and a srcset snippet.
›How do I query DPR in CSS or JavaScript?
In JavaScript: window.devicePixelRatio. In CSS: @media (min-resolution: 2dppx). For images, use srcset with 1x/2x/3x descriptors.
Related tools
- Responsive Image CalculatorCalculate responsive image export sizes from CSS pixels and DPR. Generate srcset, sizes and CSS image-set snippets for crisp images.
- Viewport Size CheckerSee your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- iPhone Viewport SizesCSS viewport sizes and device pixel ratios for the current and recent iPhone models tracked here, with a responsive design and media query reference.
- PPI CalculatorCalculate PPI from resolution and screen size. Instant results with the formula worked through your numbers, plus physical dimensions and dot pitch.
- Phone Screen SizesPhone screen size chart with display inches, resolution, PPI and aspect ratio; viewport references where available for tracked iPhone, Galaxy and Pixel phones, including foldables.