title: img srcset + sizes picturefill for responsive
body: <p>I have a site with a 12 column layout and I'm trying to figure out to use the srcset and sizes attributes correctly for matching my design.</p>
  
  <p>I have a sidebox which spans 3 columns in desktop, but in tablet and mobile sizes it spans 12 cols (100% width).</p>
  
  <p>What I want is for the image used in desktop-version, also to be used in mobile (max-width 480px), and a specific tablet-sized image to be used in everything between 481px and 781px.</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;img
      src="http://placehold.it/370x150/cecece"
      srcset="http://placehold.it/768x311/f67f57 768w, http://placehold.it/370x150/cecece 320w"
      sizes="(max-width: 768px) 100vw, (max-width: 480px) 100vw"
  &gt;
  </code></pre>
  
  <p>In my example, the 768 version is always used until 780px, and then the default src is used. But how does I get it to use the 320 version up until 480px? </p>