Retina Display Ready with Media Query

Apple set a new standard in device screen resolution with Retina display. With million of pixels, Retina display delivers more vibrant, more detailed and sharper images on the screen. However, this affects the way on designers and developers deliver the images on these devices, as images that are not optimized for high-resolution screen will look less than stellar.

So, in today’s post, we will look into how to deliver specific image that are optimized for high-resolution screens.

Recommended Reading: Better And Sharper UI Icons With Web Fonts

Using Vector Graphic

First of all, if the images do not require realism or a complex color scheme, using Vector graphic is probably your best option. Unlike Raster image, Vector graphic is not dependent on pixels, so it will be displayed fine and sharp on any screen resolution.

There are a few ways to add Vector Graphic on the Web, we can either use SVG, Fonts, or also Canvas previously discussed in:

Using Media Query

There is another way. We can conditionally deliver optimized graphic for specific screen resolutions using Media Query. The syntax is similar to Media Query for establishing responsive layout. However, rather than specifying the viewport width breakpoint, it specifies the device pixel ratio (dpr) and screen resolution threshold.

 @media only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { /* Style Rules */ }

The Media Query we showed in the above example will assign the styles for screen resolution with a minimum device pixel ratio of 2 or with minimum resolution of 192dpi.

We can retrieve the dpi number by dividing the screen resolution with its diagonal inches.

For example, a 13.3 inches screen with 1280×800 resolution will give us 96(dpi). So, the number of 196 that we’ve shown in the above code snippet is simply around double that number (96dpi).

In term of getting the device pixel ratio, it is rather scientific. But, in case you are keen on doing the Math, Boris Smush over at HTML5 Rocks will show you how in this article.

Alternatively, we can also query the pixel ratio number through window.devicePixelRatio. In the following example, we return the value from window.devicePixelRatio with an alert window.

 var dpr = window.devicePixelRatio; alert('Device Pixel Ratio: ' + dpr);

This will give use the following result in Retina display screen, like the new MacBook Pro, and iPhone 4.

In non-Retina Display, the number will return 1.

In addition, below is a list of Device Pixel Ratios for popular devices for your reference.

Device	Device Pixel Ratio
iPhone 4, iPhone 4S, iPhone 5, iPod Touch	2
iPad with Retina Display	2
Galaxy Nexus, Galaxy Note, Galaxy SIII	2
Kindle Fire HD	1.5
Galaxy S Plus, Galaxy SII	1.5

From the table, you can see that there are some HD screens with 1.5 dpr. So, it is better to set the minimum threshold in Media Query for 1.5 to cover more screen resolutions.

 @media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { /* style rules */ }

Also, for wider compatibility across the browsers, we can also add min-device-pixel-ratio with their respective vendor prefixes, like so.

 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { /* Style Rules */ }

Example

We have created a page for demonstration. In this page, we assigned two image formats: a .png image for normal screen resolution and an SVG for the HD screen, which will be assigned through Media Query, like so.

 a { background-image: url('img/hongkiatcom.png'); background-size: 100%; background-repeat: no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and ( min--moz-device-pixel-ratio: 1.5), only screen and ( -o-min-device-pixel-ratio: 3/2), only screen and ( min-device-pixel-ratio: 1.5), only screen and (min-resolution: 192dpi) { a { width: 100%; background-image: url('img/hongkiatcom.svg'); background-size: 100%; background-repeat: no-repeat; } }

Now, you can test the demo in action through normal and Retina display. It will also show the image name, which is being displayed on the page.