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 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.

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

  1. I really like the idea of being able to set up a set of rules and reference it on all images. Using variables for either a folder or a suffix would solve so many problems of the awkwardness of other suggestions I’ve seen, re-usability would be such an advantage.

    Personally I don’t see referencing multiple srcsets working, as you could end up with multiple matches conflicting with each other. Both other than that I think it’s got legs, I’d say definitely submit it

  2. This proposal definitely makes sense. It’s easy to understand, and really flexible. The only flaw I see is that you’ll have to define media queries in both HTML and CSS and eventually maintain the values on both sides if any change is required.

    What about something 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 obviously backwards compatible, which is the main thing.

    I’m not sure about var-folder and var-suffix, though.

    It seems a bit too specific, and not flexible enough. It also seems like it might be a PITA from a browser developer’s point of view.

    What about having 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 Notional Proposal for a Responsive Images Syntax – Broken Links […]

  5. FYI: I just remembered a blog post about the same topic: 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 proposal is very similar to mine, but without variables. We both arrived at it independently, which gives me hope that it may not be a terrible idea…
    I’ve tried to avoid CSS as I wanted this to be a completely independent solution; that’s a problem to solve later, I think.

    @Rich — Good idea. An alternative 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 easier than what you’ve suggested.

  7. […] A Notional Proposal for a Responsive Images Syntax (Broken Links) […]

  8. Interesting.

    I’ve ducked in and out of the various solutions for responsive images. None of them really feel right to me and I’m afraid this also doesn’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 solutions proffered for this so I may be repeating something that has been found to be a flawed idea — has anyone suggested foreground-image as a CSS property for img tags?

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

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

    It could then go into media queries in CSS rather than muddying the HTML. Also, you could target the style attribute through a CMS if you need the CMS editor to add content. If the CSS was loaded in the head then the user agent would know before requesting the image referenced through the src attribute.

    Admittedly I can see issues with wanting to use differing alt attributes for different size images. Perhaps the images are not just different sizes but different images.

    However foreground-image seems a lot closer to the mechanisms we use to build pages than media attributes or inline vars.

    Thoughts?

  9. Thanks Adam, but there needs to be a solution which works in HTML independently of CSS; see Matt’s article for the reasons why.

  10. Yeah, I agree with Peter.

    Obviously, you could *also* control the media attribute with CSS.

    As a rule, CSS is for styling content, not for defining it.

  11. Hey Peter,

    I’ll take a look at that link.

    Thanks!

  12. Check out the URI templates section for foresight.js, just as a reference for a similar concept.
    https://github.com/adamdbradley/foresight.js

  13. You’re right, that is really similar — and I hadn’t seen that before. Great example of Multiple Discovery.