Get height/width of image in Javascript (ideally without loading the image at all)

The following code will get you the width/height without waiting for the image to load completely, making it significantly faster than the other solutions here.

For testing change abc123 in image source to any random string to prevent caching.

There is a JSFiddle Demo as well.

<div id="info"></div>
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/d/da/Island_Archway,_Great_Ocean_Rd,_Victoria,_Australia_-_Nov_08.jpg?abc123">

<script>
getImageSize($('#image'), function(width, height) {
    $('#info').text(width + ',' + height);
});

function getImageSize(img, callback) {
    var $img = $(img);

    var wait = setInterval(function() {
        var w = $img[0].naturalWidth,
            h = $img[0].naturalHeight;
        if (w && h) {
            clearInterval(wait);
            callback.apply(this, [w, h]);
        }
    }, 30);
}
</script>

The height and width properties of an image element (like the offsetHeight and offsetWidth properties of any element), return 0 instead of the actual values until it has been added to some document (and if its style.display attribute is not set to "none").
A common way to work around this is displaying the image outside the visible area of your page; your users will not see it, and its height and width properties will return the actual values instead of 0. Then you should remove the image from the document.

var img = new Image();
img.src = "./filename.jpg";
img.style.position = "absolute";
img.style.left = -9999;             // Image width must not exceed 9999 pixels
img.style.visibility = "hidden";    // Maybe you can remove this
document.body.appendChild(img);
var imgHeight = img.height;
var imgWidth = img.width;
alert("image height = "  + imgHeight + ", image width = " + imgWidth); 
document.body.removeChild(img);     // Removes the image from the DOM (This does not destroy the image element)

This solution get the image width/height without loading the image at all.

The trick here, is only load the first 1k of the image, where the metadata is placed, and then parse this info. This code only works for .jpg images. Need some adaptation for work with another formats.

function jpg1k(url) {

  // indexOf for multi-pattern
  function indexOfMulti(arr, pattern) {
    var found,
        _index = arr.indexOf(pattern[0]);

    while (_index > -1) {
      found = true;

      var _idx = _index;
      for (var patt of pattern) {
        if (arr.indexOf(patt, _idx) !== _idx) {
          found = false;
          break;
        }

        _idx++;
      }

      if (found) {
        return _index;
      }

      _index = arr.indexOf(pattern[0], _index + 1);
    }

    return -1;
  }
  

  const SOF_B = [ 0xFF, 0xC0 ], // Start Of Frame (Baseline),
        SOF_P = [ 0xFF, 0xC2 ]; // Start Of Frame (Progressive)

  
  return new Promise(function(res, rej) {
    var xhr = new XMLHttpRequest;

    xhr.onreadystatechange = function () {
      if (xhr.readyState != 4) {
        return;
      }

      const JPG = new Uint8Array(xhr.response);

      const IDX_SOF_B = indexOfMulti(JPG, SOF_B);
      if (IDX_SOF_B > -1) {
        var h = JPG.slice(IDX_SOF_B + 5, IDX_SOF_B + 7),
            w = JPG.slice(IDX_SOF_B + 7, IDX_SOF_B + 9);

        h = parseInt(h[0].toString(2) + h[1].toString(2).padStart(8, '0'), 2);
        w = parseInt(w[0].toString(2) + w[1].toString(2).padStart(8, '0'), 2);
        return res({ w: w, h: h });
      }

      const IDX_SOF_P = indexOfMulti(JPG, SOF_P);
      if (IDX_SOF_P > -1) {
        var h = JPG.slice(IDX_SOF_P + 5, IDX_SOF_P + 7),
            w = JPG.slice(IDX_SOF_P + 7, IDX_SOF_P + 9);

        h = parseInt(h[0].toString(2) + h[1].toString(2).padStart(8, '0'), 2);
        w = parseInt(w[0].toString(2) + w[1].toString(2).padStart(8, '0'), 2);
        return res({ w: w, h: h });
      }

      return rej({ w: -1, h: -1 });
    };

    xhr.open('GET', url, true);
    xhr.responseType = "arraybuffer";
    xhr.setRequestHeader('Range', 'bytes=0-1024');
    xhr.send(null);
  });
  
}

jpg1k('path_to_your_image.jpg')
  .then(console.log);

For PNG, we need adapt the code to PNG struct, but we only need the first 24 bytes to determine the width/height, so we dont need to request 1k like jpg.

function png24b(url) { 
  return new Promise(function(res, rej) {
    var xhr = new XMLHttpRequest;

    xhr.onreadystatechange = function () {
      if (xhr.readyState != 4) {
        return;
      }

      const PNG = new Uint8Array(xhr.response),
            decoder = new TextDecoder();

      // PNG.slice(0, 8)      === [  _  P  N  G CR LF  _  _ ]
      // PNG.slice(8, 16)     === [ CHUNKLENGTH CHUNKFORMAT ]
      // IHDR must be the first CHUNKFORMAT:
      // PNG.slice(16, 24)    === [ WIDTH------ HEIGHT----- ]

      if ( decoder.decode(PNG.slice(1, 4)) === 'PNG' ) {
        const view = new DataView(xhr.response);
        return res({ w: view.getUint32(16), h: view.getUint32(20) });
      }

      return rej({ w: -1, h: -1 });
    };

    xhr.open('GET', url, true);
    xhr.responseType = "arraybuffer";
    xhr.setRequestHeader('Range', 'bytes=0-24');
    xhr.send(null);
  });
}

png24b('path_to_your_image.png')
  .then(console.log);

If you check this link here is a method to get all the image dimensions in a directory with PHP which checks it without having to load it to the page. This might help you. You can pass it to your js with a

var dimensions = <?php echo json_encode($imageDimensions)?>

PHP Get dimensions of images in dir

I think this is a better approach if you really don't want to load the images