W3C home > Mailing lists > Public > whatwg@whatwg.org > February 2012

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

From: Mathew Marquis <mat@matmarquis.com>
Date: Mon, 6 Feb 2012 16:23:37 -0500
Message-ID: <DA1E1A04-11E4-4EB7-B061-2DBE66041D0C@matmarquis.com>
> > 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!
Received on Monday, 6 February 2012 13:23:37 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:39 UTC