Razor-sharp Images in Mobile Safari on iPhone 4

The latest generation of smartphone displays have vastly higher pixel densities than their desktop counterparts–more than double in the case of the iPhone 4’s much vaunted Retina display. The difference is now so large that mobile browsers have been forced to start auto-scaling content, typically rendering a CSS dimension of 1px as two physical screen pixels, in order to keep web content at a readable size.

As long as the desktop rendering of your site is the priority, and desktop display resolutions continue to lag behind smartphones, this auto-scaling will do just fine; however, when customers become more and more accustomed to the razor-sharp detail that can be achieved by using every single pixel of these high-resolution displays, the scaled versions of your site’s graphics will look more and more clunky by comparison.

To make your site look at home on a high-resolution display, you’ll need to create images with twice the pixel dimensions of a desktop version of that same image; for instance, a 32×32 pixel icon on the desktop version of your site will have to be redrawn at 64×64 pixels in order to display at about the same size (but twice the resolution) on the phone. You simply size that image to 32px by 32px in your CSS, and soak up the detail:

.icon {
  background-image: url(icon64x64.png);
  width: 32px;
  height: 32px;
}

But wait: an image with twice the resolution will be about four times the file size, and the desktop browser will have to expend significant effort resizing the high-res images to display at half the size. Despite the extra work involved, it’s best to prepare low-res (say 32×32 pixel) and high-res (64×64 pixel) versions of your site’s images, and use a CSS media query to send the high-res images to auto-scaling browsers only:

.icon {
  background-image: url(icon32x32.png);
  width: 32px;
  height: 32px;
}

@media only screen and
    (-webkit-min-device-pixel-ratio: 2) {
  .icon {
    background-image: url(icon64x64.png);
  }
}

Loading high-resolution versions of images in <img> tags is trickier, since you’re unable to control the src attribute with CSS. Sneaky developers have figured out various ways to achieve it, though (for example, having a request for a high-resolution CSS image set a cookie, that then causes the server to send high-resolution content images too).

High-resolution images may seem like a lot of extra work, but the day you see your entire site displayed at twice the resolution that you’re used to, it will all be worth it.