Here is the thing. I have a header at the top of my page which have two images, one of them is only visible when the view port is large ( > 940) and the other only shows on mobile. To achieve this behavior I'm using Bootstrap 3 and their defined sets of media queries:
<header class="container"> <div class="row"> <div class="col-lg-4 hidden-xs"> <img src="img/hi-res-logo.png"> </div> <div class="col-xs-12 visible-xs"> <img src="img/small-logo.png"> </div> </div> </header>
So far, no big deal, the previous code does the job well, but what I want is prevent the load of the large image file itself on mobile to avoid unnecessary data consumption... so how to achieve that?