Retina image replacement

jquery.js

var $images = $("img[data-1x]");

if (window.devicePixelRatio == 2) {
  $.each($images, function() {
    var $this = $(this);

    $this.attr("src", $this.data("2x"));
  });
} else {
  $.each($images, function() {
    var $this = $(this);

    $this.attr("src", $this.data("1x"));
  });
}

noscript.html

<style>
  img.no-js {
    display: none;
  }
</style>

<img src=""
     data-1x="/images/photo.jpg"
     data-2x="/images/photo@2x.jpg"
     class="no-js">
<noscript>
  <img src="/images/photo.jpg">
</noscript>

retina.html

<img src=""
     data-1x="/images/photo.jpg"
     data-2x="/images/photo@2x.jpg">

retina.jquery.js

var Retina = Retina || {};

Retina = {
  init: function() {
    var $images = $("img[data-1x]");
    if (Retina.isRetina() == true) {
      $.each($images, function() {
        var $this = $(this);
        $this.attr("src", $this.data("2x"));
      });
    } else {
      $.each($images, function() {
        var $this = $(this);
        $this.attr("src", $this.data("1x"));
      });
    }
  },

  isRetina: function() {
    if (window.devicePixelRatio == 2) {
      return true;
    } else {
      return false;
    }
  }
};

retina.js

var Retina = Retina || {};

Retina = {
  init: function() {
    var images = document.querySelectorAll("img[data-1x]");
    if (Retina.isRetina() == true) {
      Array.prototype.forEach.call(images, function(el, i) {
        var src = el.getAttribute("data-2x");
        el.setAttribute("src", src);
      });
    } else {
      Array.prototype.forEach.call(images, function(el, i) {
        var src = el.getAttribute("data-1x");
        el.setAttribute("src", src);
      });
    }
  },

  isRetina: function() {
    if (window.devicePixelRatio == 2) {
      return true;
    } else {
      return false;
    }
  }
};

srcset-complex.html

<img src="photo.jpg"
     srcset="photo.jpg 1x,
             photo@2x.jpg 2x,
             photo-small.jpg 480w 1x,
             photo-small@2x.jpg 480w 2x">

srcset.html

<img src="photo.jpg"
     srcset="photo.jpg 1x, photo@2x.jpg 2x">

vanilla.js

// Select all images with `data-1x` attribute
// (It assumes that if you have `data-1x` attribute set,
//  it also has `data-2x` attribute set as well)
var images = document.querySelectorAll("img[data-1x]");

// If the device is retina-enabled (has pixel ratio of 2)
if (window.devicePixelRatio == 2) {
  // Loop through the array `images`
  Array.prototype.forEach.call(images, function(el, i) {
    // Get the value of the `data-2x` attribute
    var src = el.getAttribute("data-2x");
    
    // Set var `src` as the value of the element's `src` attribute
    el.setAttribute("src", src);
  });

// Else the device is not retina-enabled
} else {
  // Loop through the array `images`
  Array.prototype.forEach.call(images, function(el, i) {
    // Get the value of the `data-1x` attribute
    var src = el.getAttribute("data-1x");

    // Set var `src` as the value of the element's `src` attribute
    el.setAttribute("src", src);
  });
}