Quick and Dirty High-DPI Images

While working on this page, 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, 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:

@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 at webkit.org.

2 Responses to “Quick and Dirty High-DPI Images”

  1. I enjoy what you guys tend to be up too. This kind of clever work and exposure! Keep up the fantastic works guys I’ve incorporated you guys to blogroll.

  2. Following generating a statistical model for Facebook likes, the researchers could differentiate involving an African-American and white American user with 95 percent accuracy, a Republican from a Democrat with 85 percent accuracy, and guess your partnership status with a 65 % accuracy. I suppose my online adoration of TSwift, “Crying naked in the bathroom listening to Adele” and “Hot Dog Eating Contests” genuinely does provides me away as a single lady? facebook likes buy targeted (http://video2.hi-sound.ru/users/T76T)

Leave a Reply