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

[Tim van Oostrom]

I'm also late in this discussion but followed it globally. Maybe a 
structure like Microdata's itemref="" is an option too.

You could do:

<img src="default.jpg" alt="An image" srcref="placeholder img1-a img1-b 
img1-c">
<img src="default2.jpg" alt="Another image" srcref="placeholder img2-a 
img2-b img2-c">

<src href="placeholder.jpg" id="placeholder" media="max-width:320px">

<src href="small.jpg" id="img1-a" media="min-width:320px">
<src href="medium.jpg" id="img1-b" media="min-width:720px">
<src href="large.jpg" id="img1-c" media="min-width:1200px">

<src href="small2.jpg" id="img2-a" media="min-width:320px">
<src href="medium2.jpg" id="img2-b" media="min-width:720px">
<src href="large2.jpg" id="img2-c" media="min-width:1200px">

This gives you the ability to share the sources with multiple img 
elements. For example when you have a placeholder image for devices that 
you do not support.

Tim

> On Feb 8, 2012, at 7:29 PM, Jason Grigsby wrote:
>
> On Feb 8, 2012, at 8:54 AM, FOUSHEE, SEAN wrote:
>
> I'm late to this discussion so pardon me if this has already been discussed, by using the same logic as the<srclist>  why not just create<figlist>  to go along with the<figure>  element?
>
>
> When a bunch of us discussed this on an etherpad a while back, we ruled<figure>  out because:
>
> * Completely redefines semantics and content model of an already new element.
> * Current use includes multiple images
> * Current use includes non-images like code samples, video, etc.
>
> https://etherpad.mozilla.org/responsive-assets
>
> Of course, this doesn’t mean we were right about ruling it out. :-)
>
> -Jason
>
>
> Thanks for the clarification.
>
> The fact that the<figure>  element is structured to allow us to define multiple images seems like a good fit for this approach, especially since it's going to end up using the new tag(s) anyway if the page needs to group multiple responsive images together:
>
> <figure>
> <img src="default1.jpg" alt="" list="firstimage">
> <srclist id="firstimage">
> <source href="small1.jpg" media="min-width:320px">
> <source href="medium1.jpg" media="min-width:720px">
> <source href="fullsize1.jpg" media="min-width:1200px">
> </srclist>
> <img src="default2.jpg" alt="" list="secondimage">
> <srclist id="secondimage">
> <source href="small2.jpg" media="min-width:320px">
> <source href="medium2.jpg" media="min-width:720px">
> <source href="fullsize2.jpg" media="min-width:1200px">
> </srclist>
> <!-- etc etc etc -->
> <figcaption>Multiple responsive images grouped in the figure element</figcaption>
> </figure>
>
> But I agree with David that this feels very bloated, and honestly I'd hate to think of the things my students would throw at me if I were to present this as the approach to handle responsive images in HTML. It's bad enough we have to encode and serve up at least three different video formats with a possible fallback just to utilize the<video>  tag, but to do this for every image would be a nightmare.
>
> Sean Fousheé
> Instructor, Graphic Communications
> Tarrant County College, NE Campus
> 828 Harwood Rd.
> Hurst, TX 76054
> (817) 515.6596
> sean.foushee at tccd.edu<mailto:sean.foushee at tccd.edu>
>
>