Chrome 116+MIT licensedv0.1.0

Audit every image on the page you are looking at

The guides on this site tell you what good looks like. The extension tells you where the page in front of you falls short: the format, the real weight, the wasted pixels, and what you would save by switching to WebP or AVIF.

Free on the Chrome Web Store

One click to install. Open source under the MIT licence, and nothing you audit ever leaves your browser.

Add to Chrome

Or load it from source

The store version and the source are the same code. Load it yourself if you would rather read every line first.

Clone or download the repository.
Open chrome://extensions.
Turn on Developer mode, top right.
Click Load unpacked and pick the folder.

There is no build step. It is plain ES modules, so the folder you download is the extension.

What it checks, and where to fix it

Ten checks run against every image. Each one has a guide behind it, so a finding is never a dead end.

Flag	What it means	How to fix it
`Oversized`	The source is more than 1.25× the pixels the layout needs.	Resize to the size you display
`Legacy format`	JPEG, PNG, GIF or BMP, where AVIF or WebP would be smaller.	Switch to AVIF or WebP
`Heavy`	A single file is 400 kB or more.	Nine ways to cut file size
`No lazy loading`	The image starts below the fold and still loads at once.	Lazy loading strategies
`Lazy hero`	The image is visible at load, so loading="lazy" delays your LCP.	The most expensive image mistake
`No dimensions`	The img has no width and height, so the layout shifts as it arrives.	Core Web Vitals and CLS
`No alt text`	The image has no alt attribute, or an empty one where it carries meaning.	Writing alt text
`No srcset`	One file goes to every screen size.	Responsive images
`No sizes`	The srcset uses width descriptors, so the browser assumes the full viewport width.	Responsive images
`Unused sources`	A picture element fell back to its img, so no source ever matched.	Responsive images

The page also gets a letter grade from A to F, based on the share of the total image weight that is avoidable. It is a blunt number on purpose: useful for spotting a regression between two builds, not for reporting to a client.

Where the numbers come from

Two of the figures are measurements and one is a model. Worth knowing which is which before you quote them.

Transfer size — measured: Read from the browser's own PerformanceResourceTiming data. A cross-origin response only exposes it when the server sends aTiming-Allow-Origin header, and most CDNs do not. Those files show an estimate labelled (est.) until you pressMeasure the real sizes, which fetches theContent-Length instead.
Wasted pixels — measured: The image's natural size against the box that displays it, capped at a 2× device pixel ratio. This is the number that usually explains a slow page.
Projected saving — estimated: A model, not a measurement. It combines the resize with a fixed per-format ratio: JPEG to AVIF at 0.5, PNG to WebP at 0.4, GIF to WebP at 0.15. Those ratios live inlib/format.js, so change them if your own encoding differs. Treat the saving as a direction, and confirm withthe compressor before you promise a number.

Permissions, and why each one exists

Permission	Why
`activeTab`	Read the images of the page you are on, and only after you click the icon.
`scripting`	Inject the collector and the highlighter into that page.
`storage`	Remember your filter choice between sessions.
`:///*` optional	Measure exact sizes of cross-origin images. Chrome asks only when you press Measure the real sizes, and only for the origins involved.

Nothing is sent anywhere. Every measurement stays in the popup, the same as thebrowser tools on this site.

Read the fix

Most findings come down to a handful of habits. These cover them: