Only load image that will be used with responsive layout - html

Question

I want to take advantage of Bootstrap 3's responsive utilities to only load a certain image based on the size of the device used:
<img src="http://bit.ly/12VMi5H" class="img-thumbnail visible-lg .hidden-print">
<img src="http://dell.to/12VMrWX" class="img-thumbnail visible-md .hidden-print">
<img src="http://bit.ly/12VMu55" class="img-thumbnail visible-sm .visible-print">
HOWEVER, I don't want to have to load all 3 images. How can I via CSS or some other lightweight means only load the appropriate image for that device and screensize?

Answer 1

If you load images via CSS as background images, you can control what assets gets loaded via the appropriate media query. Unlike HTML, loading the image via CSS will only load the appropriate image based on what the viewport is. You can assign a specific background image at each breakpoint. Below is an example based on BS 3.0.
HTML:
<div class="image-holder></div>
CSS:
#media (min-width: 768px) {
.image-holder {
background: #fff url(http://bit.ly/12VMu55) no-repeat ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
#media (min-width: 992px) {
.image-holder {
background: #fff url(http://dell.to/12VMrWX) no-repeat ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
#media (min-width: 1200px) {
.image-holder {
background: #fff url(http://bit.ly/12VMu55) no-repeat ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
If you want another sized image just for mobile, put it into the main body of the css as BS is mobile-first.

Answer 2

Some javascript is another option here, if for any reason you prefer not to load images as background-image in your CSS. This option only loads the bigger file(s) when needed (but does always load the smallest one regardless):
HTML:
<img src="...example-image_small.jpg" />
Javascript:
if ($(window).width() > 767) {
$("img[src$='_small.jpg']").each(function() {
var new_src = $(this).attr("src").replace('_small', '_large');
$(this).attr("src", new_src);
});
}
Example
Make sure you've got image files named properly (ending in _small and _large) it should all fall into place.