Skip to main content

Chrome 116+ MIT licensed v0.4.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.

  1. Clone or download the repository.
  2. Open chrome://extensions.
  3. Turn on Developer mode, top right.
  4. 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

12 checks run over the page. Four judge the file itself, the rest judge each place it is used, so the same file can pass once and fail somewhere else. Each finding has a fix behind it, so it is never a dead end.

FlagWhat it meansHow to fix it
Oversized The file carries more pixels than any place it appears needs, past a 1.25× tolerance. Resize and compress the file
Legacy format JPEG, PNG, GIF, BMP or ICO, where AVIF or WebP would be smaller. Convert to AVIF or WebP
AVIF opportunity The file is already WebP, and AVIF may still take fewer bytes. WebP, AVIF and JPEG XL compared
Heavy A single file is 400 kB or more. Compress the file
Eager image offscreen now The image sits outside the viewport and still loads at once. Lazy loading strategies
Lazy image visible now The image is inside the viewport and marked lazy. This is not an LCP test. Lazy loading strategies
Lazy-loaded LCP image Chrome named this image the LCP element, and it is marked lazy. The most expensive image mistake
Layout-shift source Chrome attributed a layout shift to this element. A shifted node is not always the cause. Core Web Vitals and CLS
No dimensions The img has no width-and-height pair and no CSS aspect-ratio. Core Web Vitals and CLS
Missing alt attribute The img has no alt attribute at all. An empty alt is correct for a decorative image. Writing alt text
Responsive-image opportunity An oversized image has no srcset, so one file goes to every screen size. Responsive images
Default sizes mismatch The srcset uses width descriptors in a slot far narrower than the viewport, and sizes is missing. Responsive images

The page also gets a letter grade from A to F, based on the share of the measured image weight that is avoidable. It reads ? until at least one size is measured. 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 a Timing-Allow-Origin header, and most CDNs do not. Those files fall back to the model and are counted as provisional until you press Check response sizes, which reads the Content-Length instead, up to 100 files at a time.
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 in lib/format.js, so change them if your own encoding differs. Treat the saving as a direction, and confirm with the compressor before you promise a number.

Permissions, and why each one exists

PermissionWhy
activeTabRead the images of the page you are on, and only after you click the icon.
scriptingInject the collector and the highlighter into that page.
storageRemember your filter choice between sessions.
*://*/* optionalMeasure exact sizes of cross-origin images. Chrome asks only when you press Check response sizes, and only for the origins involved.

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

Take the next action

The audit is the start of the loop, not the report at the end of it.