http://www.w3.org/community/respimg/

I have attached a sample implementation that works off a polyfill for something roughly matching the HTML working draft. This only works on v10.

I will now leave this issue as is. People will be able to use the sample (perhaps tweaked), and probably in a few years the spec will be finished and browser support for responsive images will have caught up with that spec.

We are implementing multi-dpi support (retina support) for lots of default theme images, as well as attachment thumbnails.

The standards approach to this is highly contentious, as there are 6 ways different people want to do it:
- picture element
- srcn
- srcset
- interlaced high resolution images
- server awareness of which image to serve via HTTP headers
- multiple image sizes in a single file

We are implementing srcset, as Safari has this (upcoming), Chrome has this (upcoming) and the HTML5 living document has it. Unfortunately the main disagreement now is that Mozilla is backing srcn, but they aren't a major high-dpi target platform and haven't implemented it yet anyway.

I don't think many people are advocating for 'picture' now, except as a more verbose alternative on top of something else.

HTML5 arguing for srcset:
http://lists.w3.org/Archives/Public/public-whatwg-archive/2012May/0247.html

Mozilla arguing for srcn:
http://www.w3.org/community/respimg/2013/10/14/reasoning-behind-srcn-replacing-srcset-and-picture/

srcn and srcset are not very different, so if things did flip around, we could adjust our solution. I am hoping that people can agree on a compromise or set of fully supported alternatives, fragmentation of vendor support would be a huge pain.

srcset is not in mainline Safari or Chrome yet, but will be soon. So this is all future planning still.

On the CSS end, it's not a problem - we can just use media queries.