[whatwg] add html-attribute for "responsive images"
mail at matthewwilcox.com
Tue Feb 7 02:16:08 PST 2012
@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>
> 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)"
> (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):
<src href="small.jpg" alt="a headshot of Bob Flemming"
<src href="medium.jpg" alt="a head and shoulders shot of Bob Flemming"
<src href="large.jpg" alt="a full body portrait of Bob Flemming"
<!-- fallback for old browsers with no support for picture element) -->
<img src="default.jpg" alt="A photo of Bob Flemming" />
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)
More information about the whatwg