title: What is the most concise way to define responsive, 'art-directed', retina-supported images?
body: <p>When wanting to serve the most appropriate image to a users device, the list of potential resources can grow pretty quickly across sizes/ratios/pixel-densities etc. </p>
  
  <p>Using <a href="http://scottjehl.github.io/picturefill/" rel="nofollow">picturefill</a> we can use multiple <code>srcset</code> attributes to target specific assets to given rules. An example I'm currently working on looks something like this:</p>
  
  <pre><code>&lt;picture&gt;
    &lt;!--[if IE 9]&gt;&lt;video style="display: none;"&gt;&lt;![endif]--&gt;
    &lt;source srcset="http://dummyimage.com/360x583/707070" media="(min-width: 1200px)"&gt;
    &lt;source srcset="http://dummyimage.com/293x476/707070, http://dummyimage.com/586x952/707070 2x" media="(min-width: 992px)"&gt;
    &lt;source srcset="http://dummyimage.com/720x455/707070" media="(min-width: 768px)"&gt;
    &lt;source srcset="http://dummyimage.com/330x209/707070, http://dummyimage.com/660x418/707070 2x"&gt;
    &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
    &lt;img srcset="http://dummyimage.com/330x209/707070" alt="Item Image"&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>This is certainly not <a href="http://www.xanthir.com/b4Su0" rel="nofollow">terrible</a>, but it's starting to feel pretty verbose again. There are 6 different sources specified for the same image, and that's only including 2 'double density' retina images. We're also required to provide a pretty spurious <code>&lt;video&gt;</code> tag to avoid IE9 woes.</p>
  
  <p>Should we be providing double density resources for all image dimensions, or make an explicit assumption that 2x image displays are only available at certain screen resolutions (which seems like a pretty big assumption).</p>
  
  <p>Similarly, should we be providing 3x image resolutions for any/all of our resources?</p>
  
  <p>If the answer to either of these were yes, we can see that for a very standard set of target device widths (these are Bootstraps <code>xs</code>, <code>sm</code>, <code>md</code> and <code>lg</code> values), we might well end up having to provide 8 or even 12 resources per 'picture'.</p>
  
  <p>So, is this simply the best current state-of-play? (picturefill definitely does help). Or is trying to specify a specific resource for every eventuality over-engineering the problem?</p>
  
  <p><strong>Update</strong>
  For more recent approaches, follow the progress on <a href="https://responsiveimages.org/" rel="nofollow">Responsive Images Community Group</a></p>