High-resolution images

Before Christmas, Ben Terrett asked the design team to think of one thing we’d like to change on GOV.UK. My choice was easy; add high resolution graphics to the site so it looks better on high pixel density devices.

Rather than write a report about what I’d like to change, I took the opportunity to get going and actually implement hi-res icons and logos on GOV.UK.

I came across Kaelig Deloumeau-Prigent’s hidpi Sass mixin in a talk given by John Clevely from BBC News here at GDS. I decided to approach the solution using media queries. I started with making use of CSS Trick’s future resilient Retina display media query:

@mixin device-pixel-ratio($ratio: 2) {
  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
  only screen and (min--moz-device-pixel-ratio: $ratio),
  only screen and ( -o-min-device-pixel-ratio: #{($ratio*10)}/10),
  only screen and ( min-device-pixel-ratio: $ratio),
  only screen and ( min-resolution: #{($ratio*96)}dpi),
  only screen and ( min-resolution: #{$ratio}dppx) {
    @content;
  }
}

At the moment the minimum pixel ratio is set to 2. This means that it only targets Apple’s Retina devices and a few high density Android handsets including the Google Galaxy Nexus, Google Nexus 4, Google Nexus 10 and Samsung Galaxy S III. There are a handful of Android devices with 1.3–1.5 ratio screens, but unfortunately I can’t get hold of any of these devices at the moment to test the site on.

We’re currently using two separate image files, one normal sized and one double sized. Spriting images isn’t really practical with our current design and mark-up because the elements with background image icons are flexible in size. Duplicate images are not being downloaded on hi-dpi iPhones or Androids. Further testing will reveal if images are being downloaded unnecessarily on other hi-dpi devices.

Google Analytics doesn’t record pixel density ratio by default so we set up a custom variable and we gathered a few days worth of data. This has given us some interesting results.

Looking at all the devices that report pixel-density-ratio, over 25% have a ratio greater than one, which is 13% of all traffic. This is a surprisingly high percentage.

Strangely there are a few devices reporting a ratio of less than one, including the Samsung Galaxy Y. I can’t figure out if this is a bug or not, because it means that each physical pixel on the device has to show information about more than one pixel, which is in fact the equivalent of showing a zoomed out image.

We’ll keep an eye on the statistics and see how this develops over time.