Anyone who (like me!) got a new iPad over the weekend can tell you two things about the new Retina screen:
1. It looks amazing.
2. It looks so amazing, in fact, that its crispness paradoxically makes anything non-crisp look bad.
Because the new screen contains four times the number of pixels in the same space, web graphics that look fine on your laptop can look a little fuzzy. You see this most within apps, where developers will have to upgrade their graphics to new Retina-ready versions. But what to do on the web?
One solution — the one Cloud Four’s Jason Grigsby details here, and the one Apple itself is using on its webpages — is to build in some logic that checks if the page is being viewed on a new iPad. If so, a higher-res image is sent. The problem is it’s sent alongside the smaller image, which really ramps up the page weight — in the case of Apple’s home page, it goes from 500K to 2.1MB when viewed on a new iPad.
In other words, Apple hasn’t yet found a bandwidth-friendly solution to the responsive images question — one that a lot of news sites will be increasingly interested in as more of their audience shifts to mobile or Retinaesque screens.
Of note: Top Apple blogger John Gruber recently increased the size of his header graphic to 3x actual display size (resized in html). But Gruber only serves one graphic on his minimalist page; that strategy is less likely to work well on, say, a news site’s homepage.
— Joshua Benton