[whatwg] add html-attribute for "responsive images"

[Anselm Hannemann - Novolo Designagentur]

Hi all,

Paul Irish said I should mention my problems here. So I will:

As we now have the possibility of creating fluid and responsive layouts in several ways we have a problem with images.
There's currently no good feature to implement something like responsive images which adapt to the different device-resolutions. We only can implement one image with one resolution scaling-up and down.
Of course the best solution would be to have a file format supporting this feature by offering diff. quality like .sid format does. But it's very unlikely to have such a feature in the next few years.
So I thought of a simple html-attribute to work with media-queries and something like "media-size-sources" to provide different images fitting to the device-resolution. New browsers can read the new attributes but even old browsers degrade gracefully with the basic src attrobute.
I shared the code in a gist here: https://gist.github.com/1158855 and will write it down here, too:

<!-- backwards compatible solution -->
<!-- the browser should read media-query and then download the right file for the actual screen size -->
<img src="http://cdn.url.com/img/myimage_xs.jpg" media-xs="(min-device-width:320px and max-device-width:640px)" media-src-xs="http://cdn.url.com/img/myimage_xs.jpg"  media-m="(min-device-width:640px and max-device-width:1024px)" media-src-m="http://cdn.url.com/img/myimage_m.jpg"  media-xl="(min-device-width:1024px)" media-src-xl="http://cdn.url.com/img/myimage_xsl.jpg" />

Tried several other ways, too, (you can see in versions) but this seems to be the best. What do you think about providing a way to use responsive media through media-queries? For now there are only some JS-Cookie solutions which are not a good approach and are very unflexible.

kindest regards,
-Anselm