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

Fri Nov 15 15:02:16 PST 2013

On 11/13/13 5:52 AM, "John Mellor" <johnme at google.com> wrote:

><style>
>@media (max-width: 19.99em) {
>    .artdirected { content: replaced image-set(128px;
>attr(srcs-smallicon));
>}
>}
>@media (min-width: 20em) {
>    .artdirected { content: replaced image-set(100% (30em) 50% (50em) 33%;
>attr(srcs-flexwidth)); }
>}
You have a repeat of MQs here.

></style>
>...
><img class="artdirected" src="fallback.jpg"
>     srcs-smallicon="i64.jpg 64, i128.jpg 128, i256.jpg 256"
>     srcs-flexwidth="160.jpg 160, 320.jpg 320, 640.jpg 640, 1280.jpg 1280,
>2560.jpg 2560">

Just to make it clear. My notion of 'imgset' here was in part an "image
set", much more that it is yet-another "set image with multiple sources".

The above doesn't really solve the bloat. Whether it's srcset or src-N the
page's source length of heavy image sites will be insane... Especially if
not gzipped.

The new syntax has got to be DRY. It maybe doesn't have the ONLY way, but
we surely need an non-repeat approach as part of the solution.

 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...

This isn't 1998 writing static pages anymore. Website are built on
frameworks. Most of the time, Frameworks build ALL their images in sets of
sizes with a simple common pattern. Those cases should apply to a
comprehensive RespImg solution. This is what I am trying to solve here.

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%">

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 is really as big as the DOM ought to get AFAIAC.

-BR