[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