Apple's Retina-ready Web update reveals the pixels behind the magic

13.03.2012
If you know anything about the new iPad, it's probably that the third-generation model of Apple's tablet will sport a so-called --a screen with pixel density so high that the human eye can't discern the individual dots in normal use. Old iPad apps will look fine on the new iPad, but only apps that update with Retina-quality imagery can fully exploit the updated screen. Apple already updated almost all of its own apps, and now it's updating its website with Retina-ready graphics, too.

reported Tuesday on some JavaScript trickery you can use to preview a version of with the company's Retina imagery. (Of course, if you're using an actual third-generation iPad to visit Apple's site, you'll see the Retina-friendly alternative automatically.)

The JavaScript code provided by AppleInsider simply replaces all the images on Apple's website with alternative Retina images instead. Apple's higher-quality images offer a clear picture of precisely what's involved in readying Retina-ready images.

At this writing, Apple's homepage sports the faux word "Resolutionary"--text rendered in graphic form--along with an image of a hand touching the new iPad. Before you run AppleInsider's code, the default webpage uses a 471 by 93 pixel for the Resolutionary image, which weighs in at about 7kb. After you run the code, Apple substitutes a version of the image that doubles its width and height, yielding a 942 by 186 pixel image that weighs in at about 18kb.

The large iPad graphic starts out much larger, so its Retina version is, frankly, enormous. The original image measures 1454 by 605 pixels and 113kb; the Retina version is a whopping 2908 by 1210 pixels and 360kb. The Resolutionary image is about 2.5 times larger in its Retina version, and the hand and iPad image is more than 3 times larger. It's those Retina-friendly increased image sizes that , but in this case the Web images wouldn't gobble up your iPad's remaining space. Those images could, however, gobble up plenty of extra bandwidth--which could be quite significant if you're using your new iPad's cellular connection.

When Apple's website loads those larger Retina images, it still squeezes them into the space taken by the smaller versions. That is, the 2908 pixel wide iPad image is only displayed by default on the iPad as 1454 pixels wide. The doubling of the image empowers the Retina display to work its visual magic.