Retina displays and creating retina-ready images

Retina displays and creating retina-ready images

At Lucid Agency, we use responsive design best-practices to ensure that our sites respond well on any number of devices, but it can be tricky to keep up! In 2010, Steve Jobs announced that the new iPhone 4 would have a retina display. “Retina” is a term (trademarked by Apple in 2012) that refers to the increased pixel density of displays on all models released after the iPhone 4.  Retina Displays are essentially LCD screens with a high enough pixel density that the individual pixels are not discernible to the human eye. Now, four years later, most new mobile devices and tablets boast a retina display. Retina is here to stay, and as developers, it is our responsibility to adapt to new technologies. In this post, I will explain how to ensure that the images on your website look just as beautiful on a Retina display as a standard display.

Understanding Retina

Retina displays essentially double the number of pixels using the same amount of space as a standard screen. For example, the iPad 2 and the iPad 3 are the same physical size (9.7 inches, measured diagonally).The iPad2 has a standard display: 1024px by 768px. The iPad3 has a Retina display, with two times as many pixels per inch (ppi or dpi), so its resolution is 2048px by 1536px.

Visually, you can see the difference between standard definition and a Retina display.

standard retina

Because the pixels in the Retina display are smaller and closer together, the image will be better quality and have higher definition.

What this means for images

Let’s say you create a website. Your homepage has a space that will fit a 200px by 200px image. On your non-Retina device, you find the image you’d like to use, edit the image to 200px by 200px, and upload it to your site. It looks great! When you go home and pull up the homepage on your Retina iPad, you notice that the same image looks blurry and pixelated.

Why is this? It’s because the Retina display requires two times as many pixels to render the same image. So the 200px by 200px space is actually 400px by 400px on a Retina display. JPGs, PNGs, BMPs, and GIFs cannot be scaled up without losing quality, so your image will appear fuzzy.

What to do about it

While image files cannot be scaled UP (unless they are vectorized image files like SVGs) they can be scaled DOWN. Therefore, if you initially loaded the image as 400px by 400px, for your 200px by 200px space, it would scale down to the appropriate size on a standard display, and would still look great on a Retina display in full size.

This is a fine solution; but it is not our recommended approach. If you are running an especially image-heavy site, this approach could potentially slow down your page load time because browsers would need to take the time to scale your image from its original size to the appropriate size. Essentially serving a 400px by 400px image on a standard display that needs to be scaled down, takes more computing time than serving a 200px by 200px image. Typically, images take longer to load than anything else on a page, so adding to that load time will only hurt your pagespeed.

We prefer the following approaches instead:

Using CSS

You can use this approach on any site with a CSS stylesheet. In your stylesheet, include the following media query:

@media only screen and (-webkit-device-pixel-ratio: 2){ }

This tells the browser to detect the device. If the device is Retina the browser should load a different image. Specify the image, and you’re done! The completed code would look something like this:

@media only screen and (-webkit-device-pixel-ratio: 2){
.image-bg-fixed-height {
background: url(‘/[email protected]’) no-repeat center center scroll;
height: 450px;
}}

In this example, /[email protected] is an image twice as large as your original image, /imagename.png

Using JS

Alternatively, you can use Retina.js. Upon page load, the Retina.js script checks all of the images on a page against the other images on your server, to determine if there is a higher-resolution version. If there is a higher resolution version, the browser will render the hi-res version instead of the low-res version, on Retina devices.

The script only works if you use the modifier @2x to identify your high-resolution images. If the bit of HTML code on your page looked like this:

<img src="/images/my_image.png" />

Retina.js checks your server for an image that looks like this:

/images/[email protected]

If that image exists, Retina.js will serve the higher-res @2x image instead of the standard image, for Retina displays.

To use Retina.js, simply download the script. Be sure to include the script on the page itself, and make sure all retina images are saved to your server in the appropriate @2x format. That’s all you need to do – the script will take care of searching-and-replacing any Retina images.

There are other methods of creating Retina-ready images, but these are our two favorites and the ones that we employ most often.

Sources:

Design Modo
Retina.js
Wikipedia
App Architect

Lucid Agency
[email protected]
No Comments

Sorry, the comment form is closed at this time.