How to find the image size in a web page Print

  • 28

This article helps you find out what size an image is being displayed in a web page if you are trying to optimise image sizes.

Google Chrome

First, enable your “developer tools”:

  • Click Chrome>Preferences>Extensions and in the top right, check the “Developer mode” option.

Now, go to the site on which you want to know image sizes:  

  • Right-click (pc) or command-click the image (mac) and select “inspect element”.

  • Once the inspector pane opens hover over the highlighted img tag and it will display, over the image, the dimensions the image is being displayed at.



First enable your “developer tools”:

  • Click Safari > Preferences>Advanced

  • Then check the box by “Show develop menu in menu bar”.

Now, go to the site on which you want to know image sizes:

  • First, right click on any part of the page and select “inspect element”.

  • Now click the inspect button at the top of the new area at the bottom of your browser window.

  • When that inspect / target icon is blue you can hover over any element on the page and information will appear such as image dimensions and container dimensions.


Simply right-click (pc) or command-click the image (mac)

  • Select "View Image Info".

  • A pop-up window will offer “Dimensions” and will display something like "1200px × 1200px (scaled to 300px × 300px)". Where the first dimenisions are the actual image file dimensions and the second the dimensions it is being displayed at.  These should be the same for optimised images.

  • If “View Image Info” is not offered when you right click, you have not selected an image, try clicking on a different area of the image.

Was this answer helpful?

« Back