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.
| Ratio | OS | % of total visitors |
|---|---|---|
| 1 | Windows | 23.99% |
| 2 | iOS | 9.67% |
| 1 | Macintosh | 5.52% |
| 1 | iOS | 5.18% |
| 1.5 | Android | 1.98% |
| 1 | Android | 1.70% |
| 2 | Android | 1.42% |
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.
8 comments
Comment by nathanodell posted on
With all the new technology such as Apple's retina displays, high resolution images are the way forward. Thanks for this great post... and making some headway in testing your ideas.
Comment by gwyntjones posted on
I like it. Is this something you plan to use for imagery on GOV.UK more widely. I have been looking into high resolution images for a current project and had concerns about impact on file size. The issue is that there's no correlation between screen resolution and network capability and no straightforward means of ascertaining it (I think it would be possible with a reasonably involved Ajax hack, but that isn't ideal in itself). Really grateful to know your thoughts on this.
Comment by Alex Torrance posted on
There really isn't much other imagery on gov.uk 🙂 we wil probably provide hi-res images on the homepage and campaign pages when those are updated.
You're right about network speed and screen size and this is something we have considered. The only way to currently measure network speed would be to download a large file on the device which defeats the object of the exercise. As this is the case we aim to keep file size at a minimum.
This is a interesting technique, using large images with heavy compression so their file size is equal or less than the original normal sized image.
Comment by James Fryer posted on
There's loads of imagery on departmental pages of Inside Government.
Comment by Gwyn posted on
I like it. Is this something you plan to use for imagery on GOV.UK more widely? I have been looking into high resolution images for a current project and had concerns about impact on file size. The issue is that there's no correlation between screen resolution and network capability, and no straightforward means of ascertaining it (I think it would be possible with a reasonably involved Ajax hack, but that isn't ideal in itself). Really grateful to know your thoughts on this.
Comment by Josh T. posted on
I use a high-DPI display on my Windows 8 laptop. On the desktop, the DPI is set to 150%, so it's great now that I can see GOV.UK's logo in high-res. However, neither Firefox or IE are showing any of the other icons in high-res unless I zoom in to 200%. Hopefully this will be fixed. I would suggest just showing the x2 images for DPIs above 120% and then letting the browser scale the image down.
Comment by Alex Torrance posted on
Thanks for your feedback Josh. As outlined in the post, we are not serving the hi-res assets to devices with pixel density ratios less than 2 just yet as we need to test how the site performs for mobile devices with ratios between 1 and 2 as they are generally the more older, low-powered Android devices.
As gov.uk is not a graphics heavy site, I don't think we will have any issue with this however and I expect we will lower the condition soon.
Would you mind visiting this site and letting me know what results you get at each of the zoom levels you use as this will help with further development?
Thanks again.
Comment by Josh T. posted on
I get 1.5dppx (144dpi) in Firefox and IE.