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

[Anselm Hannemann]

Am 07.02.2012 um 11:16 schrieb Matthew Wilcox:

> 2012/2/7 Anselm Hannemann – Novolo Designagentur <anselm at novolo.de>
> Ashley,
> 
> so you think about the <img> element attributes like I proposed?
> <img src="myimage_xs.jpg" media-xs="(min-device-width:320px and max-device-width:640px)" media-src-xs="myimage_xs.jpg" media-m="(min-device-width:640px and max-device-width:1024px)" media-src-m="myimage_m.jpg" media-xl="(min-device-width:1024px)" media-src-xl="myimage_xsl.jpg">
> (View as gist: https://gist.github.com/1158855)
> 
> This, to me, is WAY too over-wrought to be useful. Readability is a feature of HTML and this kind of kills that a little - it looks like something some automated solution would spit out, not what a human would author. I can't imagine it getting much uptake with web developers for that reason alone (I put my hand up, I'm a member of that fickle bunch).

Yeah this is indeed true. I just want this as an option which is a semantically valid approach. But you're totally right at readability.

> To me this makes most sense /from an author perspective/ (I make no claims as to how practical this really is):
> 
> <picture>
>   <src href="small.jpg" alt="a headshot of Bob Flemming" media="min-width:320" />
>   <src href="medium.jpg" alt="a head and shoulders shot of Bob Flemming" media="min-width:480" />
>   <src href="large.jpg" alt="a full body portrait of Bob Flemming" media="min-width:640" />
> 
>   <!-- fallback for old browsers with no support for picture element) -->
>   <img src="default.jpg" alt="A photo of Bob Flemming" />
> </picture>
> 
> The reason being:
> 
> * it's easy to read
> * it uses familiar element structures and properties
> * it allows us to adjust to any given media requirement, not just screen size (you could query bandwidth with this syntax, though I contest bandwidth is the domain of server side adaption rather than client side)

This is a good solution except the fallback img element would be twice loaded in your case which is not good.
There should be the img element containing the standard (normal) size and src elements to add diff. other resolutions. With that the browser won't load the resource twice.