The new iPad's resolutionary Retina display looks cool, but, on the other hand, it terrifies designers in the Web industry. The new iPad is the first HiDPI device which works well for browsing PC websites. All images on the Web must be republished to enhance its experience on the new iPad and other upcoming HiDPI devices.
Apple's website itself is also ongoing to support HiDPI displays. Many image files on the website have a couple resolutions of normal one and doubled one which has "_2x" suffix. Here is a sample:
Traditional resolution version: 1454 x 605 pixel
http://images.apple.com/home/images/ipad_hero.jpg
High resolution version: 2908 x 1210 pixel (doubled!)
http://images.apple.com/home/images/ipad_hero_2x.jpg
You could try the future with HiDPI on your current Mac by enabling it with Quartz Debug.app shipped with Graphics Tools for Xcode. Apple.com website would show "_2x" images when HiDPI is enabled on your Mac.
AUTO DETECTION
Check window.devicePixelRatio property to detect current display resolution by JavaScript.
Apple's website itself is also ongoing to support HiDPI displays. Many image files on the website have a couple resolutions of normal one and doubled one which has "_2x" suffix. Here is a sample:
Traditional resolution version: 1454 x 605 pixel
http://images.apple.com/home/images/ipad_hero.jpg
High resolution version: 2908 x 1210 pixel (doubled!)
http://images.apple.com/home/images/ipad_hero_2x.jpg
Some images on the website still not have "_2x" version at this time, however. Any image files which has "_2x" version are automatically and progressively replaced by image_replacer.js according to the current display resolution setting.
TRY IT NOW ON YOUR MAC
You could try the future with HiDPI on your current Mac by enabling it with Quartz Debug.app shipped with Graphics Tools for Xcode. Apple.com website would show "_2x" images when HiDPI is enabled on your Mac.
Check window.devicePixelRatio property to detect current display resolution by JavaScript.