Catering to HD or retina images
How often have you used a mobile device, such as an iPad, only to find images of poor quality? With the advent of retina displays on devices such as iPads, it is becoming more important to ensure your images are of sufficient quality on high-resolution screens.
Retina display is a proprietary marketing term coined by Apple, rather than a scientific term. To some it might evoke images of a complex scientific process; in reality it is just double resolution where pixels have been very closely packed to give higher quality and resolution. As an example, the pixel count can be anywhere from 220 pixels per inch (PPI) for third generation Mac Book Pros to 401 PPI for iPhone 6 Plus!
Adding retina support to our code is easy. There are several options open to us:
- We can set images as the background image using
background-size: coverto ensure it covers the full display. Images can then be swapped out with higher resolution ones using CSS media queries. - We can resize images as larger retina images then use CSS to resize them on screen; this results in a larger file but not necessarily twice as large due to the way JPEG compression works. We may need to use
-ms-interpolation-mode: bicubicto ensure the compression level is as efficient as possible in some browsers though!
We can always set our code to display high-resolution images; however, there is a cost in displaying these images in the form of a bigger file size; the quality will be lost on low-resolution (low-res) devices.
Instead, we could use a plugin, such as Retina JS, to tell browsers to serve hi-res images only when needed. Let's take a look at using one in action:
- Start by adding the following code to a new file, saving it as
retina.html:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/retina.min.js"></script> </head> <body> <img src="img/mothorchid.png" data-at2x="img/mothorchid@2x.png" width="584px" height="389px"> </body> </html>
- Next, we need to download the RetinaJS library—this is available at https://github.com/imulus/retinajs/releases/download/1.3.0/retina-1.3.0.zip (at the time of writing of this book, the latest version is 1.3.0). Extract
retina.min.jsand drop it into a subfolder calledjswithin your project folder. - We also need two images: one needs to be of a higher resolution than the other; for this example, I will use two PNG files that are available in the code download:
mothorchid.pngandmothorchid@2x.png. Note that the second file must have@2xat the end of the filename; this is the key to making Retina JS work.
To preview the results, it is recommended to use Google Chrome. We can easily simulate changing the device pixel ratio setting; change it from 1 to 2 and refresh the screen to see the change from the low-res image to the one of higher quality. We will cover how to create media queries that support hi-res images later in this chapter in the Working out media queries section.
Note
There are plenty of examples online of plugins that can provide retina support—two of the examples are: responsImg, which you can download from http://etiennetalbot.github.io/responsImg/. Alternatively, you can use Grunt to do the heavy work with Andi Smith's responsive images plugin for Grunt at http://mattstow.com/experiment/responsive-images/responsive-images.html.
