Get the real width and height of an image with JavaScript? (in Safari/Chrome)



I am creating a jQuery plugin.

How do I get real image width and height with Javascript in Safari?

Following works with Firefox 3, IE7 and Opera 9:

var pic = $("img")

// need to remove these in of case img-element has set width and height

var pic_real_width = pic.width();
var pic_real_height = pic.height();

But in Webkit browsers like Safari and Google Chrome values are 0.

Frank Bannister

Posted 2008-11-25T19:44:38.617

Reputation: 1 572

4The accepted answer uses the image load event. Makes perfect sense, but turns out to be an unreliable solution in situations where images can be cached (much to my dismay). – Nosredna – 2009-11-06T19:41:10.910

7The correct answer to this question is to simply use the naturalWidth and naturalHeight properties. No hackery required. – David Johnstone – 2013-06-26T11:25:55.050

You could also do exactly what you're doing on window load instead of document ready – user1380540 – 2015-02-06T19:59:43.253

My take on this may help you, tested in latest Webkit.

– xmarcos – 2011-09-27T17:11:00.563


@Nosredna, you may be interested in the imagesLoaded function that will fire even when images have been cached.

– bejonbee – 2011-09-27T17:14:11.547



Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I'd recommend using an image's onload event. Here's a quick example:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.

To avoid any of the effects CSS might have on the image's dimensions, the code above makes an in memory copy of the image. This is a very clever solution suggested by FDisk.

You can also use the naturalHeight and naturalWidth HTML5 attributes.


Posted 2008-11-25T19:44:38.617

Reputation: 15 863

5That's clever, didn't know you could do $(img).load(); – SeanJA – 2009-09-18T02:24:18.667

10The problem you may have here is that load() will be executed asynchronously so if you want to access width and height — they may not been set yet. Instead do “the magic“ in the load() itself! – daGrevis – 2012-05-15T14:58:48.370

1On some browsers, load does not fire on a cached image (which makes me sad). Opera, for one. But Opera returns to correct width and height immediately, so you can work around that. Unfortunately, the latest Chrome on my machine seems to suffer from the same problem, so I'd say this solution is unreliable. – Nosredna – 2009-11-06T15:17:43.857

how can we turn these true values to a gloab variable ? – Barlas Apaydin – 2012-08-03T21:09:32.473

You're entirely correct Nosredna. I completely overlooked that case. In the past I've gotten around this bug/feature by executing img.src = img.src after I attached the img's onload event. I'll update my answer to handle this case. – Xavi – 2009-11-09T13:25:19.170

This is a great solution and worked for the most part but IE will cause problems if you handle more then one image. If you want to fix then then add a random parameter to the image url so IE fires the load function properly. +"?"+new Date().getTime() Got that from here:

– Dominik – 2012-09-18T16:26:46.000

2I recently learned that the img.src = img.src doesn't works in Chrome 3.0. That said, I believe I may have found a work around: set the image source to empty string then back to the original source. I'll update my answer. – Xavi – 2009-12-30T04:01:15.723

if use .load() i can't update parent variable, how to do that? – TomSawyer – 2013-02-21T11:42:23.540

@TomSawyer I'm sorry, I don't understand. You can update any variable from within the function you pass into .load. Though keep in mind the .load is asynchronous, so all the code that uses the height and width needs to be called from the function passed into .load. – Xavi – 2013-02-21T19:31:22.523

3In addition to width and height you should probably also remove min-width, min-height, max-width and max-height as they could also influence the image dimensions. – mqchen – 2010-06-06T18:41:33.830

1From experience I can tell you that it's important to always set your load event BEFORE you set the src. Otherwise mysterious bugs may show up. – Isius – 2013-12-18T20:48:26.137

2I'm testing on Firefox 3 and $(document).ready() also doesn't work as well. – hlfcoding – 2009-03-29T02:24:16.377

I suggest reading FDisk's answer before adopting this convoluted approach. (I realize that this question is several months old, but I've added this comment for the benefit of future visitors.) – davidchambers – 2011-02-07T07:36:26.380

5FDisk's solution is a very clever. Unfortunately the solution as he has written it will only work if the image is cached or if the page has already finished downloading. If the image is not cached or if this code is called before window.onload, a height/width of 0 might be returned. In any case, I've integrated FDisk's idea into the solution above. – Xavi – 2011-02-10T02:26:14.343

You could also use the HTML5 attributes naturalHeight and naturalWidth. – sandstrom – 2011-06-20T15:26:34.993

5when i try to console.log(pic_real_height) i get undefined every time. chrome, FF, IE9. – helgatheviking – 2011-08-13T20:59:39.913

For jQuery 3.0+ use .on("load", function(){ ... }) instead of .load(...). – Štefan Schindler – 2018-09-14T10:22:30.673


Use the naturalHeight and naturalWidth attributes from HTML5.

For example:

var h = document.querySelector('img').naturalHeight;

Works in IE9+, Chrome, Firefox, Safari and Opera (stats).


Posted 2008-11-25T19:44:38.617

Reputation: 9 104

3@DavidJohnstone An example of them being used might help. But I agree, definitely deserves to be higher up. – Stephen – 2013-07-19T22:36:23.787

5This doesn't seem to work in the latest version of FireFox (30.0) unless the image already exists in the cache. – jkinz – 2014-07-03T18:09:53.850

1I agree with David Johnstone. This is great news. – jchwebdev – 2015-07-03T20:06:41.730

Note that you still need to wait for the image to load – Jesús Carrera – 2015-12-14T12:02:19.637

No, clientHeight/clientWidth explicitly don't do what the question asks. It needs to return the height and width of the image, not the height and width of the image as it looks on the page. naturalWidth and naturalHeight are correct. – Jeroen van den Broek – 2017-11-17T17:25:00.287


function getOriginalWidthOfImg(img_element) {
    var t = new Image();
    t.src = (img_element.getAttribute ? img_element.getAttribute("src") : false) || img_element.src;
    return t.width;

You don't need to remove style from the image or image dimensions attributes. Just create an element with javascript and get the created object width.


Posted 2008-11-25T19:44:38.617

Reputation: 4 489


As Xavi mentioned, this fails in IE8 and sometimes depending on image caching. So I coupled it with this approach, and it works perfect: bind the load event first, then assign the image object its source

– Kevin C. – 2012-07-18T02:34:40.627

What exactly should you pass in to this function? – Himmators – 2013-05-16T14:33:01.633

3Since a few months, cloning an image with jquery (using the latest Chrome) and getting it's properties, always returns 0x0

So far this is the only solutions that works (have tested all the others in this page) Before returning, I set t=null too. – Omiod – 2010-08-14T09:50:10.963

1FDisk is not suggesting cloning the image with jQuery. He's suggesting creating a new Image object, then looking at its width property. This is a simple, elegant approach. FDisk, you have my vote. :) – davidchambers – 2011-02-07T07:33:22.590

3This is a very clever way to avoid css issues. Unfortunately the solution as written above will only work if the image is cached or has already finished downloading. If the image is not cached or if this code is called before window.onload, a width of 0 might be returned. – Xavi – 2011-02-10T02:22:42.680

1I'm using this approach in a website for the mobile phones in image gallery. Bigger images then the resolution is displayed with with 100% in css and smaller in original dimensions. – FDisk – 2011-03-09T20:09:38.057

Dom element object – FDisk – 2016-03-09T11:29:11.153


The root problem is that WebKit browsers (Safari and Chrome) load JavaScript and CSS information in parallel. Thus, JavaScript may execute before the styling effects of CSS have been computed, returning the wrong answer. In jQuery, I've found that the solution is to wait until document.readyState == 'complete', .e.g.,

  if (jQuery.browser.safari && document.readyState != "complete"){
    setTimeout( arguments.callee, 100 );
  ... (rest of function) 

As far as width and height goes... depending on what you are doing you may want offsetWidth and offsetHeight, which include things like borders and padding.


Posted 2008-11-25T19:44:38.617

Reputation: 289

Yeah, that's the reason. A better workaround is to use jQuery's load-event. – Frank Bannister – 2008-11-26T00:26:04.320

6$(window).load(function(){ ... }); helped in my case – kolypto – 2010-09-05T23:11:40.873


There's a lot of discussion in the accepted answer about a problem where the onload event doesn't fire if an image is loaded from the WebKit cache.

In my case, onload fires for cached images, but the height and width are still 0. A simple setTimeout resolved the issue for me:

$("img").one("load", function(){
    var img = this;
        // do something based on img.width and/or img.height
    }, 0);

I can't speak as to why the onload event is firing even when the image is loaded from the cache (improvement of jQuery 1.4/1.5?) — but if you are still experiencing this problem, maybe a combination of my answer and the var src = img.src; img.src = ""; img.src = src; technique will work.

(Note that for my purposes, I'm not concerned about pre-defined dimensions, either in the image's attributes or CSS styles — but you might want to remove those, as per Xavi's answer. Or clone the image.)


Posted 2008-11-25T19:44:38.617

Reputation: 2 387

I had this very problem with IE7 & IE8.

setTimeout() worked for me for those browsers.

Thank you! – Vasile Tomoiaga – 2013-12-12T12:25:34.277


this works for me (safari 3.2), by firing from within the window.onload event:

$(window).load(function() {
  var pic = $('img');


  alert( pic.width() );
  alert( pic.height() );


Posted 2008-11-25T19:44:38.617

Reputation: 63 882

Yeah! Didn't work from $(document).ready(function(){}); Thanks! It needs to have the image fully loaded before it can read it. Ofcourse. – Frank Bannister – 2008-11-25T20:30:43.453


You can programmatically get the image and check the dimensions using Javascript without having to mess with the DOM at all.

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
img.src = '';


Posted 2008-11-25T19:44:38.617

Reputation: 1 381

2This is the best solution! It works even if the image is not pre-loaded or cached. – marlar – 2012-09-21T18:48:26.307


How we get right real dimensions without a blink real image:

(function( $ ){
         alert("First example:This works only for HTML code without CSS width/height definition.");
         w=$(this, 'img')[0].width;
         h=$(this, 'img')[0].height;

         alert("This is a width/height on your monitor: " + $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);

         //This is bad practice - it shows on your monitor
         $(this, 'img')[0].removeAttribute( "width" );
         $(this, 'img')[0].removeAttribute( "height" );
         alert("This is a bad effect of view after attributes removing, but we get right dimensions: "+  $(this, 'img')[0].width+"/"+$(this, 'img')[0].height);
         //I'am going to repare it
         $(this, 'img')[0].width=w;
         $(this, 'img')[0].height=h;
         //This is a good practice - it doesn't show on your monitor
         ku=$(this, 'img').clone(); //We will work with a clone
         ku.attr( "id","mnbv1lk87jhy0utrd" );//Markup clone for a final removing
         ku[0].removeAttribute( "width" );
         ku[0].removeAttribute( "height" );
         //Now we still get 0
         alert("There are still 0 before a clone appending to document: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Hide a clone
         ku.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'}); 
         //A clone appending
         $(document.body).append (ku[0]);
         alert("We get right dimensions: "+ $(ku)[0].width+"/"+$(ku)[0].height);
         //Remove a clone

         //But a next resolution is the best of all. It works in case of CSS definition of dimensions as well.
         alert("But if you want to read real dimensions for image with CSS class definition outside of img element, you can't do it with a clone of image. Clone method is working with CSS dimensions, a clone has dimensions as well as in CSS class. That's why you have to work with a new img element.");
         imgcopy=$('<img src="'+ $(this, 'img').attr('src') +'" />');//new object 
         imgcopy.attr( "id","mnbv1lk87jhy0aaa" );//Markup for a final removing
         imgcopy.css({"visibility" : "hidden",'position':'absolute','left':'-9999px'});//hide copy 
         $(document.body).append (imgcopy);//append to document 
         alert("We get right dimensions: "+ imgcopy.width()+"/"+imgcopy.height());

})( jQuery );



It works with <img class="toreaddimensions"...


Posted 2008-11-25T19:44:38.617

Reputation: 367


What about image.naturalHeight and image.naturalWidth properties?

Seems to work fine back quite a few versions in Chrome, Safari and Firefox, but not at all in IE8 or even IE9.

Andrew Mackenzie

Posted 2008-11-25T19:44:38.617

Reputation: 3 293

this is not working in my case. giving me NaN in return – saadk – 2017-01-20T06:40:01.513


Jquery has two properties called naturalWidth and naturalHeight, you can use in this way.


Where my-img is a class name used to select my image.

Samuel Santos

Posted 2008-11-25T19:44:38.617

Reputation: 91


These aren't jQuery methods. naturalWidth (and height) are properties on the image element object.

– sandstrom – 2015-12-14T13:39:51.783


As stated before, Xavi answer won't work if images are in the cache. The issue responds to webkit not firing the load event on cached images, so if the width/height attrs are no explicitly set in the img tag, the only reliable way to get the images is to wait for the window.load event to be fired.

The window.load event will fire always, so it's safe to access the width/height of and img after that without any trick.


   //these all work



If you need to get the size of dynamically loaded images that might get cached (previously loaded), you can use Xavi method plus a query string to trigger a cache refresh. The downside is that it will cause another request to the server, for an img that is already cached and should be already available. Stupid Webkit.

var pic_real_width   = 0,
    img_src_no_cache = $('img#someId').attr('src') + '?cache=' +;

$('<img/>').attr('src', img_src_no_cache).load(function(){

   pic_real_width = this.width;


ps: if you have a QueryString in the img.src already, you will have to parse it and add the extra param to clear the cache.


Posted 2008-11-25T19:44:38.617

Reputation: 2 681

1First block of code just gets the dimensions of an element in loaded DOM, not of an image itself... – BasTaller – 2011-11-23T16:53:30.387

1This is exactly the Fastest & Most Effective solution. No plugin, no trick! I'm going to post a similar answer but found yours. – vantrung -cuncon – 2013-07-24T04:31:08.197


My situation is probably a little different. I am dynamically changing the src of an image via javascript and needed to ensure that the new image is sized proportionally to fit a fixed container (in a photo gallery). I initially just removed the width and height attributes of the image after it is loaded (via the image's load event) and reset these after calculating the preferred dimensions. However, that does not work in Safari and possibly IE (I have not tested it in IE thoroughly, but the image doesn't even show, so...).

Anyway, Safari keeps the dimensions of the previous image so the dimensions are always one image behind. I assume that this has something to do with cache. So the simplest solution is to just clone the image and add it to the DOM (it is important that it be added to the DOM the get the with and height). Give the image a visibility value of hidden (do not use display none because it will not work). After you get the dimensions remove the clone.

Here is my code using jQuery:

// Hack for Safari and others
// clone the image and add it to the DOM
// to get the actual width and height
// of the newly loaded image

var cloned, 
    src = 'my_image.jpg', 
    img = [some existing image object];

    cloned = $(this).clone().css({visibility:'hidden'});
    o_width = cloned.get(0).width; // I prefer to use native javascript for this
    o_height = cloned.get(0).height; // I prefer to use native javascript for this
    $(this).attr({width:o_width, height:o_height});

This solution works in any case.

Duane Comeaux

Posted 2008-11-25T19:44:38.617

Reputation: 21


As Luke Smith says, image load is a mess. It's not reliable on all browsers. This fact has given me great pain. A cached image will not fire the event at all in some browsers, so those who said "image load is better than setTimeout" are wrong.

Luke Smith's solution is here.

And there is an interesting discussion about how this mess might be handled in jQuery 1.4.

I have found that it's pretty reliable to set the width to 0, then wait for the "complete" property to go true and the width property to come in greater than zero. You should watch for errors, too.


Posted 2008-11-25T19:44:38.617

Reputation: 58 106

Second link in answer is dead. – Pang – 2017-05-17T10:23:45.957


  //do something, like getting image width/height
  if(this.complete) $(this).trigger("load");

From Chris' comment:

Jerome Jaglale

Posted 2008-11-25T19:44:38.617

Reputation: 1 545


I've done some workaround utility function, using imagesLoaded jquery plugin:

            function waitForImageSize(src, func, ctx){
                if(!ctx)ctx = window;
                var img = new Image();
                img.src = src;
                    var w = this.img.innerWidth||this.img.naturalWidth;
                    var h = this.img.innerHeight||this.img.naturalHeight;
          , w, h, this.img);
                },{img: img, func: func, ctx: ctx}));

You can use this by passing url, function and its context. Function is performed after image is loaded and return created image, its width and height.

waitForImageSize("image.png", function(w,h){alert(w+","+h)},this)

Zdeněk Mlčoch

Posted 2008-11-25T19:44:38.617

Reputation: 458


If the image is already used, you sholud:

  1. set image simensions to initial

    image.css('width', 'initial'); image.css('height', 'initial');

  2. get dimensions

    var originalWidth = $(this).width(); var originalHeight = $(this).height();

Sebastián Rojas

Posted 2008-11-25T19:44:38.617

Reputation: 1 880


There is now a jQuery plugin, event.special.load, to deal with cases where the load event on a cached image doesn't fire:


Posted 2008-11-25T19:44:38.617

Reputation: 91


You can use the naturalWidth and naturalHeight properties of the HTML image element. (Here's more info).

You would use it like this:

//you need a reference to the DOM element, not a jQuery object. It would be better if you can use document.getElementByTagsName or ID or any other native method
var pic = $("img")[0];
var pic_real_width = pic.naturalWidth;
var pic_real_height = pic.naturalHeight;

It seems like this works in all browsers except on IE from version 8 and below.

Jair Reina

Posted 2008-11-25T19:44:38.617

Reputation: 1 197


Recently I needed to find width and height for setting default size of .dialog representing graph. Solution I use was :

 graph= $('<img/>', {"src":'mySRC', id:'graph-img'});
    graph.bind('load', function (){
        wid = graph.attr('width');
        hei = graph.attr('height');

        graph.dialog({ autoOpen: false, title: 'MyGraphTitle', height:hei, width:wid })

For me this works in FF3, Opera 10, IE 8,7,6

P.S. You may be find some more solutions looking inside some plugins like LightBox or ColorBox


Posted 2008-11-25T19:44:38.617

Reputation: 11


To add to Xavi's answer, Paul Irish's github David Desandro's gitgub offers a function called imagesLoaded() that works on the same principles, and gets around the problem of some browser's cached images not firing the .load() event (with clever original_src -> data_uri -> original_src switching).

It's is widely used and updated regularly, which contributes to it being the most robust solution to the problem, IMO.


Posted 2008-11-25T19:44:38.617

Reputation: 6 583


You can find an updated version of the imagesLoaded function here:

– bejonbee – 2011-09-27T17:13:19.490

Yep, David Desandro is hosting the function now. Thanks for reminding me @somethingkindawierd, updated my answer. – RobW – 2011-10-04T17:10:58.707


This works for both cached and dynamically loaded images.

function LoadImage(imgSrc, callback){
  var image = new Image();
  image.src = imgSrc;
  if (image.complete) {
  } else {
    image.onload = function() {
      // clear onLoad, IE behaves erratically with animated gifs otherwise
    image.onerror = function() {
        alert("Could not load image.");

To use this script:

function AlertImageSize(image) {
  alert("Image size: " + image.width + "x" + image.height);
LoadImage("", AlertImageSize);



Posted 2008-11-25T19:44:38.617

Reputation: 1 000


                            var image = $("#fix_img");
                            var w = image.width();
                            var h = image.height();
                            var mr = 274/200;
                            var ir = w/h
                            if(ir > mr){
                            } else{

// This code helps to show image with 200*274 dimention


Posted 2008-11-25T19:44:38.617

Reputation: 579


For functions where you do not want to alter the original placement or image.



Posted 2008-11-25T19:44:38.617

Reputation: 102

This absolutely does not work. It will return undefined for both – Chris Cinelli – 2012-01-04T20:21:17.990


Here's a cross browser solution that triggers an event when your selected images are loaded: you can look up the height and width within the imagesLoaded() function.

Paul Mason

Posted 2008-11-25T19:44:38.617

Reputation: 1 198


Stumbled upon this thread trying to find an answer for my own question. I was trying to get an image's width/height in a function AFTER the loader, and kept coming up with 0. I feel like this might be what you're looking for, though, as it works for me:

tempObject.image = $('<img />').attr({ 'src':"images/prod-" + + ".png", load:preloader });

function preloader() {
    if (imagesLoaded >= itemsToLoad) { //itemsToLoad gets set elsewhere in code
        DetachEvent(this, 'load', preloader); //function that removes event listener

function drawItems() {
    for(var i = 1; i <= xmlProjectInfo.length; i++)
        alert(xmlProjectInfo[i - 1].image[0].width);

Stephen Synowsky

Posted 2008-11-25T19:44:38.617

Reputation: 36


Check out this repository in github!

Great Example to check the Width and Height using Javascript

---Edited is requested from some comments ..

Javascript code:

 function CheckImageSize(){
var image = document.getElementById("Image").files[0];
           createReader(image, function (w, h) {

                alert("Width is: " + w + " And Height is: "+h);

  function  createReader(file, whenReady) {
        var reader = new FileReader;
        reader.onload = function (evt) {
            var image = new Image();
            image.onload = function (evt) {
                var width = this.width;
                var height = this.height;
                if (whenReady) whenReady(width, height);
            image.src =;

and HTML code :

<title>Image Real Size</title>
<script src="ImageSize.js"></script>
<input type="file" id="Image"/>
<input type="button" value="Find the dimensions" onclick="CheckImageSize()"/>

Abdulaziz Alkharashi

Posted 2008-11-25T19:44:38.617

Reputation: 883


I checked out the answer of Dio and it works great for me.

$('#image').fadeIn(10,function () {var tmpW = $(this).width(); var tmpH = $(this).height(); });

Make sure that you call all your functions aso. that handle with the image size in the recaller function of fadeIn().

Thanks for this.


Posted 2008-11-25T19:44:38.617

Reputation: 834


I use different approach, simply make Ajax call to server to get image size when image object is in use.

//make json call to server to get image size

//callback function
function SetImageWidth(data) {

    var wrap = $("div#image_gallery #image_wrap");

    //remove height
    //remove height

    //set image width
    if (data.width > 635) {
    else {

and of course server side code:


$image_width = 0;
$image_height = 0;

if (isset ($_REQUEST['src']) && is_file($_SERVER['DOCUMENT_ROOT'] . $_REQUEST['src'])) {

    $imageinfo = getimagesize($_SERVER['DOCUMENT_ROOT'].$_REQUEST['src']);
    if ($imageinfo) {
       $image_width=  $imageinfo[0];
       $image_height= $imageinfo[1];

$arr = array ('width'=>$image_width,'height'=>$image_height);

echo json_encode($arr);



Posted 2008-11-25T19:44:38.617

Reputation: 11

1this is not a great solution and will take longer than any other solution becouse of the AJAX loading. – – 2011-05-27T23:00:34.613


Another suggestion is to use imagesLoaded plugin.

alert( $(this).width() );
alert( $(this).height() );


Posted 2008-11-25T19:44:38.617

Reputation: 614


This works cross browser

var img = new Image();
$(img).bind('load error', function(e)
    $.data(img, 'dimensions', { 'width': img.width, 'height': img.height });                    
img.src = imgs[i];              

get the dimensions by using




Posted 2008-11-25T19:44:38.617

Reputation: 3 531