title: Using media queries to control image downloads
body: <p>If I create a container and want to set a background image based on media queries, why does the browser (Firefox, Chrome) download the medium sized image, if the large one has already been downloaded? That seems totally against the point (i.e. saving bandwidth).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="background"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#background {
      width: 100%;
      height: 400px;
      background-image: url(/content/images/2016/04/airport-small.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
  }
  
  @media (min-width: 500px) {
    #background {
      background: url(/content/images/2016/04/airport-medium.jpg);
    }
  }
  @media (min-width: 800px) {
    #background {
      background: url(/content/images/2016/04/airport-large.jpg);
    }
  }
  </code></pre>
  
  <p>If I load a page the browser downloads the <code>-large.jpg</code>, in this setup. If I resize the screen (below 800px), the browser downloads and renders the <code>-medium.jpg</code>, and so on.</p>
  
  <p>How can I prevent this?</p>