A Notional Proposal for a Responsive Images Syntax

Warning This article was written over six months ago, and may contain outdated information.

As you’re prob­a­bly aware, the search is under­way for a new respon­sive images syn­tax. Matt Wilcox wrote an excel­lent arti­cle look­ing at each of the pro­pos­als and assess­ing their strengths and weak­ness­es. Read­ing this arti­cle made me con­sid­er the prob­lem, and I’ve put togeth­er a notion­al syn­tax based on the pos­i­tives and neg­a­tives of all of the pro­pos­als. I’m going to sub­mit it to the Respon­sive Images Com­mu­ni­ty Group, but first I’d like to ask you to kick the tyres a little.

My pro­pos­al is most­ly based on the meta vari­ables pro­pos­al, but also bor­rows from picture, srcset, and image maps. It’s based on using asso­cia­tive attributes.

The idea is to intro­duce a srcset attribute on img ele­ments, which refers to a unique srcset ele­ment. This ele­ment is not ren­dered; it con­tains a num­ber of source ele­ments which can be used to apply media queries. In its sim­plest state, it would replace the src attribute of the img with the one in the source ele­ment that match­es 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 fur­ther expand­ed by using vari­ables, called in the srcvars attribute. These vari­ables are user defined; they use a var- pre­fix with a unique iden­ti­fi­er and can be used to sub­sti­tute, for exam­ple, 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 sub­sti­tute 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 advan­tage of this approach is that it can be used for sim­ple replace­ment of only one image, or be referred to by many dif­fer­ent images and re-use the same rules.

I haven’t ful­ly thought through the next part, but it might also be pos­si­ble to refer to mul­ti­ple 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 obvi­ous flaws in it. The use of vari­ables may be a prob­lem, I’m not sure; it needs the brains and intu­ition of my peers to see if it’s work­able. Please feel free to com­ment, share, pick apart and put back togeth­er dif­fer­ent­ly; I’ve made it avail­able on JSFid­dle if you want to fork it and play around.

Update: Thanks all for the com­ments, please keep them com­ing. It was point­ed out to me that I have — com­plete­ly inde­pen­dent­ly — arrived at a solu­tion very close to one pro­posed by Robert Nyman. That makes me think I may be on the right track.

13 comments on
“A Notional Proposal for a Responsive Images Syntax”

  1. I real­ly like the idea of being able to set up a set of rules and ref­er­ence it on all images. Using vari­ables for either a fold­er or a suf­fix would solve so many prob­lems of the awk­ward­ness of oth­er sug­ges­tions I’ve seen, re-usabil­i­ty would be such an advantage.

    Per­son­al­ly I don’t see ref­er­enc­ing mul­ti­ple src­sets work­ing, as you could end up with mul­ti­ple match­es con­flict­ing with each oth­er. Both oth­er than that I think it’s got legs, I’d say def­i­nite­ly sub­mit it

  2. This pro­pos­al def­i­nite­ly makes sense. It’s easy to under­stand, and real­ly flex­i­ble. The only flaw I see is that you’ll have to define media queries in both HTML and CSS and even­tu­al­ly main­tain the val­ues on both sides if any change is required.

    What about some­thing like this (as an option, of course)?
    HTML:

    <img src=”wevs.png” srcset=”#blah1”>
    
    <srcset id=”blah1”>
      <source src=”wevs-small.png” class="small">
      <source src=”wevs-large.png” class="large">
    </srcset>

    CSS:

    srcset .small { active: yes; }
    srcset .large { active: no; }
    
    @media (min-width: 481px) {
      srcset .small { active: no; }
      srcset .large { active: yes; }
    }
  3. First glance, it looks good.

    It’d obvi­ous­ly back­wards com­pat­i­ble, which is the main thing.

    I’m not sure about var-fold­er and var-suf­fix, though.

    It seems a bit too spe­cif­ic, and not flex­i­ble enough. It also seems like it might be a PITA from a brows­er devel­op­er’s point of view.

    What about hav­ing it as XML tags, rather than attributes.

    <img src="wevs-1.png" srcset="#blah2" srcvars="/{folder}/wevs-1-{suffix}.png">
    <img src="wevs-2.png" srcset="#blah2" srcvars="/{folder}/wevs-2-{suffix}.png">
    
    <srcset id="blah2">
      <source media="max-width: 480px">
        <folder>small</folder>
        <suffix>sm</suffix>
      </source>
    
      <source media="min-width: 481px">
        <folder>big</folder>
        <suffix>bg</suffix>
      </source>
    </srcset>

    or

    <img src="wevs-1.png" srcset="#blah2" srcvars="/{folder}/wevs-1-{suffix}.png">
    <img src="wevs-2.png" srcset="#blah2" srcvars="/{folder}/wevs-2-{suffix}.png">
    
    <srcset id="blah2">
      <source media="max-width: 480px">
        <variable name="folder" value="small">
        <variable name="suffix" value="sm">
      </source>
    
      <source media="min-width: 481px">
        <variable name="folder" value="big">
        <variable name-"suffix" value="bg">
      </source>
    </srcset>
  4. […] A Notion­al Pro­pos­al for a Respon­sive Images Syn­tax – Bro­ken Links […]

  5. FYI: I just remem­bered a blog post about the same top­ic: http://robertnyman.com/2011/05/30/discussing-alternatives-for-various-sizes-of-the-same-image-introducing-src-property-in-css-as-an-option/

  6. @Olivier — Yes, Robert’s pro­pos­al is very sim­i­lar to mine, but with­out vari­ables. We both arrived at it inde­pen­dent­ly, which gives me hope that it may not be a ter­ri­ble idea…
    I’ve tried to avoid CSS as I want­ed this to be a com­plete­ly inde­pen­dent solu­tion; that’s a prob­lem to solve lat­er, I think.

    @Rich — Good idea. An alter­na­tive would be to use JSON style variables:

    <source media="max-width: 480px" srcvars="{folder:small,suffix:sm}">

    But I’m not sure if that’s eas­i­er than what you’ve suggested.

  7. […] A Notion­al Pro­pos­al for a Respon­sive Images Syn­tax (Bro­ken Links) […]

  8. Inter­est­ing.

    I’ve ducked in and out of the var­i­ous solu­tions for respon­sive images. None of them real­ly feel right to me and I’m afraid this also does­n’t feel right. The main issue, picked up by Michael, is the media attribute in the HTML rather than in CSS.

    As I said, I have dipped in and out on solu­tions prof­fered for this so I may be repeat­ing some­thing that has been found to be a flawed idea — has any­one sug­gest­ed fore­ground-image as a CSS prop­er­ty for img tags?

    @media only screen and (min-width: 320px) {
    #pic1 {
    fore­ground-image: url(../images/pic1-320.png);
    }
    }

    @media only screen and (min-width: 480px) {
    #pic1 {
    fore­ground-image: url(../images/pic1-480.png);
    }
    }

    It could then go into media queries in CSS rather than mud­dy­ing the HTML. Also, you could tar­get the style attribute through a CMS if you need the CMS edi­tor to add con­tent. If the CSS was loaded in the head then the user agent would know before request­ing the image ref­er­enced through the src attribute. 

    Admit­ted­ly I can see issues with want­i­ng to use dif­fer­ing alt attrib­ut­es for dif­fer­ent size images. Per­haps the images are not just dif­fer­ent sizes but dif­fer­ent images.

    How­ev­er fore­ground-image seems a lot clos­er to the mech­a­nisms we use to build pages than media attrib­ut­es or inline vars.

    Thoughts?

  9. Thanks Adam, but there needs to be a solu­tion which works in HTML inde­pen­dent­ly of CSS; see Mat­t’s arti­cle for the rea­sons why.

  10. Yeah, I agree with Peter.

    Obvi­ous­ly, you could *also* con­trol the media attribute with CSS.

    As a rule, CSS is for styling con­tent, not for defin­ing it.

  11. Hey Peter,

    I’ll take a look at that link. 

    Thanks!

  12. Check out the URI tem­plates sec­tion for foresight.js, just as a ref­er­ence for a sim­i­lar concept.
    https://github.com/adamdbradley/foresight.js

  13. You’re right, that is real­ly sim­i­lar — and I had­n’t seen that before. Great exam­ple of Mul­ti­ple Discovery.