Source code for extension: https://chromewebstore.google.com/detail/detect-oversize-images/pcjakmokjbidkbcegahoieooccenkfgg
If you're a good frontender, and care about users not wasting bandwidth in order to download images which are too large for the displayed size (that is, their intrisic size are overly larger than their rendered size), you can use this extension to detect the images you have to resize!
Just click on the extension icon, and you'll see something like this:
![Screenshot 2024-07-06 at 22 45 49](https://private-user-images.githubusercontent.com/17606011/346298171-b7783587-f063-4d90-808a-b906df033926.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk4MDc3MjQsIm5iZiI6MTczOTgwNzQyNCwicGF0aCI6Ii8xNzYwNjAxMS8zNDYyOTgxNzEtYjc3ODM1ODctZjA2My00ZDkwLTgwOGEtYjkwNmRmMDMzOTI2LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjE3VDE1NTAyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTIzZTJmMjU2MzMxZDgyNWZiMDgwZWVhNDBkMjE0OGRmY2NjMWYwYjgyOWQ2ZDdmODQ3ZTA4NzQzZmJmNjFjYzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0._KSC-Z6jtp03u2Emu8TXN-rAzfhY7VsU0mRL7dk4NNw)
In this case, the extension is complaining that this image has an intrisic size of 200px x 200px
, while the rendered size is only 24px x 24px
. The image has 4
times larger dimensions than it needs to have, and therefore the browser is downloading 4 x 4 = 16
times the data it actually needs. That's a lot! The extension will mark images whose intrisic width or height is larger than 1.5
of its rendered width or height.
This way, you can see which images need your attention, in just a click!