Marco.org

Yesterday’s article has been on the front page of Hacker News for a while, and in the middle of the onslaught, I modified my Google Analytics code to start counting high-DPI screens. Why they don’t already count this is beyond me. They can, however, tell me what percentage of visitors support Java applets — 59% — or have less than 24-bit color — 0.5% — which, unfortunately, aren’t nearly as useful for informing modern web design as high-DPI displays.

I’ve been wondering for a while whether it was worth having separate 1X images instead of my current method, which is just making most images 2X-sized and letting the browsers scale them down.¹

Based on this, I added these lines to the Analytics embed code: (it’s at the very bottom of this page’s source code, if you want to see it in context)

var pixelRatio = (window.devicePixelRatio >= 1.5) ? "HiDPI" : "1X"; 
if (window.devicePixelRatio) _gaq.push(['_setCustomVar', 1, 'DevicePixelRatio', pixelRatio, 2]);

Since making the change, Analytics has tracked 21,122 visits from supporting browsers² (mostly from Hacker News), and the results are pretty great:

• 51.4% HiDPI
• 48.6% 1X

It certainly helps that 46% of my traffic is from smartphones and tablets. Within each category:

• Smartphones: 98% HiDPI
• Tablets: 66% HiDPI
• PCs: 18% HiDPI

These are much higher ratios than I expected.

Obviously, this audience isn’t representative of the world’s entire web-browsing population, but given how important mobile browsing is to every site and how lopsided this data is for mobile devices, I think the results are clear: assuming everyone is high-DPI and designing accordingly is not only a safe bet — it’s a requirement. And serving 1X images isn’t something that small sites (for which bandwidth costs aren’t significant) need to worry much about.

(And that’s what I think.)³