<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> <!------ Include the above in your HEAD tag ----------> <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 <span class="badge pull-right">7.3% of original</span> </div> <img class="visible-lg" src="http://scottjehl.github.io/picturefill/examples/images/extralarge.jpg" width="768" height="1024" alt="" title="File size= 750KB"> <img class="visible-md" src="http://scottjehl.github.io/picturefill/examples/images/large.jpg" width="480" height="640" alt="" title="File size= 355KB"> <img class="visible-sm" src="http://scottjehl.github.io/picturefill/examples/images/medium.jpg" width="375" height="500" alt="" title="File size= 239KB"> <img class="visible-xs" src="http://scottjehl.github.io/picturefill/examples/images/small.jpg" width="180" height="240" alt="" title="File size= 55KB"> </div> </div> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FM22ll" target="_blank"> <small>HTML</small>⁵ </a> </p> </div>