Chad Weider

While working on [this page](http://halfworking.com/mines), I discovered just how awful the web can look on the the the iPhone and iPad with their “retina” screens. In native applications, normal resolution images are scaled without anti-aliasing, but in Mobile Safari images are scaled _with_ anti-aliasing, and as a consequence, many important pixels can get badly blurred.

This isn’t an unrecognized problem and it has been solved [elsewhere](http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/), but the accepted approach seems require JavaScript and class names, which strikes me as unnecessary – CSS declarations alone should suffice.

To that end, the approach I use is [this](https://gist.github.com/2394800):

@media only screen and -webkit-min-device-pixel-ratio:2 {
  img[src="images/icon.png"] {
    content: url("images/icon@2x.png");
  }
  img[src="images/store_small.png"] {
    content: url("images/store_small@2x.png");
  }
  img[src="images/screen_fail.png"] {
    content: url("images/screen_fail@2x.png");
  }
  img[src="images/screen_play.png"] {
    content: url("images/screen_play@2x.png");
  }
}

*I swear I read about content negotiation for this at some point, but all I can find is an old, unresolved [discussion](https://lists.webkit.org/pipermail/webkit-dev/2007-June/001923.html) at [webkit.org](http://webkit.org).