Responsive design image efficiency stats

This short and dirty script that will display a table of results for all images and background images (ignores 0/1px tracking pixels). It compares the elements display dimensions to the image src size.

Responsive design is cool, but it's important to make sure you're not sending more bytes over the wire than is necessary (especially with responsive design + elements that use background-size: cover). At Vox Media, we use image lazy loading combined with smart javascript to deliver the best image src size for a given element.

The script currently doesn't take scale/DPI into account, so if your testing for mobile devices you can either make a pull request (https://gist.github.com/okor/41e86dc2019075865d6a and I'll update this tip) or more easily just emulate the device in Chrome and adjust the scale / DPI multiplier to 1, rather than the normal 2 for say an iPhone 5.

So this:

Should be set to this:

// 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);

The resulting stats will look something like this: