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

[Markus Lanthaler]

On Saturday, November 16, 2013 12:11 AM, Bruno Racineux
> On 11/15/13 2:50 PM, "Tab Atkins Jr." <jackalmage at gmail.com> wrote:
> > There is no compaction
> > scheme that helps here.  (Unless you're trying for one of the
> > url-template ones, and we don't want to go there.)
> 
> Why not? I'd like to hear the argument against what I am proposing.
> Either a regex or a template approach.

I would like to hear that as well. I think it's still the simplest and most
concise solution. Using Tab's examples to illustrate it and a variation of
the URL template solution I proposed a little while ago:

On Friday, November 15, 2013 9:31 PM, Tab Atkins Jr. wrote:
> Use-case 1: Variable density.
> 
> src-N
> <img src-1="foo.5 .5x, foo1 1x, foo2 2x, foo3 3x" src="foo1">
> 
> PreloaderCSS
> <img src="foo1" id="foo">
> <style>
> #foo { content: replaced image-set("foo.5" .5x, "foo1" 1x, "foo2" 2x,
> "foo3 3x"); }
> </style>

I'm using different image names to not confuse anyone with too many numbers

<meta var="thumb-size" content="size-set(small .5x, orig 1x, large 2x, xxl
3x)">

<img src="thumb-fallback.jpg" src-t="thumb-{thumb-size}.jpg">

I used "size-set" in lack of a better name. The idea is to allow a number of
functions to set the value of a variable.


> Use-case 2: Art-direction (slightly different images based on layout
> breakpoints)
> 
> src-N
> <img src-1="(width < 30em) foo.5 .5x, foo1 1x, foo2 2x, foo3 3x"
>      src-2="bar.5 .5x, bar1 1x, bar2 2x, bar3 3x"
>      src="foo1">
> 
> PreloaderCSS
> <img src="foo1" id="foo">
> <style>
> @media (width < 30em) { #foo { content: replaced image-set("foo.5"
> .5x, "foo1" 1x, "foo2" 2x, "foo3 3x"); } }
> @media (width >= 30em) { #foo { content: replaced image-set("bar.5"
> .5x, "bar1" 1x, "bar2" 2x, "bar3 3x"); } }
> </style>

<meta var="thumb-size" content="size-set(mob-s .5x, mob-o 1x, mob-l 2x,
mob-xxl 3x)">
<meta var="thumb-size" content="size-set(def-s .5x, def-o 1x, def-l 2x,
def-xxl 3x)" media="min-width: 30em">

<img src="thumb-fallback.jpg" src-t="thumb-{thumb-size}.jpg">


> Use-case 3: Variable-sized images
> 
> src-N
> <img src-1="100% (30em) 50% (50em) 33%; foo200 200, foo400 400, foo800
> 800, foo1200 1200, foo1600 1600" src="foo1">
> 
> PreloaderCSS
> <img src="foo1" id="foo">
> <style>
> #foo { content: replaced image-set("foo200" 200, "foo400" 400,
> "foo800" 800, "foo1200" 1200, "foo1600" 1600); }
> @media (width < 30em) { #foo { width: 100vw; }}
> @media (30em <= width < 50em) { #foo { width: 50vw; }}
> @media (width >= 50em) { #foo { width: 33vw; }}
> </style>

<meta var="thumb-size" content="size-set(100% (30em) 50% (50em) 33%;
    xs 200, s 400, def 800, xl 1200, xxl 1600)">

<img src="thumb-fallback.jpg" src-t="thumb-{thumb-size}.jpg">

I think this is by far the most elegant solution and combines the elegance
of src-n by offloading the burden of the calculations to the browser with
the conciseness a templating approach is able to achieve. I expect that only
very few authors are going to create all the image variations by hand. In
the vast majority of the cases this will be done automatically by the
server. It's simple enough to rewrite the image tags to include a "src-t"
following some convention and adding those meta tags to the header.

I would really like to hear some arguments as to why URL templates are no
viable (or at least not a preferable) solution.

Cheers,
Markus


--
Markus Lanthaler
@markuslanthaler