title: How does the browser pick the right image using <img> "sizes" and "srcset" attributes?
body: <p>How does the <code>srcset</code> attribute determine the correct image in conjunction with the <code>sizes</code> attribute? Take this image for example:</p>
  
  <pre><code>&lt;img alt="Demo image"
       sizes="(min-width: 1024px) 512px,
               100vw"
       srcset="img/banner-large.jpg 2048w,
               img/banner-medium.jpg 1400w,
               img/banner-small.jpg 800w"&gt;
  </code></pre>
  
  <p>(I cleared the cache in Chrome)</p>
  
  <p>I thought that the last image would always be chosen (800w), because of the 512px (sizes) and the image width of 800w (srcset), but that image did not always get selected? Why?</p>