Grab all png's from a page an displays them in an overlay. Intended use if for discovery of PNG assets that should probably be JPG's to save on weight.

example_results.png

gistfile1.js

$ = jQuery;
 
function stripURLWrap(cssBackground){
  return cssBackground.replace(/^url/g,'').replace(/\(|\)/g, '')
}
 
var imageStats = [];
var pngImageElements = [];
 
_.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;

  if ( (imageURL).match(/\.png|\.PNG/) ){
    pngImageElements.push('<div class="da-png" style="margin-bottom: 10px;"><img src="' + imageURL + '" style="border: solid 5px #ccc; display: inherit;"></img>' + imageURL + '</div>')
  }
 
});
 
var pngImageElementsUniq = _.uniq(pngImageElements)



// create a modal
var modalElement = '<div style="position: absolute; top: 0; right: 0; left: 0; height: auto; background-color: white; border: solid 20px rgba(0,0,0,0.2); overflow-x: hidden; overflow-y: auto; z-index: 10000000000; padding: 10px;">' + pngImageElementsUniq.join('') + '</div>';
$('body').append(modalElement)