With the quality of screen displays constantly evolving and improving, we are now needing to cater for high pixel density displays. This can be quite difficult as there is such a wide variety of pixel densities available within the market. Some feature very high resolution displays such as the Apple iPhone, iPad and Macbook as well as the Samsung Galaxy S4 and the HTC One. A listing of selected devices’ pixel density displays can be found here.
Most people will recognise the term “Retina”. High pixel density displays and Retina displays are generically speaking the same thing. Apple have just named this feature as “Retina”. Without the appropriate measures taken, your website/app can appear very blurry and pixelated on these screens. With progression in such technologies as Retina, users are expecting a higher quality user experience when it comes to the web – especially over mobile and tablet devices. For mobile especially, we need to bear in mind the impacts to network bandwidth. Our aim is to display the best quality images as efficiently as possible. If the imagery is not optimised appropriately, your brand’s user experience may suffer as a result.
The below is a rough demonstration of how a non-optimised (1x1 size) image will look on a high pixel density (2x1 size) display compared with an optimised (2x1 size) image which looks obviously much sharper and more detailed.
The two most common ways that we can cater for high pixel density displays are:
- Querying Pixel Density using CSS Media Queries
- Scalable Vector Graphics (SVGs)
Querying Pixel Density using CSS Media Queries
Using CSS Media Queries to detect the device size (mobile, tablet or desktop) and the device pixel ratio (DPR). The DPR in very basic terms is the ratio measurement of the resolution of the device. Currently the DPR can be 1 / 1.25 / 1.5 / 2 / 2.5 / 3 (as technology evolves the DPR will also increase). The CSS then detects which image is appropriate for the device and its’ DPR. For example, as a Macbook Pro has a high pixel density display, it will be served the 2x1 image where as other laptops will receive the 1x1 image - we therefore do not sacrifice the users’ experience with unnecessary increased loading times.
What to use it for? Any website or mobile, tablet or desktop app.
How does it affect us? To combat high pixel density displays we design at 2x1 image size required for elements such as logos, images and icons.
- Devices download only those assets that target them
- Cross browser compatible
- Tedious to implement, especially on large websites
- Not entirely future proof (for example, the new HTC One is 3x1 density screen)
Another solution to combat the developer overhead of this option is to just have one 2x1 image size. However, with this image we compress it to a point where we do not lose too much detail for the high pixel density displays but still manage to make the file size lower enough that it can be served on 1x1 pixel displays. This will require some trial and error to get the quality level just right.
Scalable Vector Graphics
These have been around for quite some time, but have never made it as a best practice solution. As the name suggests, these are scalable images. These are perfect for high pixel density displays as no matter how much they are scaled up or down, they will always remain crisp and intact without ever losing any pixel quality. With the screen densities constantly evolving, this method is very attractive due to it being future proof.
What to use it for? Any website or app. Suitable for icons, patterns, logos, graphs, maps, navigation and repeating backgrounds (not photographs).
How does it affect us? We do not have to design at 2x1 image size for this method - your images will basically scale up to the highest pixel density display and scale down to the smaller resolutions (for example: mobile).
- One asset for all devices and screen resolutions
- Future proof - infinitely scalable vector graphics
- Easy to maintain
- Fewer requests to the server
- SVGs can also become responsive in themselves
- Anti-aliasing may become an issue
- For current bandwidths levels, it can be slightly intensive – however, bandwidths can only improve
- Unsuitable for complex graphics such as photographs due to large file sizes and too processor intensive
- No native support in IE 7 and 8 or early Android versions (fall back option may be required for older browser where a .png is swapped in thus increasing server requests)
An alternative to SVGs would be to use Font Icons where they share very similar qualities but fewer disadvantages.
Looking at the above, both methods have very significant pros and cons. When making this decision, we have to be considerate of the brand’s needs and strategic direction in combination with their users’ engagement over multiple devices. We believe that SVG would be ideal for logos and icons in navigation but anything more will be too processor intensive. SVG does not have native support for IE 7 and 8 or early Android versions which could propose a bit of a problem. At this stage Querying Pixel Density seems to be the most stable solution with SVG still very experimental. Perhaps the combination of Querying Pixel Density and Font Icons is the route to take.