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

[Matthew Wilcox]

@Mathew Marquis - that was a good article, I was so pleased to see the
thinking behind it getting some attention at last! I've been trying to push
this idea since launching adaptive-images.com , and a number of people have
come up with the same client-side quasi-solution independently. Bruce
Lawson's mark-up suggestion was the first example I'm aware of and I've
linked to it on the list before.


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).

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)