View Full Version : How to Get Width and Height of a JPG Image

07-10-2006, 02:46 AM

Can someone please give me a simple example how to get the width and height of a JPG image?

function imagesize(picName, w, h)
var w = ..........
var h = ..........

Thanks in advance.

07-10-2006, 08:02 AM
can try:

i find it easy to set an id to all my elements i will be accessing with script. so first off set an id to your image:

<img src='yourimage.jpg' id='img1'>

then you can do as follows:

var image=document.getElementById('img1');
alert(image.style.width+' '+image.style.height);

and if that doesnt work try detecting its offset with and height.

alert(image.offsetWidth+' '+image.offsetHeight);

now using the offsetWidth/Height in explorer will return the width of the element (ie your image) but it will also add in the width of the images border (typically 1 pixel on all sides, so 2 pixels wider and 2 pixels taller)

07-10-2006, 12:52 PM
<td><a href="Javascript:showPic('xx.jpg', 'img1')"><img src="xx.jpg" id="img1" width="150"></a></td>

function showPic(picName, imgId)
var image=document.getElementById('imgId');
alert(image.style.width+' '+image.style.height);
// what follows creates the window with image size

Thank your for trying to help me, but the above code does not work, according to your reply. What am I missing?


Bill Posters
07-10-2006, 01:18 PM
It's still advisable to use height and width attributes in img elements.
So, this means you should be able to address them as properties of an img element.



- or -


07-10-2006, 01:31 PM
Thanks Bill, but how to include this portion in the function ShowPic()?

I am rather novice you see, and don't know well how to do that. Anyway I appreciate you try to help me.


Bill Posters
07-10-2006, 01:39 PM
function showPic(picName, imgId) {

var image=document.getElementById('imgId');
alert(image.width+' '+image.height);
// what follows creates the window with image size


If all the relevant images are nested directly within such anchor links, then you don't actually need to reference the img's id or src directly.


function showPic(linkEl) {

var image=linkEl.childNodes[0];
alert(image.width+' '+image.height);
// what follows creates the window with image size



<td><a href="#" onclick="showPic(this); return false;"><img src="xx.jpg" id="img1" width="150" height="200"></a></td>

Why do you wish to open a new window to display an image at the same size it's currently being displayed?
Or is this supposed to be a thumbnail gallery type thing, where you click on a thumbnail and view the larger version?

07-10-2006, 02:20 PM
Yes, thank you Bill, it works, but..... (there is always a but)...

the function code with linkEl shows the size of the image that is reduced to 150x200 for the display as a thumbnail, but of course I need the size of the real image (that is larger).

I think the markup needs an adjustment in the onclick= in order to work. But what is the syntax please?

Bill Posters
07-10-2006, 02:38 PM
Are you saying that you're using the full-size version as the thumbnail and just reducing the dimensions in the img height/width attributes to make it appear smaller?
If so, then you should avoid doing it that way, as you force users to download all the images at full-size (i.e. at larger byte sizes) when they may only choose to click on one or two of the thumbnails.
It really is inefficient and should be avoided as a practice.

You won't be able to reference attributes of the larger version using js unless it's been loaded into the page.
Obviously, you don't want to preload it as that would be very inefficient.

Do you have PHP enabled on your host server?
If you do, then that could be used to read the dimensions of the as-yet-unloaded large image file.
The function to look at is getimagesize() (http://uk.php.net/getimagesize).

It will still be a little complex as you need to weave PHP into the js (or somehow echo the dimensions of the large version into an attribute of either the thumbnail or its parent anchor.
If you have a large number of thumbnails and wish to keep the functionality as automated as possible, then a combination of js and PHP is likely to be the only way to achieve it.

You might look into using a prefrabricated PHP thumbnail, gallery or automated directory contents browsing scripts as these often carry all the components you need to automate the process.
(I tend to write my own as and when I need something like that.)

07-10-2006, 04:23 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"



<script language="JavaScript" type="text/javascript">

var SRCAry=[];
var SRCCnt=0;
var TO;

function ImgSz(img,swp,wth){
SRCAry[SRCCnt]=new Image();

function CkLoad(){
if (!SRCAry[SRCCnt].complete){
else {
alert(SRCAry[SRCCnt].width+' * '+SRCAry[SRCCnt].height);


<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onclick="ImgSz(this.src);" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" onclick="ImgSz(this.src);" >