title: img srcset doesn't scale down when viewport shrinks
body: <p>I'm not sure if my understanding of the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset" rel="nofollow noreferrer">srcset</a> attribute is wrong.</p>
  <p>Given this html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;img 
    srcset=&quot;
        /path/to/image1 343w,
        /path/to/image2 768w,
        /path/to/image3 304w&quot; 
    sizes=&quot;
        (min-width: 0px) and (max-width: 639px) 343px,
        (min-width: 640px) and (max-width: 767px) 768px,
        (min-width: 768px) 304px&quot;
  /&gt;
  </code></pre>
  <p>I thought that once I shrink my browser window from e.g. 700px width to 500px width the browser will switch the image from <code>/path/to/image2</code> to <code>/path/to/image1</code>. Is this not how it works?
  Once my browser (tested with Chrome and Firefox) has loaded the larger image, it's not switching back to the smaller one.</p>
  <p>My page layout changes from one breakpoint to the next, so I'd like to load an image with a different aspect ratio once the viewport width shrinks. Is the only way to do this through Javascript? Or should I use multiple image tags and set <code>display: none</code> for the inactive media queries?</p>