Retina images

html.html

<noscript>
  <img src="image.png" alt="" width="96" height="96" />
</noscript>
<span class="js-retina-image" data-lowres='image.png' data-highres='image@2x.png' data-width="96" data-height="96">

script.js

/*
 * init_retina_images()
 * Searches for spans and replaces them with retina images from the 
 * data tags
 */
function init_retina_images() {
  var $retina_images = $('.js-retina-image');
  
  $retina_images.each(function retina_image(i){
    var $this = $(this),
        up = this.parentNode,
        lowres = $this.data('lowres'),
        highres  = $this.data('highres'),
        width =  $this.data('width'),
        height =  $this.data('height'),
        ratio = window.devicePixelRatio || 1,
        source = lowres,
        image = document.createElement('img');
        
    if ( ratio >= 1.5 ) {
      source = highres;
    }
  
    image.src = source;
    image.width = width;
    image.height = height;
    image.alt = '';
    image.className = this.className;
  
    up.insertBefore( image, this );
    up.removeChild( this );
  });
}

init_retina_images();