Notional responsive image syntax

by ian_smithz

HTML

<!--
This is based on the meta variables proposal, but also borrows from picture, srcset, and image maps.

The idea is to introduce a srcset attribute on img elements, which refers to a unique srcset element. This element is not rendered. It contains a number of source elements which can be used to apply media queries. In its simplest state, it would replace the src attribute of the img with the one in the source element that matches the query. This is a like-for-like replacement:
-->

<img src=”wevs.png” srcset=”#blah1”>

<srcset id=”blah1”>
  <source src=”wevs-small.png” media=”max-width: 480px”>
  <source src=”wevs-large.png” media=”min-width: 481px”>
</srcset>

<!--
It can be expanded by using variables, called in the srcvars attribute. These variables have a unique suffix and can be used to substitute file paths:
-->
      
<img src=”wevs.png” srcset=”#blah2” srcvars=”/{folder}/wevs.png”>
<img src=”wevs2.png” srcset=”#blah2” srcvars=”/{folder}/wevs2.png”>

<srcset id=”blah2”>
  <source var-folder=”small” media=”max-width: 480px”>
  <source var-folder=”large” media=”min-width: 481px”>
</srcset>

<!--      
Or to substitute parts of a file name, such as the suffix:
-->
      
<img src=”wevs.png” srcset=”#blah3” srcvars=”wevs-{suffix}.png”>
<img src=”wevs2.png” srcset=”#blah3” srcvars=”wevs2-{suffix}.png”>

<srcset id=”blah3”>
  <source var-suffix=”small” media=”max-width: 480px”>
  <source var-suffix=”large” media=”min-width: 481px”>
</srcset>

<!--      
The advantage of this approach is that it can be used for simple replacement of only one image, or be referred to by many different images and re-use the same rules.

I haven't fully thought through the next part, but it might also be possible to refer to multiple srcsets:
-->
      
<img src=”wevs1.png” srcset=”#blah1” srcvars=”/{folder}/wevs.png”>
<img src=”wevs2.png” srcset=”#blah2” srcvars=”wevs-{suffix}.png”>
<img src=”wevs3.png” srcset=”#blah1 #blah2” srcvars=”/{folder}/wevs-{suffix}.png”>

<srcset...