[whatwg] <picture> redux

[Timothy Hatcher]

On Nov 20, 2013, at 2:37 PM, Markus Ernst <derernst at gmx.ch> wrote:

> Something that just came to my mind: Unlike srcset and src-N, <picture> has the power to support MQs beyond viewport width:
> 
> <picture>
>  <source media="screen" src=...>
>  <source media="print" src=...>
>  <img src=...>
> </picture>
> 
> The UA will have to download both sources, or printing will be delayed. Is this a problem?


Building on this idea:

I have been thinking how the art direction use case is really limited to the view port matches. (I understand that is because of preloader limitations.) Ignoring the preloader for a minute, I can imagine other cases where art direction can be useful based off of arbitrary CSS selector matches. Then JavaScript could be in control of the source selection by setting classes — no JS API required.

The idea would be to have named sources that can be chosen by a property in CSS on the picture. If the same name is used by multiple sources, the first source to match based on the other source attributes (media, sizes, etc.) is used. Sources with no name would be used as the fallback/default.

This approach to script based art direction can be done today with multiple <img> that are hidden and shown based on the same selectors. But using <picture> and <source> this way should give more control over what images actually load and don't load (ignoring preloader).

The preloader would likely skip any source with a name since we don't know if the source is needed yet. That could cause double loading, so an attribute like defer might be needed to prevent defaults from being preloaded.

Potential syntax:

<picture>
	<source name="foo" src="foo.jpg">
	<source name="bar" srcset="bar.jpg 1x, bar at 2x.jpg 2x" media="screen">
	<source name="bar" src="bar-print.jpg" media="print">
	<source defer src="default.jpg">
	<img>
</picture>

CSS syntax:

picture.hero {
	source: none; /* Default */
}

body.art-directed-one picture.hero {
	source: foo;
}

body.art-direction-two picture.hero {
	source: baz;
}

or

picture.hero {
	content: none; /* Default */
}

body.art-directed-one picture.hero {
	content: replaced source(foo);
}

body.art-direction-two picture.hero {
	content: replaced source(baz);
}

(Not sure if replaced would be required there or not.)

— Timothy Hatcher