This doesn't include checks to see if this is supported on certain browsers.

image-performance.js

/**
 * Detects using window.performance
 * We can serve small images first, then upgrade on faster connections
 * See: http://mattandrews.info/talks/port80-2013/#/
 */

(function () {
  var perf = window.performance,
      start = perf.timing.requestStart, // just before page is requested
      end = perf.timing.responseStart, // first byte received
      totalTime = end - start;

  /** Responsible for upgrading images */
  var Performance = {
    images: document.getElementsByTagName('img'),
    timing: totalTime,

    /** Kick things off */
    init: function () {
      this.imageSize();
    },

    /** Loop through images, detecting if they have a 'data-large' attribute */
    imageSize: function () {
      var largeSrc = null,
          image = null;

      for (var i = Performance.images.length - 1; i >= 0; i--) {
        image = this.images[i];
        largeSrc = image.getAttribute('data-large');

        if (largeSrc !== null) {
          image.src = largeSrc;  
        }
      }
    }
  };

  if (Performance.timing < 1000) {
    Performance.init();
  }
}());