Responsive design image efficiency stats - will display a table of results for all images and background images (ignores 0/1px tracking pixels)

image-stats.js

// Requires jQuery and Underscore or LoDash

$ = jQuery;

function stripURLWrap(cssBackground){
  return cssBackground.replace(/^url/g,'').replace(/\(|\)/g, '')
}

function getPercentage(number) {
  return Math.floor((Math.round( number * 10 ) / 10) * 100) + '%';
}

var imageStats = [];

_.each( $('*'), function(node){
  var $node = $(node);
  var hasImage = $node.attr("src") || $node.css('backgroundImage');

  if (!hasImage) return;

  var imageURL = $node.attr("src") || stripURLWrap($node.css('backgroundImage'));

  var imageUrlIsValid = imageURL.toLowerCase().split('?')[0].match(/\.jpg|\.png|\.gif/)

  if (!imageUrlIsValid) return;

  var nodeImage = new Image();
  nodeImage.src = imageURL;

  // images with a src width less than 1 are probably tracking pixels
  // so we want to ignore them.
  if (nodeImage.width > 1 || nodeImage.height > 1) {
    imageStats.push({
      efficiency: getPercentage( ($node.outerWidth() / nodeImage.width) )  + " / " + getPercentage( ($node.outerHeight() / nodeImage.height) ),
      displaySize: $node.outerWidth() + " x " + $node.outerHeight(),
      srcSize: nodeImage.width + " x " + nodeImage.height,
      srcURL: imageURL,
      node: node
    })
  }

});

console.table(imageStats);

table.png