Retina display and more than single pixel density allows the web to finally surpass the print world and produce content that is even more detailed than high definition television.
Foundation, one of our favourite responsive design frameworks, has an almost unintended side effect for retina displays. Because Foundation won’t allow images to be larger than their container (it scales them down to fit the grid) many images are already being scaled down. On a standard display that detail is lost when we scale — on newer iPads and now the new MBP that detail will no longer be lost, meaning we could embed very large images and get all the detail from them (at a huge cost in file size, natch).
Likewise, background images can be sized using the background-size property, and you could use very large images that are scaled to 50% size on newer devices and browsers. This is one way of actually implementing a true responsive images solution, albeit with some major drawbacks. Set a background image at a regular resolution, then use a media query that targets a pixel ratio of 2 to load a larger image and scale its size down 50%. Voila, a very large image that only loads on a retina screen (of course, it’ll load on an iPad 3’s data connection too).
