title: Bootstrap reduce page weight
body: <p>I have the following html as a banner image for a site:</p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12 hidden-xs"&gt;
              &lt;a href="/home"&gt;&lt;img src="/images/header.jpg" alt="" width="1120" height="285" class="img-responsive"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="col-md-12 visible-xs center"&gt;
              &lt;a href="/home"&gt;&lt;img src="/images/header-xs.jpg" alt="" width="240" height="97"&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The large header image is 94kb.  The smaller image is 11kb.</p>
  
  <p>When I use Firebug or Fiddler to see the network traffic, I see that both images are transmitted no matter what size the browser is.</p>
  
  <p>Is it possible to get only the small image to transfer on xs and only the large image on non-xs and save the data transmission?</p>