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

[Adam Barth]

On Tue, Nov 12, 2013 at 10:40 AM, Tab Atkins Jr. <jackalmage at gmail.com> wrote:
> On Tue, Nov 12, 2013 at 9:50 AM, Adam Barth <w3c at adambarth.com> wrote:
>> We might even be able to make this work without inventing anything:
>>
>> <style type="text/css">
>> @media (min-width: 480px) {
>>   .artdirected {
>>     width: 30px;
>>     height: 30px;
>>     background-image: image-set(url(small.png) 1x, url(small-hires.png) 2x);
>>  }
>> }
>> @media (min-width: 600px) {
>>   .artdirected {
>>     width: 60px;
>>     height: 60px;
>>     background-image: image-set(url(large.png) 1x, url(large-hires.png) 2x);
>>  }
>> }
>> </style>
>> <div class="artdirected"></div>
>>
>> All the information is there.  We just need to teach the preload
>> scanner to parse a subset of CSS and match a subset of selectors.  If
>> you stay within the "preloadable" subset, then your images will be
>> loaded by the preload scanner.  Otherwise, they'll just be loaded
>> normally.
>>
>> What's most attractive to me about this approach is that it doesn't
>> require inventing anything new, which means the compatibility story
>> for older user agents is solid.  You don't need a polyfill or anything
>> like that.
>
> If you legitimately think this will work, I'm for it.  If you just
> think it's a vague "maybe", I'd like to continue pursuing new syntax.

The hard part is deciding what to put in the optimized subset.  We
already parse media queries in the preload scanner to find imported
stylesheets to load.  We probably won't be able to support every media
query under the sun, but we could support maybe min-width, min-height,
and min-device-pixel-ratio (or whatever you think is best along these
lines).

For selector matching, we wouldn't be able to support anything that
needs to understand the structure of the tree (e.g., descendant
selectors or sibling selectors).  I'd probably start with just single
class and id selectors.

In case it wasn't clear from the above, we wouldn't preload the image
until we'd encountered the div with the appropriate class name.  When
scanning that start tag token, we'd simulate CSS selector matching in
the preload scanner to see if we've understood any rules that match.

None of the above is all that difficult, and it's probably something
we should do anyway to improve image preloading across the whole web.

Adam