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.
