title: Responsive images: img srcset + Bootstrap, wrong size image gets loaded
body: <p>I'm using Bootstrap with Responsive Images. I want to optimize load times by offering multiple image sizes to browsers. According to <a href="http://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/" rel="noreferrer">this article</a>, a plain approach with srcset like this is good for letting the browser pick the optimal image size:</p>
  
  <pre><code>&lt;img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah"&gt;
  </code></pre>
  
  <p>My problem is that combining this with the Bootstrap <strong><em>img-responsive</em></strong> class, a large size picture gets loaded even when only a small one is needed.</p>
  
  <p>Code example here: <a href="http://www.bootply.com/8NzNuJVGWj" rel="noreferrer">Bootply</a> . <strong>Use Chrome for testing, it has built-in support for srcset support!</strong> (Some other browsers would need picturefill.js to recognize it.)</p>
  
  <p>If you copy the source of the image (or look in Chrome Developer Tools in the Network tab), you can see that the 750 width version gets loaded, and resized to a small image, even though there are smaller versions that would be optimal to use. (The same thing happens in IE and Firefox if the  picturefill JS is loaded to support img srcset.)</p>
  
  <p>What am I doing wrong?</p>