How does a browser determine the size of images without using get_image_size() in PHP?

When a browser loads an image on a webpage, it needs to determine the size of the image in order to properly display it. One way to do this without using get_image_size() in PHP is to use client-side JavaScript to get the dimensions of the image after it has loaded in the browser. By accessing the naturalWidth and naturalHeight properties of the image object, we can obtain the width and height of the image without needing to make a server-side request. 

<!DOCTYPE html>
<html>
<head>
    <title>Get Image Size</title>
</head>
<body>
    <img id="image" src="image.jpg" alt="Image">
    
    <script>
        var img = document.getElementById('image');
        img.onload = function() {
            var width = this.naturalWidth;
            var height = this.naturalHeight;
            console.log('Image width: ' + width);
            console.log('Image height: ' + height);
        };
    </script>
</body>
</html>

Keywords

browser image size get_image_size() PHP determination

Related Questions