How to get image dimensions without loading using JavaScript

In this article, we are going to explore two methods to obtain image dimensions without loading them using JavaScript.

Get image dimensions using the Image() Object

To achieve this, you can leverage the Image() object in JavaScript, creating an image instance without adding it to the DOM.

<script>
  const getImageDimensions = (imageUrl) => {
    const img = new Image();
    img.src = imageUrl;

    img.onload = () => {
      console.log('Width:', img.width);
      console.log('Height:', img.height);
    };
  };

  getImageDimensions('https://app.3schools.in/logo.png');
</script>

Explanation of the above code

1. We create a new Image object.
2. Then, set the image source using the provided URL.
3. Use the onload event to wait for the image to load.
4. Retrieve and display the image dimensions.

Fetching Metadata from image with Fetch API

Another approach involves fetching only the image metadata using the Fetch API. The example is given below.

<script>
  const getImageMetadata = (imageUrl) => {
    fetch(imageUrl)
      .then(response => response.blob())
      .then(blob => {
        const img = new Image();
        img.src = URL.createObjectURL(blob);

        img.onload = () => {
          const width = img.width;
          const height = img.height;
          console.log('Width:', width);
          console.log('Height:', height);
        };
      })
      .catch(error => console.error('Error fetching image metadata:', error));
  };

  getImageMetadata('https://app.3schools.in/logo.png');
</script>

Explanation

1. Use the Fetch API to fetch the image.
2. Convert the response to a blob using response.blob().
3. Create a new Image object and set its source using URL.createObjectURL(blob).
4. Wait for the image to load and retrieve its dimensions.

Conclusion

In this article, you have learned two methods to get image dimensions without loading the entire image using the Image() object and fetching metadata with the Fetch API.