As you’re probably aware, the search is underway for a new responsive images syntax. Matt Wilcox wrote an excellent article looking at each of the proposals and assessing their strengths and weaknesses. Reading this article made me consider the problem, and I’ve put together a notional syntax based on the positives and negatives of all of the proposals. I’m going to submit it to the Responsive Images Community Group, but first I’d like to ask you to kick the tyres a little.

My proposal is mostly based on the meta variables proposal, but also borrows from picture, srcset, and image maps. It’s based on using associative attributes.

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 further expanded by using variables, called in the srcvars attribute. These variables are user defined; they use a var– prefix with a unique identifier and can be used to substitute, for example, 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 id=”blah1”>
  <source var-folder=”small” media=”max-width: 480px”>
  <source var-folder=”large” media=”min-width: 481px”>
</srcset>

<srcset id=”blah2”>
  <source var-suffix=”landscape” media=”orientation: landscape”>
  <source var-suffix=”portrait” media=”orientation: portrait”>
</srcset>

Now, this all makes sense to me, and I can’t see any obvious flaws in it. The use of variables may be a problem, I’m not sure; it needs the brains and intuition of my peers to see if it’s workable. Please feel free to comment, share, pick apart and put back together differently; I’ve made it available on JSFiddle if you want to fork it and play around.

Update: Thanks all for the comments, please keep them coming. It was pointed out to me that I have — completely independently — arrived at a solution very close to one proposed by Robert Nyman. That makes me think I may be on the right track.