Marco.org

I’m : a programmer, writer, podcaster, geek, and coffee enthusiast.

And

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:

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

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


  1. Since I don’t have a Retina desktop display yet, I captured the Amazon promo in Worse at high resolution by simply zooming it in a huge Safari window until it was 1800 pixels wide. ↩︎

  2. 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. ↩︎

  3. This title’s for you, scottjad↩︎