<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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>Making a mobile version of a big piture <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://i.imgur.com/I0Nha6i.jpg"> <img class="visible-md" src="http://i.imgur.com/5WhvpOJ.jpg"> <img class="visible-sm" src="http://i.imgur.com/PnjSzjJ.jpg"> <img class="visible-xs" src="http://i.imgur.com/KShjaWu.jpg"> </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>

body{ background-color:black; color:#ccc; } img{ padding:30px }

/* * How to detect browser width * Ref: http://www.surfingsuccess.com/jquery/window-width.html#.Uw1RiV6Lfx4 */ $(window).ready(function() { var wi = $(window).width(); $("p.testp").text('Initial screen width is: ' + wi + 'px.'); $(window).resize(function() { var wi = $(window).width(); $("p.testp").text('Width is currently: ' + wi + 'px.'); }); });