How to find the image size in a web page Print

  • 0

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.

See https://support.google.com/adsense/answer/9190048?hl=en

Safari

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.

Firefox

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