cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>Adaptive Image Experiment - Using &lt;noscript&gt;<br/><span>Use Inspector > Network to Test </span></h1>
<div class="bwd">BWD</div>
<testlog></testlog> 
<!--
   Noscript does not render any html in IE
   why we add the src reference to the tag
-->
<noscript data-src="http://placekitten.com/g/640/400">
  <img src="http://placekitten.com/g/640/400" alt="Kitten Cliché"/>
</noscript>

            
          
!
            
              *, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin:0; padding:0;
 }
body {background:#282828; }
h1   { font:normal 24px helvetica,arial,sans-serif; padding:20px; color:white; }
span { font-size:14px}
img {
  width:100%;
  height:auto;
}
testlog,.bwd{
  display:block;
  position:relative;
  background:rgba(255,255,255,0.5);
  padding:20px;
  min-width:320px;
  font:11px/22px monospace;
  white-space:pre;
}
.bwd{ position:relative; }
            
          
!
            
              // var bwdTestImage='https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/bwd108kb.jpg';
        var testfile='https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/bwdtest2.jpg';
        var testfile='https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/bwdtest2.jpg';
        // var testfile='http://franklyone.com/jakob/bwd/jsb/bwdtest2.jpg';
        var start = 0;
        var end = 0;
        var binfile = '';
        
        function TestDownload() {
            start = new Date().getTime();
            $.ajax({
                type: "GET",
                url: testfile + "?id=" + start//,
                // dataType: 'application/octet-stream'
              })
            .done(function(data) {

                    binfile = data;
                    end = new Date().getTime();
                    second = (end - start) / 1000;
                    bytes = data.length; // Bytes
                    bits  = bytes * 8;  // Bits
                    KB=bytes/1024;  // KiloByte
                    MB=KB/1024;     // MegaByte
                    GB=MB/1024;     // GigaByte
                    TB=GB/1024;     // TerraByte                    
                   
                    // 1 kbps (kilo bits per second) = 1000 bits per second
                    // 1 Mbps (mega bits per second) = 1000 kilo bits per second.
                    // 1 Gbps (giga bits per second) = 1,000 mega bits per second.
                    kbps = bits / 1000 /  second;
                    Mbps = kbps / 1000 /  second;
                    Gbps = Mbps / 1000 /  second;  
                    Tbps = Gbps / 1000 /  second;                       
                    KBps = kbps * 0.1220703125; 

                    $('.bwd').html('BWD:' +
                        '<br>bytes: ' + Math.round(bytes * 100) / 100 + 
                        '<br>bits: ' + Math.round(bits * 100) / 100 +
                        '<hr>' +
                        'KB: ' + Math.round(KB * 100) / 100 +
                        '<br>MB: ' + Math.round(MB * 100) / 100 +
                        '<br>GB: ' + Math.round(GB * 100) / 100 +
                        '<br>TB: ' + Math.round(TB * 100) / 100 +
                        '<hr>' +
                        'kbps: ' + Math.round(kbps * 100)/100 +
                        '<br>Mbps: ' + Math.round(Mbps * 100)/100 +
                        '<br>Gbps: ' + Math.round(Gbps * 100)/100 +
                        '<br>Tbps: ' + Math.round(Tbps * 100)/100);
                    //+                     
                    // '<hr>' +
                    // 'KBps: ' + Math.round(KBps * 100) * 100

                    // Internet connectivity   Download speed (approx)
                    // 256 kbps    31.3 KBps
                    // 384 kbps    46.9 KBps
                    // 512 kbps    62.5 KBps
                    // 768 kbps    93.8 KBps
                    // 1 mbps ~ 1000kbps   122.1 KBps
             
              
              
            })
            
        }
        
        
        
        TestDownload();
      
// Test delay to make codepen 
// register width and heights
setTimeout(function(){

  // Resolution factor to be multiplied with image size
  var dpr=window.devicePixelRatio||1; 
  // Not implemented - bandwidth factor
  // a number between 0 and 1 where 1 equals 
  // fast enough for delivering retina+
  // Let's say you have a retina display alowing 2x resolution
  // but the connection sucks then by setting bwd = 0.5 
  // we could do:  <img src="img/image/[screen.width * dpr * bwd ].jpg" /> (1)
  var bwd=1;                           
  
  // screen.width and screen.height seems to be the best way
  // of detecting viewport size (on iDevices at least)  
  // To prevent extra load on rotation we use max-width-height 
  var maxW=screen.width;  
  var maxH=screen.height;
  var maxWH=Math.max(maxW,maxH); 

  $('noscript').each(function(){
    var $tgt=$(this);                    // Noscript tag
    var osrc=$tgt.attr('data-src');      // Src attribute
    
    // Placekitten specific - size is in the src
    // http://placekitten.com/g/[width]/[height];
    var nsrc='';                          
        nsrc=osrc.split('/');
      
      
      // Size based on maxWH and noscript image ratio
      var ratio=nsrc[nsrc.length-2]/nsrc[nsrc.length-1] // Width/height
      var w=maxWH * dpr * bwd;       // Width
      var h=maxWH/ratio * dpr * bwd; // Height
  
      nsrc[nsrc.length-2]=Math.round(w); // Width
      nsrc[nsrc.length-1]=Math.round(h); // Height
      nsrc=nsrc.join('/'); // New src
  
      // Add image and remove noscript
      $tgt.before('<img src="' +nsrc +'" />').remove();   
  
    
    
      $('testlog').html($('testlog').html()+
                        'devicePixelRatio: ' + dpr + 
                        '<hr />window.innerWidth:  ' + window.innerWidth + 
                        '<br />window.outerWidth:  ' + window.outerWidth + 
                        '<br />screen.availWidth:  ' + screen.availWidth + 
                        '<br /><b>screen.width:       ' + screen.width + '</b>' +
                        '<hr />window.innerHeight: ' + window.innerHeight +
                        '<br />window.outerHeight: ' + window.outerHeight + 
                        '<br />screen.availHeight: ' + screen.availHeight + 
                        '<br /><b>screen.height:      ' + screen.height + '</b>' +
                        '<hr /><b>Image width/height: ' + w + ' x ' + h + '</b>' +
                        '<hr />Old src: ' + osrc + 
                        '<br />New src: ' + nsrc +
                        '<br /><br /><br />');
    
      });

},500) 
// Consider:  
// - Adding a max-width control if image is in a max-width context
// - Percentage sizes 
// - Image attribute fix - if data version is required  
// - Wrapper context (remember MediaQueries/breakpoints) 
// - Multiple images in same noscript (data-src as array/json)
// - Bandwidth (maybe cookie and/or progressive on each image load)
// - Focal cropping if locked to height (https://codepen.io/jakob-e/pen/jdwcf) 
//   
// - Adding data image attributes  
// - Adding lazy load 




















  
  
// OLDIES 
   /* var connection= navigator.connection || { 'type':'0' };
    var connectionSpeed;
    switch(connection.type) {
        case connection.CELL_2G: connectionSpeed='low'; break; // 2G
        case connection.CELL_3G: connectionSpeed='medium'; break; // 3G
        default : connectionSpeed='high'; // WIFI, ETHERNET, UNKNOWN
     }

    alert(connectionSpeed)*/
 /*   var connectionSpeed;
    switch(connection.type) {
        case connection.CELL_2G: connectionSpeed='low'; break; // 2G
        case connection.CELL_3G: connectionSpeed='medium'; break; // 3G
        default connectionSpeed='high'; // WIFI, ETHERNET, UNKNOWN
     }

   alert(connectionSpeed)     */

  
/*  
var imageAddr = "http://placekitten.com/g/640/400" + "?n=" + Math.random();
var startTime, endTime;
var downloadSize = [23789];
var download = new Image();
download.onload = function () {
    endTime = (new Date()).getTime();
    showResults();
}
startTime = (new Date()).getTime();
download.src = imageAddr;

function showResults() {
    var duration = (endTime - startTime) / 1000;
    var bitsLoaded = downloadSize * 8;
    var speedBps = (bitsLoaded / duration).toFixed(2);
    var speedKbps = (speedBps / 1024).toFixed(2);
    var speedMbps = (speedKbps / 1024).toFixed(2);
    alert("Your connection speed is: \n" + 
           speedBps + " bps\n"   + 
           speedKbps + " kbps\n" + 
           speedMbps + " Mbps\n" );
}  */
  
  
// Consider:  
// - Adding a max-width control if image is in a max-width context
// - Percentage sizes 
// - Image attribute fix - if data version is required  
// - Wrapper context (remember MediaQueries/breakpoints) 
// - Multiple images in same noscript (data-src as array/json)
// - Bandwidth (maybe cookie and/or progressive on each image load)
// - Focal cropping if locked to height (https://codepen.io/jakob-e/pen/jdwcf) 
//   
// - Adding data image attributes  
// - Adding lazy load 
// - Source load order 
//   
// Readings:  
// - Peter-Paul Koch https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
// - Jake Archibald  http://24ways.org/2011/adaptive-images-for-responsive-designs-again/
// - Matt Wilcox     http://24ways.org/2011/adaptive-images-for-responsive-designs/  
// - Ryan Van Etten  http://ryanve.com/lab/dimensions/ + http://ryanve.com/lab/resolution/
  
  
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console