Designing for Retina Displays, Optimize Website for @2x Images

Do you know what exactly is Retina? Do you know what makes it amazing or what makes it a nightmare for designers and developers? Well read on to understand the technology and the various ways you can optimize images to be Retina ready.

In the simplest of terms, Retina Displays mean a high definition display. But, before going into detail about how to create Retain ready images, you need to understand the technology behind them.

First, let’s go over some terms:

Device pixel is the smallest physical unit displayed.

Pixel density is the number of pixels displayed in a given space.

Resolution is the number of pixels across the entire width or height of a device.

Pixels per inch, ppi or dpi, is the amount of pixels you get when you divide the physical width of the display by the number of horizontal pixels displayed.

High DPI is a display density of 200 pixels per inch or greater.

So with that said, you can have an iPad and an older desktop monitor with the same physical size but different pixel densities. The iPad will have many more pixels jammed within the space and because of this the display will be higher quality and of higher definition thanks to it having a higher DPI. So in terms of Retina, this is the same exact concept: same display size but more pixels, which means a high DPI display.

Most images were and still are made in 72DPI for standard displays. However, Retina’s DPI is much greater and those images will look blurry if they are not adapted in their resolutions. This is why you need to optimize your images for high DPI devices.

Let’s summarize: The smaller the pixels and the closer they are together makes for a much better, shaper and higher quality images. Retina Displays require double the pixels to display the same image as standard definition displays. Therefore, even though iPad 2 and iPad 3 have the same physical screen size, iPad 2 has a resolution of 1024px by 768px, while iPad 3 has a resolution of 2048px by 1536px.

Now that you understand why Retina ready images are necessary it is time to learn the various way on how to optimize your images for such displays.

A raster – or bitmap – graphic is based on a dot matrix data structure which means it is based on a rectangular grid of pixels. The most common raster files are JPG, PNG and GIF. Raster images are characterized by being rendered pixel by pixel where each pixel individually corresponds to a particular hue, saturation, brightness, opacity and position within the whole image. The one key thing to note about raster images is that they are resolution dependent, meaning that they cannot scale up without losing the display quality. Ah, but they can scale down which is how you achieve great Retina ready raster images.

In standard resolution, a raster image’s 1 bitmap pixel is equivalent to 1 device pixel. On Retina Displays, a raster image’s 1 bitmap pixel is equivalent to 4 device pixels. In order to accommodate for the change, Retina display multiplies one bitmap pixel by four. Even though the image is displayed in the same size, it is actually being stretched which causes the image to look blurry.

So what can you do about this? First, you will need to have an image that is double in size and you’ll half it for the displayed size – to the original intended size – with code. Here are three common ways of going about this.

You can use HTML and CSS to declare an image’s size to be half of what it actually is. So, if you have an image that is supposed to be 300px wide by 400px tall. You need to have this image actually be 600px tall and 800px wide. Through HTML you can specify the image to be half that size.

As you can see, this is a very simple and straightforward concept. However, you can also utilize CSS to define the image’s size. So, once again, if you have an image which is 600px by 800px but is supposed to be displayed at 300px by 400px try defining its width and height like this:

Please note the background-size image property. As the name suggest, it will define the background’s size however, just to be safe do define the width and height for the element as background size is not always supported.

What you can also try in CSS is to define the width and height of images to be 50%. This can be done through a class if you want to target only specific images or if you want to apply it to all images just use the img tag.

With the help of jQuery, you can pin point images and half their widths and heights. It works the exact same way as the CSS example with 50% width and height declarations.