How to Get Image Dimensions (Width & Height) with Javascript

Width and height of an image can be found using the naturalWidth and naturalHeight properties of the image DOM element.

Waiting for the Image to Load

Before finding the dimensions of the image, it should be loaded first. You can use the load event handler on the image to find when the image has finished loading. Once it has been fetched you can find the dimensions of the image.

// jQuery
$("#img-element").on('load', function() {
	// Original width of image
	var image_width = $(this).get(0).naturalWidth;

	// Original height of image
	var image_height = $(this).get(0).naturalHeight;
});

// Pure javascript
document.querySelector("#img-element").addEventListener('load', function() {
	// Original width of image
	var image_width = this.naturalWidth;

	// Original height of image
	var image_height = this.naturalHeight;
});

Checking Whether Image is Loaded from Cache

If the image has been loaded before, and the next time when you re-load the page, the image may be loaded from the browser cache. In that case load event handler may not be executed for some browsers. So before adding the load event, check whether image is already present in the browser cache.

The complete property can be used for this. This property returns true if the browser has finished fetching the image. Please note that it returns a true even if the image could not fetched — the return value just denotes that the browser has done its work, successful or unsuccessful. It also shows true if the image has no "src" value.

Complete Codes

With jQuery :

// Image is loaded from cache
if($("#img-element").get(0).complete) {
	var image_width = $("#img-element").get(0).naturalWidth;

	var image_height = $("#img-element").get(0).naturalHeight;
}
else {
	$("#img-element").on('load', function() {
		var image_width = $(this).get(0).naturalWidth;

		var image_height = $(this).get(0).naturalHeight;
	});
}

With pure Javascript :

// Image is loaded from cache
if(document.querySelector("#img-element").complete) {
	var image_width = document.querySelector("#img-element").naturalWidth;

	var image_height = document.querySelector("#img-element").naturalHeight;
}
else {
	document.querySelector("#img-element").addEventListener('load', function() {
		var image_width = this.naturalWidth;

		var image_height = this.naturalHeight;
	});
}

Useful Links

Checkout this answer on Stackoverflow. It shows various test cases on using width, naturalWidth properties.