Files used by High Resolution Images post at http://jonknapp.com/2013/01/high-resolution-images/

image.js

(function (window, devicePixelRatio, $, View, _) {
  'use strict';

  // I don't recommend adding objects on the window object, but it was quick.
  window.ImageView = View.extend({

    // Array of images that we will attempt to load.
    // Images will be in priority order.
    images: null,
    
    // I expect an element to passed to the Backbone view, but I set this to
    // explicitly let the user know we are working with an <img> tag.
    tag: 'img',

    // Initialize our `images` property to an empty array and populate it with
    // attributes we find on the html tag in the `getImageArray` method.
    initialize: function(options) {
      this.images = [];
      this.getImageArray();
      
      // Start attempting to load the first image.
      this.loadImage();
    },

    // This parses the html element and pulls urls from the `data-image` and
    // `data-image-highrez` attributes.
    //
    // You can set the `src` attribute on the image if you'd like as a
    // fallback / default image, but it will be overwritten by the first
    // successfully loaded image.
    getImageArray: function() {

      // Always attempt to load the low resolution image.
      this.images.unshift(this.$el.attr('data-image'));
      
      // If the user has a higher resolution device (retina), add the
      // high resolution url to the beginning of the `images` array.
      if (devicePixelRatio > 1 &&
        this.$el.attr('data-image-2x')) {
        this.images.unshift(this.$el.attr('data-image-highrez'));
      }
    },

    // This method will start the process of finding the first image it
    // can load and then swapping the HTML image's `src` attribute to the
    // same url.
    loadImage: function() {
      
      // Nab the first image url we are going to work with.
      var imageURL = this.images.shift();
      if (imageURL) {
        // Create a temporary <img> tag that is not attached to the DOM.
        var $image = $('<img>');
        
        // Setup an event listener that is fired if an image is loaded
        // successfully.
        $image.on('load', _.bind(function() {
          // The image loaded successfully, let's use the same `src` attribute
          // on the <img> on our page.
          this.$el.attr('src', $image.attr('src'));
        }, this));
        
        // Setup an event listener for if the image fails to load.
        $image.on('error', _.bind(function() {
          // Something failed so attempt to use the next image instead.
          this.loadImage();
        }, this));
        
        // Set the `src` attribute on our temporary <img> and wait
        // for one of our event handlers to run.
        $image.attr('src', imageURL);
      }
    }
  });
}(window, parseFloat(window.devicePixelRatio), $, Backbone.View, _));

main.js

$(function() {
  $('img[data-image]').each(function(index, element) {
    new ImageView({ el: element });
  });
});

sample.html

<img alt="image description"
  data-image="http://placehold.it/100x100"
  data-image-highrez="http://placehold.it/200x200"
  height="100"
  src="http://placehold.it/1x1"
  width="100" />