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

Tue Nov 12 09:22:12 PST 2013

Am 12.11.2013 17:48 schrieb Markus Lanthaler:
> On Tuesday, November 12, 2013 5:04 PM, Markus Ernst wrote:
>>> We could define some ways to list set of images that could be
>> replaced for a given img element in HTML and then let CSS pick which
>> one to use for example.
>>
>> <style type="text/css">
>> @media (min-width: 480px) {
>>     img.artdirected {
>>       use-src: 1;
>>     }
>> }
>> @media (min-width: 600px) {
>>     img.artdirected {
>>       use-src: 2;
>>     }
>> }
>> </style>
>>
>> <img class="artdirected"
>>        src="small.jpg"
>>        src-1="medium.jpg"
>>        src-2="large.jpg"
>>        alt="Alternative text">
>>
>> [...]
>>
>> This may be technically incorrect or incomplete; it's just a sketch of
>> the idea, based on my conviction that sources belong into the <img>
>> element, while MQs should be kept centralised.
>
> Using URL templates this could be simplified even further. For example by
> extending the meta element to allow it to set some form of global
> configuration variables it would be possible to define images using a simple
> naming convention:
>
> <head>
>    <meta var="img-size" content="small">
>    <meta var="img-size" content="medium" media="min-width: 480px">
>    <meta var="img-size" content="large" media="min-width: 900px">
> </head>
> <body>
>    <img src="teaser-fallback.jpg" src-t="teaser-{img-size}.jpg">
>    <img src="profile-fallback.jpg" src-t="profile-{img-size}.jpg">
> </body>
>
> If a variable is set multiple times as in the case above, the latest
> assignment wins. As soon as the closing head tag is encountered, the value
> of all variables is known and they effectively become constants that can be
> used to fill the URL templates of the images in the document's body.

That looks really cool to me. Is there any reason why this kind of 
approach is not part of the discussion?