Bootstrap reduce page weight -

i have following html banner image site:

<section>     <div class="row">         <div class="col-md-12 hidden-xs">             <a href="/home"><img src="/images/header.jpg" alt="" width="1120" height="285" class="img-responsive"></a>         </div>         <div class="col-md-12 visible-xs center">             <a href="/home"><img src="/images/header-xs.jpg" alt="" width="240" height="97"></a>         </div>     </div> </section> 

the large header image 94kb. smaller image 11kb.

when use firebug or fiddler see network traffic, see both images transmitted no matter size browser is.

is possible small image transfer on xs , large image on non-xs , save data transmission?

you play around css load images. (network traffic verified load @ media breaks)

you need check browser compatibility.

work ok in chrome, safari. didn't try firefox. wasn't able work in ie.

http://jsfiddle.net/w8rzp8lv/

/* xs */  @media(max-width:767px) {     section .visible-xs img {         content: url("http://storyacious.com/wp-content/uploads/2014/02/300x300.gif");     } } /* sm */  @media(min-width:768px) {     section .hidden-xs img {         content: url("http://socialmediaseo.net/wp-content/uploads/2010/05/500px-android-logosvg-300x300.png");     } } 

2nd image doesn't load until 10 seconds after page load due media query change.