Get real width and height of website images

Question

On every website there are plenty of oversized images. With oversized i mean that the real image's width and height are higher then the place, which is available for image by HTML and/or CSS rules. The cause is - images are downscaled by browser.

How is it possible to get the images from a webiste with their real and available sizes?

Possible duplicate of [Determine original size of image cross browser?](https://stackoverflow.com/questions/1944280/determine-original-size-of-image-cross-browser) — Paolo Forgia, Aug 17 '17 at 14:33
where do you see possible duplicate? just compare an accepted answer, and answers in other threads — Evgeniy, Aug 17 '17 at 14:48

score 1 · Accepted Answer · answered Aug 17 '17 at 13:49

If I understand your post correctly, you can use naturalWidth and naturalHeight to determine an image's original dimensions.

img = document.getElementById('image');

img.addEventListener('load', function() { 
  console.log('width', img.naturalWidth);
  console.log('height', img.naturalHeight);
});

#image {
  width: 200px;
}

<img id="image" src="http://i.imgur.com/PDE3MLe.jpg" />

Get real width and height of website images

1 Answers1