How to get original image size (width & height) in JavaScript

Answer: Use the HTML5 `naturalWidth` and `naturalHeight`

You can easily find the original or intrinsic width and heigh of an image using the HTML5 image naturalWidth and naturalHeight properties. These properties are supported in all major web browsers such as Chrome, Firefox, Safari, Opera, Internet Explorer 9 and above.

Let's take a look at an example to understand how it basically works:

Example

Try this code »

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
<meta charset="utf-8">
```

<title>JavaScript Find Real Image Width and Height</title>

```
<script>
```
```
    function imgSize(){
```

        var myImg = document.querySelector("#sky");

        var realWidth = myImg.naturalWidth;

        var realHeight = myImg.naturalHeight;

        alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);

```
    }
```
```
</script>
```
```
</head>
```
```
<body>
```

    <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">

    <p><button type="button" onclick="imgSize();">Get Original Image Size</button></p>

```
</body>
```
```
</html>
```

Alternatively, if you want to perform the same task with jQuery you can use the load() method in combination with the attr() method, as shown in the following example:

Example

Try this code »

```
<!DOCTYPE html>
```
```
<html lang="en">
```
```
<head>
```
```
<meta charset="utf-8">
```

<title>jQuery Get Real Image Dimensions</title>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

```
<script>
```
```
$(document).ready(function(){
```
```
    $("button").click(function(){
```
```
        var img = $("#sky");
```

        // Create dummy image to get real width and height

        $("<img>").attr("src", $(img).attr("src")).load(function(){

```
            var realWidth = this.width;
```

            var realHeight = this.height;

            alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);

```
        });
```
```
    });   
```
```
});
```
```
</script>
```
```
</head>
```
```
<body>
```

    <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">

    <p><button type="button">Get Original Image Size</button></p>

```
</body>
```
```
</html>
```

Related FAQ

Here are some more FAQ related to this topic:

Previous Page Next Page

How to get original image size (width & height) in JavaScript

Answer: Use the HTML5 `naturalWidth` and `naturalHeight`

Example

Example

Related FAQ

Your Feedback:

Interactive Tools

How to get original image size (width & height) in JavaScript

Answer: Use the HTML5 naturalWidth and naturalHeight

Example

Example

Related FAQ

Your Feedback:

About Us

Contact

Interactive Tools

Answer: Use the HTML5 `naturalWidth` and `naturalHeight`