5 ways to get Image width and height javascript examples

Image contains width and height based on resolution. Some times we need to find the width and height of an image using javascript and jquery.

Images are of different types png, JPEG and SVG.

This post covers how to find the image height and width in Javascript,Jquery and Nodejs

  • Using Jquery Selectors
  • Plain Javascript

Plain JavaScript to get height and width of an image

In Plain javascript, Two ways we can get height and width of an image

  • Image object
  • naturalHeight and naturalWidth

Image object

In javascript, We can use load the image using src attribute in javascript and calling width and height once image is loaded using onload function

Here is an example

<!DOCTYPE html>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <h3>Get Image Height and width</h3>
    <img width="200px" height="200px" src="demo.jpg">
    let img = new Image();
    img.onload = function() {
        console.log("Image Width: ", this.width)
        console.log("Image Height: ", this.height)
    img.src = "demo.jpg";

naturalHeight and naturalWidth example

First querySelector of document object used to select an image tag querySelector method returns DOM object. Thas has following properties

  • naturalHeight
  • naturalWidth

These properties returns actual weight and height of an image not values of img tag with width and height values. For example, displayed an image using img tag in html

    <img width="200px" height="200px" src="demo.jpg" id="imageid">

Here is an javascript code to get source image height and width

    console.log("Image Width: ", document.querySelector("img").naturalWidth);
    console.log("Image Width: ", document.querySelector("img").naturalHeight)

and the output is

Image Width:  4793
Image Height:  3194

if you want to get the congigured styles of an width and height for an imag tag, Here is an exmaple

    console.log("Image Width: ", document.querySelector("img").offsetWidth);
    console.log("Image Width: ", document.querySelector("img").offsetHeight)

And the output:

Image Width:  200
Image Width:  200

And also we can use different selectors like getElementById to select an image


Jquery to find the real height and width of an image

In JQuery it is very easy to get height and width of an image that displayed with styles configured.

There is no direct method to retrieve the real source image height and width, We can get DOM element using selector of an image and can use naturalHeight and naturalWidth.

Here is an Jquery example

<!DOCTYPE html>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <h3>Get Image Height and width</h3>
    <img width="200px" height="200px" src="demo.jpg" id="imageid">

    $(document).ready(function() {
        console.log("Width: " + $("#imageid").width());
        console.log("Height: " + $("#imageid").height());
         var realValues = $("#imageid").;
               console.log("Real Width: " + realValues.naturalWidth);
               console.log("Real Height: " + realValues.naturalHeight;


To Sum Up, There are multiple ways we can find image height and width in javascript and jquery.

The above discussed about how to get real image height and widht as well as styles displayed to image like width and height.

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.

Related posts

Javascript - Array vs JSON vs Object basics with Examples

How to convert json to/from  object in angular|Typescript 

Angular ngFor index - How to get current last even and odd index?

How to convert Set to String space separated in javascript

Learn Service Worker for application offline access

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.