Entry

How can I find the size of an image?

How can I find the width/height of an IMG/Image?

How can I find the file size of an IMG/Image?

Sep 19th, 2003 07:17
Klaus Bolwin, Martin Honnen,

The pixel width/height of an image are readable in NN3+ and IE4+:
  document.imageName.width
  document.imageName.height
for <IMG NAME="imageName" SRC="whatever.gif"> respectively
  var img = new Image();
  img.src = 'whatever.gif';
  ...
  alert(img.width + 'x' + img.height);
Note that an image has to be loaded to have the width and height 
available so consider using the onload handler e.g.
  function showDimensions () {
    alert(this.width + 'x' + this.height);
  }
  var img = new Image();
  img.onload = showDimensions;
  img.src = 'whatever.gif';
Note further that in IE4+ and NN6 you can not only read but also set 
the width/height of an IMG element.
IE4+ also has a
  fileSize
property for IMG element/Image objects giving the size in bytes. Thus
  var img = document['imageName'];
  if (img.fileSize) 
    alert(img.fileSize)
will show the file size if the property exists.
In NN7 (6?) / Mozilla you can get the original width and height of an
image by:
img = document.getElementById(imageid);
alert(img.naturalWidth+"x"+img.naturalHeight);
these values may differ from img.width and img.height due to CSS
settings or altering the image size with javascript.