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

[Mathew Marquis]

On Feb 9, 2012, at 6:36 AM, Jordan Dobson <jordandobson at gmail.com> wrote:

> Tim,
> 
> Very good suggestion. This would allow us to keep our markup clean and
> stash these extra references elsewhere in the code as we see fit.
> 
> +1
> 
> -- 
> Jordan Dobson • Designer / Developer • 425-444-8014 • JordanDobson.com
> 
> On Thu, Feb 9, 2012 at 3:11 AM, Tim van Oostrom <tim at depulz.nl> wrote:
> 
>> 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.
>> 

Unfortunately we were informed early on that it was very unlikely we’d ever get a vendor to sign off on a pattern that involves “looking ahead” on an img tag. Modifying the behavior of img itself doesn’t sound viable.

I worry that we’re all getting hung up on throwing ideas around—which is understandable for sure, and this is some great conversation. 

I think the bottom line is that we’re all in agreement on what’s needed, exact implementation aside: a markup-based means of delivering alternate image sources based on device capabilities, to prevent wasted bandwidth and optimize display on screen and in print. From an accessibility standpoint, it should at the very least equal img’s alt tag. For non-supporting browsers, fallback content should be displayed.

If we all agree on these key points—and that there’s a clear need and an obvious benefit to the users—I should think we’re ready to carry this conversation forward and start ironing out the technical details elsewhere, alongside the vendors.