iPhone 4 Retina Display images

Instead of using pixels for measurement the iPhone 4 uses points instead. One point is worth 2 pixels so logos can look blurry when viewed in Safari. There is a solution to this where you upload 2 versions of each image.

I have read that if you upload and image (e.g. called logo.png) and upload second at double the size (logo@2x.png) mobile Safari will look for the larger version based on this naming convention, but I couldn't get this to work. So, this is what I did:

1. Don't embed the small image on the page, but set it as a background on an element using a stylesheet (e.g. called regular.css):

div#logo{
height: 46px;
width: 176px;
background-image:url(images/logo.gif);
background-repeat: no-repeat;
}

2. Next, add a second stylesheet and link to the image at double the size (e.g. called retina.css). We need to tell the browser that we don't want to show the image at it's actual size, but at the size of the smaller image. To do this we need to use -webkit-background-size

div#logo{
background-image:url(images/logoLarge.gif);
-webkit-background-size: 172px 46px;
}

3. Next, link to the stylesheets like this. All browsers will load regular.css, but any device with the pixel ratio of 2 will also load the retina.css file:

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