Access image dimensions in PhantomJS - phantomjs

Question

I'm trying to find the size of the images being downloaded by a page; the obvious solution would be,
var imgs = [];
var imgTags = document.getElementsByTagName('img');
for (i = 0; i < imgTags.length; i++) {
var img = imgTags[i];
imgs.push({src: img.src, h: img.height, w: img.width});
}
but that will only retrieve the rendered size — for example, the ubiquitous spacer.gif will be 1x4, 4x4, etc., while it's obviously 1x1.
Moreover, that kind of document scanning doesn't seem to be able to pick the images that were downloaded, but not used in the img tags: CSS, backgrounds, etc.
The inspector in WebKit-based browsers seems to be pretty capable of rendering a preview — where does it take it from?

Answer 1

Hopefully, there two important properties for this : naturalWidth and naturalHeight (doc here)
Here is a sample script (first image of stackoverflow)
var page = require('webpage').create();
var url = 'http://www.stackoverflow.com/';
page.open(url, function(status) {
var first_image_dim = page.evaluate(function() {
return {width :$('img')[0].naturalWidth, height:$('img')[0].naturalHeight};
});
console.log(JSON.stringify(first_image_dim));
phantom.exit();
});