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.1
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 browsers2 (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.)3
This data also doesn’t count browsers that don’t support
window.devicePixelRatio. But that’s not many anymore, especially among visitors of my site. The breakdown for this sampling period was 46% Chrome, 38% Safari, 10% Firefox, 3% Android Browser, and only 1.2% Internet Explorer. ↩︎