The new iPad launch caused a flurry of activity as web developers are trying to get to get grips with the Retina display.

Responsive Images: How they Almost Worked and What We Need

From A List Apart, well worth reading as always. The article was written by a developer on the groundbreaking Boston Globe responsive redesign team.

Pragmatic responsive design

A very good slideshow from Stephanie Rieger. She suggests using a small number of stylesheets and media queries targeting max-device-width (rather than device-pixel-ratio). then having in-line media queries in individual stylesheet like

Because Android hi-DPI devices return window.devicePixelRatio > 1, to correctly detect Retina make sure the value is >= 2. Also worth using image@2x.png naming convention because it is the standard used in native iOS development.

retina.js

“retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays”

How Apple.com will serve retina images to new iPads

Cloud four analyses the approach Apple themselves take on their website. “Screw the bandwidth” seems to be their approach.

Responsive IMGs — Part 1

From the same site, some thoughts and techniques.

Image-y nation

Jeremy Keith uses a technique similar to the ancient lowsrc. I like this approach. Here’s the script

W3C Responsive Images Community Group

an attempt to bring some sanity to the matter.