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

Tue Nov 12 08:48:07 PST 2013

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.

--
Markus Lanthaler
@markuslanthaler