View Full-size Images in "Inspect Element

Question

I'm new to web design and i've been using inspect and view page source to view different websites and see how they coded their site. I've been doing this for a little while but i've noticed lately that in Google Chrome, when i right click and use the "Inspect" feature, images are not appearing in their full size. For example, on Instagram i look at one that's 600 x 746 pixels but it says the "natural" size is 933 x 1160 pixels. If you click to open the image in a new tab it gives me the smaller 600 x 746 version.

Is there a way to view the natural size of each image? Why does it display this way when a couple of weeks ago it didnt do this for every image? Is there a way to view all of the assets (images, etc) on a site in one place?

pziecina · Answer

The only none browser extension way to view all assets and code for a page is to use the developers panel, (as you are probably now doing).

If you do a search for extensions in your chosen browser for 'developers tools', a number of other browser extensions are available that will also help you.

The possible reason you are seeing images at none intrinsic sizes, is because the developer of the site you are 'inspecting' has used larger/smaller images then resized them via the image tag attributes, or in the css property for the image, bad practice btw to up-size images using either method, and now that we have srcset/picture, (html) and image-set, (css) there is no excuse for doing so beyond small size adjustments applied by the browser itsef due to the large number of viewport sizes now available.

サインアップ

ソーシャルログイン

コミュニティへログイン

ソーシャルログイン

ファイルをウイルススキャンする。

このファイルはダウンロードできません