performantRetina.js

performantRetina.js

var performantRetina = {
  run : function(){
    if(!window.devicePixelRatio || window.devicePixelRatio === 1){return;}
    var images = document.getElementsByTagName('img');
    for(var i = 0; i < images.length; i++){
      var retinaSrc = images[i].getAttribute('data-retina-src');
      if(!retinaSrc){continue;}
      images[i].setAttribute('src', retinaSrc);
    }
  }
};
performantRetina.run();

// Why bother with this? Only benefit would be if downloading images were blocking in some way, so downloading initial image would download and be done, other processes could run, and then subsequent image could download. Don't have time to test it out right now, but I suspect we're better off just using srcset.