Device Pixel Ratio and Retina Testing
What device pixel ratio is, how it affects image sharpness, and how to test that your assets look crisp on high-density screens.
6 min read - Updated 2026-06-15
Use this guide as a compact release reference, then validate the same breakpoints in Sizzy with synchronized devices and screenshot evidence.
DPR maps CSS pixels to hardware pixels
Device pixel ratio is how many physical pixels make up one CSS pixel. A DPR of 2 means a 100px CSS image is drawn across 200 hardware pixels, so a 100px-wide source image looks soft. High-density screens are everywhere now, which is why a graphic that looks fine on an old monitor can look blurry on a modern phone.
DPR 1 = one hardware pixel per CSS pixel (older displays)
DPR 2-3 = common on phones and modern laptops
Raster images need extra resolution to stay sharp
window.devicePixelRatio reports the current value
Serve the right resolution
Use srcset with density descriptors or width descriptors so the browser picks an appropriately sharp image per device. For icons and illustrations, prefer SVG, which is resolution-independent by nature. The goal is crisp visuals without shipping huge files to low-density screens.
Use srcset with 1x/2x descriptors for fixed-size images
Use srcset width descriptors plus sizes for fluid images
Prefer SVG for icons, logos, and line art
Avoid upscaling small sources - it just looks soft
Verify sharpness across densities
You cannot judge retina sharpness by squinting at one monitor. Testing across device profiles with different DPRs reveals soft images immediately. Sizzy lets you view high-density device profiles side by side so you can compare image crispness and confirm the right srcset variant is being served.
Compare the same image on DPR 1, 2, and 3 profiles
Look for soft edges on logos and product photos
Confirm the browser fetches the higher-res srcset variant
Check that file sizes stay reasonable on low-DPR devices
Release checklist
Raster images provide 2x sources via srcset.
Icons and line art use SVG where possible.
Low-density devices don't download oversized images.
Sharpness is verified on multiple DPR profiles.
Frequently asked questions
What is device pixel ratio?
Device pixel ratio (DPR) is the number of physical pixels per CSS pixel. A DPR of 2 means each CSS pixel is rendered using a 2x2 block of hardware pixels, which is why standard-resolution images look soft on high-density screens.
How do I make images sharp on retina screens?
Provide higher-resolution sources with srcset density or width descriptors so the browser can pick a 2x or 3x image on high-DPR devices, and use SVG for icons and line art that must stay crisp at any size.
How do I check a device's pixel ratio?
Read window.devicePixelRatio in the console, or test with device profiles of known DPR. A development browser that emulates high-density devices lets you compare image sharpness across DPR values quickly.
Related guides
Benji
Your life OS
The companion app that keeps every area of your world in sync.
Zero to Shipped
Ship products, not side projects
The ultimate Next.js boilerplate for building and launching real products.
DMX
Mindful Twitter/X
The intentional X client for macOS. Reclaim your attention span.
Sotto
Voice-to-text for macOS
Speak naturally. Type instantly. 100% local & private.
Passlock
Password manager with willpower
Lock passwords with time delays, word challenges, or hand the keys to someone you trust.
Glink
Changelogs that slap
Beautiful changelogs and roadmaps for your product.
JoinRepo
GitHub access control
Monetize your GitHub repositories with ease.
Tubely
YouTube Studio for Mac
Manage multiple YouTube channels in one native app.
JustWrite
Distraction-free writing
A minimal writing app that helps you focus on what matters.