W3C home > Mailing lists > Public > whatwg@whatwg.org > November 2013

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Fri, 15 Nov 2013 15:23:04 -0800
Message-ID: <CAAWBYDD51vmhjVsELrsYsRiNZse-H=JUDtjkAEUMMH-=z+BwAg@mail.gmail.com>
To: Bruno Racineux <bruno@hexanet.net>
Cc: Markus Ernst <derernst@gmx.ch>, Ryosuke Niwa <rniwa@apple.com>, whatwg <whatwg@lists.whatwg.org>, Markus Lanthaler <markus.lanthaler@gmx.net>, Christian Biesinger <cbiesinger@google.com>, "Jukka K. Korpela" <jkorpela@cs.tut.fi>, Adam Barth <w3c@adambarth.com>, John Mellor <johnme@google.com>
On Fri, Nov 15, 2013 at 3:02 PM, Bruno Racineux <bruno@hexanet.net> wrote:
>  On 11/15/13 1:28 PM, "Tab Atkins Jr." <jackalmage@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@media('smallicon') 128px;
>              set-2@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
Received on Friday, 15 November 2013 23:23:48 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 17:00:14 UTC