> > 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!