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

[Ashley Sheridan]

On Tue, 2012-02-07 at 10:49 +0100, Anselm Hannemann – Novolo
Designagentur wrote:

> 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)
> 
> Or did I misunderstood you?
> -Anselm
> 
> Am 07.02.2012 um 10:45 schrieb Ashley Sheridan:
> 
> > On Mon, 2012-02-06 at 23:15 +0000, Bjartur Thorlacius wrote:
> > 
> >> On Mon, 06 Feb 2012 21:23:37 -0000, Mathew Marquis <mat at matmarquis.com>  
> >> wrote:
> >>> I recently published a sum-up of our thinking at A List Apart (  
> >>> http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/  
> >>> )—in short, using the <video> markup pattern as the inspiration, with  
> >>> the use of media attributes on the <source> elements to determine the  
> >>> rendered source, and the inclusion of an <img>--ideally a smaller image,  
> >>> to account for the lowest-common-denominator--as a fallback similar to  
> >>> the way Flash or an image might be used as a <video> fallback.
> >>> 
> >> Why not use a media attribute of <object>? That way you should get media  
> >> type disambiguation for free.
> > 
> > 
> > The main problem I see with that is that the <object> tag doesn't have
> > the same accessibility attributes, so you'd effectively lock out a lot
> > of people using browsers that don't understand the context of the tag in
> > this case. I think the better way is to add something to the <img> tag
> > as you'd still have full backwards compatibility.
> > 
> > -- 
> > Thanks,
> > Ash
> > http://www.ashleysheridan.co.uk
> > 
> > 
> 


Yeah, that seems along the right lines to me, although I'd probably not
use the media-xs type attributes, and just instead use one attribute
with comma delimited value parameters like:

<img src="image_for_old_browsers.jpg" media-src="min-width: 1300px and
max-width: 1600px url(huge_image.jpg), min-width: 300px and max-width:
600px url(small_image.jpg)"/>

It does look ugly, but I think it's easier to only need to remember one
attribute rather than a bunch; the fewer changes required for this to
work would surely be better?

-- 
Thanks,
Ash
http://www.ashleysheridan.co.uk