Is this retina?

Pixel ratio and “4K” are different questions

Device pixel ratio is how many physical pixels your screen puts into one CSS pixel — and it is a product of the panel’s density and your operating system’s display scaling and your browser zoom. It is not a measure of how many pixels the monitor has.

A 27-inch 4K monitor at 100% scaling reports 1×: it has a lot of pixels, but it maps them one-to-one, so standard images are already sharp. Set that same monitor to 150% scaling — which most people do, because everything is tiny otherwise — and it reports 1.5×, and standard images start to look soft.

Apple’s “Retina” laptops and phones report 2× or higher. That is the case this tool was originally named for, and it is still the number worth designing against.

So the useful question is not “is this a retina display”, it is “does this display need higher-resolution assets” — which is what the answer above tells you. Change your OS scaling or zoom this page and the number will change with it.

What to do about it

Ship an image around twice the displayed size and let the browser pick per device:

<img src="photo.jpg"
     srcset="photo.jpg 1x, photo@2x.jpg 2x"
     width="600" height="400" alt="">

Drag this window between two monitors and the numbers update live — the ratio belongs to the screen the window is on, not the machine.

Want a team that gets this right for you? See the best SEO companies and top web design agencies.