Determining dimensions (height and width) of an image with JavaScript
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Image dimensions</title>
<script type="text/javascript">
function main() {
let image = document.getElementById('image');
let out = document.getElementById('out' );
var widthShown = image.width;
var heightShown = image.height;
var widthReal = image.naturalWidth;
var heightReal = image.naturalHeight;
out.innerHTML = 'The size of the image on the screen is ' + widthShown + ' x ' + heightShown + ' pixels.<br>' +
'The real dimensions of the image is ' + widthReal + ' x ' + heightReal + ' pixels.';
}
</script>
</head>
<body onload='main()'>
<img id='image' src="321x123.png" alt="321 x 123 pixels" width="642" height="246"/>
<div id='out'></div>
</body>
</html>