How to get image size (height & width) using JavaScript?

Are there any JavaScript or jQuery APIs or methods to get the dimensions of an image on the page?

You can programmatically get the image and check the dimensions using Javascript...

const img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

This can be useful if the image is not a part of the markup.

clientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Also (in addition to Rex and Ian's answers) there is:

imageElement.naturalHeight

and

imageElement.naturalWidth

These provide the height and width of the image file itself (rather than just the image element).

If you are using jQuery and you are requesting image sizes you have to wait until they load or you will only get zeroes.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

I think an update to these answers is useful because one of the best-voted replies suggests using clientWidth and clientHeight, which I think is now obsolete.

I have done some experiments with HTML5, to see which values actually get returned.

First of all, I used a program called Dash to get an overview of the image API. It states that height and width are the rendered height/width of the image and that naturalHeight and naturalWidth are the intrinsic height/width of the image (and are HTML5 only).

I used an image of a beautiful butterfly, from a file with height 300 and width 400. And this Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Then I used this HTML, with inline CSS for the height and width.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Results:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

I then changed the HTML to the following:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

i.e. using height and width attributes rather than inline styles

Results:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

I then changed the HTML to the following:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

i.e. using both attributes and CSS, to see which takes precedence.

Results:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

How to get image size (height & width) using JavaScript?

Related

Recent Posts