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