Menu
By using Google Chrome's inspect element, I can see image dimensions easily. like it is explained in Google's website.
But I want to know the image file size too (size, like 50kb). I know that I can first download and then look at the image file size on my computer, but I don't think it is the best way.
I want to know if I can find out about image file size in Chrome's inspect elements.
609
Right-click the image whose size you want to know and select Inspect. View your image's width and height displayed in the Chrome DevTools. (Note, the first number is always the width). If your image is not highlighted by default, click the inspect element button.
Open Developer tools ( Ctrl + Shift + I or Settings Icon at the top-right of your browser window => Tools => Developer tools ) on the needed page, switch to the Network tab and reload page. In the Size column you'll see the size of everything loaded (Documents, Stylesheets, Images, Scripts, ...).
You can also right-click on an image & choose properties from the drop-down menu. A new window will appear with several tabs. You'll click the details tab, and there you'll find you image size and dimensions.
Right-click the image whose size you want to know and select Inspect. View your image's width and height displayed in the Chrome DevTools. (Note, the first number is always the width). If your image is not highlighted by default, click the inspect element button and hover over the image.
Here is what you need to do if you want to know the image URL from the inspect element: Get to the devTools part by hitting F12. Click on Elements in the top menu. It will show the page source. Hover your mouse over the image you are interested. When you hover over the various images, it will result in a popup of the images in a thumb size.
The Inspect Element feature of the Google Chrome browser is a powerful yet easy-to-use tool. It’s an important part of Chrome Developer Tools that you can use to check the source code of any website. But it doesn’t end there.
View your image's width and height displayed in the Chrome DevTools. (Note, the first number is always the width). If your image is not highlighted by default, click the inspect element button and hover over the image. Was this helpful? How can we improve it?
You can either find the file in sources or network tab.
For example, I inspect your avatar and see this url:
https://lh6.googleusercontent.com/-6jIAe62Q10s/AAAAAAAAAAI/AAAAAAAAABw/kRBVixTmLmk/photo.jpg?sz=128
I can look it up in the sources tab by finding the appropriate domain. The file size is listed at the bottom, under the preview.
The sizes are also displayed in the network tab but it has to be open before the image loads, otherwise it doesn't capture. Here it is filtered to show only images:
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
