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

[Mathew Marquis]

> > Am 25.01.2012 16:39 schrieb Matthew Wilcox:
> >
> >> It's also worth noting another use case for this being in mark-up and not
> >> just server-negotiated rescaling of a single image:
> >>
> >> Imagine a profile photo on an About page. At large sizes you want to use a
> >> full body shot, at smaller sizes you need to retain what's important but
> >> no
> >> longer clear at small scales: a recognisable face - so you substiture a
> >> head and shoulders shot.
> >>
> >> That's a strong use case where the semantic meaning of the content is the
> >> same but requires a different resource to be properly conveyed at
> >> differing
> >> scales.
> >>
> >
> > This use case shows some kind of consistency issue: The printed version of
> > a page might match a different media query, and thus use a different image.
> > If the images have different contents, this can result in a confusing user
> > experience.
> >
> > In order to work around this, UAs might want to keep the first image
> > loaded, when the content is used for a different type of media, such as
> > print or PDF output. (That could also be the case for changes of window
> > size.)
> >
> 
> I think Matthew has it about right with the about page example. I think as
> long as the user can recognise that it's the same image (albeit
> cropped/zoomed in some way to adapt to the media) then we're okay.

I’m late to the conversation! It looks like a bunch of us have been thinking in parallel with some of the folks in this thread--we've reached many of the same conclusions you guys have, and ended up with pseudo-markup nearly identical to yours—albeit under the working name <picture>. Our brainstorming (be warned, some of it ain’t pretty) can be found here: https://etherpad.mozilla.org/responsive-assets

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.

I'd love to start this conversation up again, so we can talk through any potential issues!