<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-9">
<h3>How to make mobile version 10x smaller !
<small>Load smaller images on small screens.</small>
</h3>
<p>
<strong>Background</strong>: I was going to make a <a href="http://scottjehl.github.io/picturefill/" target="_blank">Picturefill</a> tutorial on Bootsnipp.com, but then I realized I do not need to use any special JavaScript or any special CSS at all.
It's all built in! - <a href="http://getbootstrap.com/css/#responsive-utilities" target="_blank">Bootstrap'Responsive utilities</a>. Try resizing to see smaller images.
<span class="glyphicon glyphicon-resize-horizontal"></span><a class="pull-right" href="http://bootsnipp.com/iframe/M22ll" target="_blank">full screen</a>
</p>
<p>
<a href="http://googlewebmastercentral.blogspot.ca/2010/04/using-site-speed-in-web-search-ranking.html" target="_blank">Google's search ranking algorithms (speed)</a>
<a href="http://gtmetrix.com/reports/bootsnipp.com/TXtZkPJQ" target="_blank">Site Performance Report</a>
<a href="http://www.smushit.com/ysmush.it/" target="_blank">Optimize images with Yahoo's Smush.it</a>
<a href="http://help.adobe.com/en_US/creativesuite/cs/using/WS6E857477-27FE-4a88-B8A4-074DC3C65F68.html" target="_blank">Photoshop Tutorial</a>
</p>
<div class="alert alert-danger visible-lg" role="alert">File size: 750 KB
<span class="badge pull-right">100%</span>
</div>
<div class="alert alert-warning visible-md" role="alert">File size: 355 KB
<span class="badge pull-right">47% of original</span>
</div>
<div class="alert alert-info visible-sm" role="alert">File size: 239 KB
<span class="badge pull-right">32% of original</span>
</div>
<div class="alert alert-success visible-xs" role="alert">File size: 55 KB
