Getting an image's original width and height in jQuery

Question

I need to get the original width and height of an image given a specific source. My current method is:

img.tag = "<img style='display:none;' src='" + img.src + "' />";
img.Owidth = 0;
img.Oheight = 0;

$(img.tag).load(function() {
    img.Owidth = $(this).width();
    img.Oheight = $(this).height();
}).appendTo(img.parent());

With Owidth and Oheight being the original dimensions of the loaded image. I'm wondering if there is a better way to do this given that:

• The image could either already be loaded, but displayed at a different size than its original size.
• The image has not yet been loaded at all

Humbertohumble

I'm doing something very similar and it's working pretty good for me. I'm working on a viewer that could show images at original size, fit width, fit all, etc., so it's helpful to know the original size, and I'm lazy loading images. Is your current code working for you and you're just wondering about a better way to do it? – Gisela

This code is working fine for me, MrOBrian and yeah, I just want to see if there is a more efficient way to accomplish this. – Humbertohumble

This seems a double of this question - though the accepted answer here seems the best of them all. – Faber

Answer 1

Cross-Browser:

jsFiddle demo

$("<img/>").load(function(){
    var width  = this.width,
        height = this.height; 
    alert( 'W='+ width +' H='+ height);
}).attr("src", "image.jpg");

---

HTMLImageElement properties / HTML5 compliant browsers

If you want to investigate about all the HTMLImageElement properties: https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
Many of those properties are available already in modern, HTML5 compliant browsers, and accessible using jQuery's .prop() metod

jsFiddle demo

var $img = $("#myImage");

console.log(
    $img.prop("naturalWidth") +'\n'+  // Width  (Natural)
    $img.prop("naturalHeight") +'\n'+ // Height (Natural)
    $img.prop("width") +'\n'+         // Width  (Rendered)
    $img.prop("height") +'\n'+        // Height (Rendered)
    $img.prop("x") +'\n'+             // X offset
    $img.prop("y")                    // Y offset ... 
);

Enwreathe

I think that it's better to append the image to the DOM at the end of the load() method. Otherwise I don't get the correct size (tested in Firefox). – Tresatrescha

@Tresatrescha tested in FF works. As you can see, no matter where you use appendTo (you can also remove .appendTo( from the script above) the image is loaded into that in-memory HTML image element. So I don't get your comment. – Enwreathe

The problem appears if the image size is modified in CSS. Here is a fiddle that illustrates the problem (and the solution): jsfiddle.net/tsjg7/1 – Tresatrescha

That's exactly my point. If you want the original image size do not append it to the dom before the load function if over, or you'll get a wrong size if css rules are applied to the image. I think that the fiddle illustrate it well. – Tresatrescha

This is good, but one suggestion, the load definition should come before setting the src. You are creating a race condition where the image might be loaded before the load function is defined. – Instantly

@JeffRyan exactly. Crystal eyes, good suggestion. Edited. :) – Enwreathe

Answer 2

For Chrome and Firefox (and hopefully IE soon), you can use...

var width = $('img').prop('naturalWidth');
var height = $('img').prop('naturalHeight');

Jeepers

you are hero :) – Hoogh

How would one display these values from the code you have posted next to the image, or somewhere on the image itself? – Mousseline