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

Fri Nov 15 15:23:04 PST 2013

On Fri, Nov 15, 2013 at 3:02 PM, Bruno Racineux <bruno at hexanet.net> wrote:
>  On 11/15/13 1:28 PM, "Tab Atkins Jr." <jackalmage at gmail.com> wrote:
>>Why would you be using classes?  Most images that you need to make
>>responsive are one-off content images, like the big picture in
>><http://www.bostonglobe.com/magazine/2013/11/10> (and maybe the
>>picture in the sidebar).
>
> Tab, you are seriously worrying me with that argument. What about a full
> gallery of images sharing the same pattern. If you guys think that
> responsive images are only small single isolated unique sets of images. I
> don't think we are looking at the same sets of use cases...
>
> Imagine a gallery page with 20+ images using the exact same breakpoint
> model. Do you really want to repeat the srcs for every single of those
> images. I don't know about perversion of the web. But it looks to me like
> no one is picturing the impending bloat for these use cases...

I don't understand.  You don't "repeat" any sources, you specify them
once.  There's just a batch of sources per image.  Can't make this
more compact.

The repetition is in the MQs, and that's solveable quite directly and
generically with custom MQs.

> Here is an update along my initial model with John's example, and
> custom media-vars (with the syntax we discussed on the w3cstyle list):
>
> <head>
> <style>
>  @media-var 'smallicon' (max-width: 19.99em);
>  @media-var 'flexwidth' (min-width: 20em);
>  @imgset 'set-1' (64 64 1x, 128 128 1x, 256 256 1x 128 2x 64 3x), regexp();
>  @imgset 'set-2' (160 160, 320 320, 640 640, 1280 1280), regexp();
> </style>
> </head>
>
> <img src="fallback.jpg"
>      imgset="set-1 at media('smallicon') 128px;
>              set-2 at media('flexwidth') 100% (30em) 50% (50em) 33%">

Where are the source urls?  Are they supposed to be those numbers in
@imgset?  What does regexp() mean?  I don't understand your use of
commas in @imgset.

> It does not require the preloader to have full css parser. It only has to
> parse @media and the new @imgset CSS subset language, using a similar
> syntax to @media. And I believe if offer an easy way to polyfill this.

This isn't as terrible for polyfilling, since it's easier to spot
things and extract them with a regex.  I find it less understandable,
though this might be because you haven't explained most of your syntax
and possibly have some syntax errors.

~TJ