A photo that looks sharp on one screen can look soft on another, even at the same display size, and the reason is a number most people never see: the device pixel ratio. This checker reads that number live from your browser, using the built in devicePixelRatio value, and converts CSS pixels to physical pixels, so you know what image size you actually need for a sharp result. No upload, no install, and no guesswork about your screen.
The idea is simple once you separate two kinds of pixel. A CSS pixel is a layout unit used by web pages, while a physical pixel is a real light dot on the screen. On an older standard screen, one CSS pixel equals one physical pixel, so the ratio is 1. On a modern phone or a retina laptop, one CSS pixel maps to a block of physical pixels: a ratio of 2 means a 2 by 2 block, or four physical pixels per CSS pixel, and a ratio of 3 means nine. The page layout stays the same size, but the screen has far more dots to render it with.
Here is a worked example. You design an image box 800 CSS pixels wide and 600 tall. On a ratio 1 screen, an 800 by 600 image fills it perfectly. On a ratio 2 screen, the same box needs a 1600 by 1200 image to stay sharp, because the browser stretches the smaller image across four times as many physical dots. On a ratio 3 phone, it needs 2400 by 1800. Uploading only the 800 pixel version does not break the layout, but text edges soften and fine detail blurs, which visitors notice even when they cannot name the cause.
The checker also shows your screen size in CSS pixels, which matters for responsive design. A phone may report a CSS width of 390 pixels while its physical panel holds 1170 pixels across, which is exactly a ratio of 3. A laptop may report 1440 CSS pixels wide with a ratio of 2, meaning 2880 physical pixels. Designers who only look at CSS width underestimate the image sizes their layouts need, and that gap is the most common cause of blurry hero images on premium devices.
Ratios vary by device class in a fairly stable pattern. Budget phones and older monitors sit at 1, most modern phones sit at 2 or 3, many laptops sit at 1.25, 1.5, or 2, and high end tablets often sit at 2. Browser zoom changes the effective ratio too, because zooming redefines how CSS pixels map to the panel, so a ratio measured at 150 percent zoom differs from the same screen at 100 percent. Measure at your normal zoom for honest numbers.
For sharp images, the practical rule is to serve images at two times the CSS display size for most screens, and three times only for hero images where quality matters most. Two times covers the huge middle of retina screens without tripling every file size, while three times suits logos and detailed graphics viewed closely. File size grows with the square of the ratio, so a three times image is nine times the pixels of the base size, which is why indiscriminate three times images slow pages down for little visible gain.
Use this checker before exporting images for a website, an app, or a presentation. Enter the CSS size of the image box, read your live ratio, and export at the physical size the tool reports. Check the result on the actual device when you can, because numbers alone do not capture compression artefacts or viewing distance. A sharp image is not about the biggest file: it is about matching the pixels you serve to the pixels the screen can actually show.