The simplest way to handle retina graphics for iPad and iPhone


Since the new iPad launched, I’ve read numerous complicated methods for handling retina graphics. Most of which have left me scratching my head as to why they haven’t just used media queries. Even Apple seem to have missed the mark a little with some complex js solution that actually pulls two versions of the image in - adding a rather pointless overhead to page load.

So, without preaching to the choir. Here’s the technique using media queries to target retina and only pull the images you need for the appropriate device. You can of course tailor this further to target iPhone or iPad too.

<link rel="stylesheet" type="text/css" href="1x.css" media="only screen and (-webkit-min-device-pixel-ratio: 1)" /> 

<link rel="stylesheet" type="text/css" href="2x.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)"/>

I’m sure you can see what’s going on here, but in a nutshell - by adding some specificity over pixel ratio in your media query you can isolate styles (and thus images) based on whether the device is retina or not. The beauty of using that specificity is only the correct size images get pulled so you have no overhead on page load.

Here’s a preview in desktop and on a retina iPhone 4s.

Here’s the proof of the pudding.

Of course this only works for background images for now but there’s not too many scenarios where a background image won’t suffice. We’re working on a fix for inline images which we hope to share soon.