[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

[Markus Ernst]

Am 12.11.2013 14:33 schrieb Ryosuke Niwa:
> On Nov 12, 2013, at 4:11 PM, Adam Barth <w3c at adambarth.com> wrote:
>> On Tue, Nov 12, 2013 at 12:08 AM, Jukka K. Korpela <jkorpela at cs.tut.fi> wrote:
>>> 2013-11-12 9:58, Adam Barth wrote:
>>>> Unfortunately, we can't add new tags to head.  If the parser sees a
>>>> tag it doesn't recognize in the head, it creates a fake body tag and
>>>> pushes the tag down into the body.
>>>
>>> But you could use <style type=text/foobar>...</style>, with a suitable value
>>> for foobar, like x-imgset. This could even be handled with a polyfill in old
>>> browsers (JavaScript code that reads such elements and interprets their
>>> content).
>>
>> Maybe there's a CSS solution to this problem?  Do we just need to make
>> the preload scanner smarter about interpreting CSS?
>
> In fact, I’d argue that CSS will be a better fit to address art direction use case since it’s purely presentational.
>
> We could define some ways to list set of images that could be replaced for a given img element in HTML and then let CSS pick which one to use for example.

<style type="text/css">
@media (min-width: 480px) {
   img.artdirected {
     use-src: 1;
   }
}
@media (min-width: 600px) {
   img.artdirected {
     use-src: 2;
   }
}
</style>

<img class="artdirected"
      src="small.jpg"
      src-1="medium.jpg"
      src-2="large.jpg"
      alt="Alternative text">

I assume that in order to allow preloading, some mechanism would have to 
be added to tell the UA that this part of the CSS has to be evaluated 
before downloading starts.

(I personnally would prefer author-defined keywords instead of numbers 
for the identification of sources.)

This may be technically incorrect or incomplete; it's just a sketch of 
the idea, based on my conviction that sources belong into the <img> 
element, while MQs should be kept centralised.