Simple JQuery plugin that replaces all images in a webpage according to the iOS device and resolution. Expects files named according to Apple's naming scheme. I'd like to add -Landscape and -Portrait modifiers in the future.

retina.js

(function() {

  var root = (typeof exports == 'undefined' ? window : exports);

  var config = {
    // Ensure Content-Type is an image before trying to load @2x image
    // https://github.com/imulus/retinajs/pull/45)
    check_mime_type: true
  };



  root.Retina = Retina;

  function Retina() {}

  Retina.configure = function(options) {
    if (options == null) options = {};
    for (var prop in options) config[prop] = options[prop];
  };

  Retina.init = function(context) {

    if (context == null) context = root;

    var existing_onload = context.onload || new Function;

    context.onload = function() {
      var images = document.getElementsByTagName("img"), retinaImages = [], i, image;
      for (i = 0; i < images.length; i++) {
        image = images[i];
        retinaImages.push(new RetinaImage(image));
      }
      existing_onload();
    }
  };

  Retina.isRetina = function(){
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                      (min--moz-device-pixel-ratio: 1.5),\
                      (-o-min-device-pixel-ratio: 3/2),\
                      (min-resolution: 1.5dppx)";

    if (root.devicePixelRatio > 1)
      return true;

    if (root.matchMedia && root.matchMedia(mediaQuery).matches)
      return true;

    return false;
  };

  Retina.isPhone = function() {
    return /(iPhone|iPod).*/i.test(navigator.userAgent);
  };

  Retina.isPad = function() {
    return /(iPad).*/i.test(navigator.userAgent);
  };

  Retina.deviceSuffix = function() {
    if (Retina.isPhone()) {
      return '~iphone';
    } else if (Retina.isPad()) {
      return '~ipad';
    }
    return '';
  }

  Retina.scaleSuffix = function() {
    if (Retina.isRetina()) {
      return '_@2';
    }

    return '_';
  }


  Retina.highResPath = function(path) {
    return path.replace(/\.\w+$/, function(match) { 
        return Retina.scaleSuffix() + Retina.deviceSuffix() + match; 
    });
  }

  function RetinaImage(el) {
    this.el = el;
    this.path = Retina.highResPath(this.el.getAttribute('src'));
    this.swap();
  }

  root.RetinaImage = RetinaImage;

  RetinaImage.prototype.swap = function() {

    var that = this;
    function load() {
      if (! that.el.complete) {
        setTimeout(load, 5);
      } else {
        //that.el.setAttribute('width', that.el.offsetWidth);
        //that.el.setAttribute('height', that.el.offsetHeight);
        that.el.setAttribute('src', that.path);
      }
    }
    load();
  }
  
  Retina.init(root);

})();