diagnostic · one of 29free, no counter
Images
Why is my page so heavy?
Images are usually most of a page’s weight and almost never most of its attention. This lists every one with the numbers that matter - what was downloaded against what is displayed - and ranks them by the gap, so the worst offender is at the top rather than somewhere in a waterfall.
Reach itPress ⌘+K on any tab and type images.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin the panel · free, no counter
What this actually is
every image with shipped pixels against rendered sizeBefore optimising anything, so effort goes where the bytes are, and after a redesign, when a component quietly starts rendering a hero image at thumbnail size while still downloading all of it.
Asked about this diagnostic
4 of themIt flags an image that looks fine.
It is fine to look at and twice the size it needs to be. The reading is about bytes, not appearance - an 1800px file painted into a 400px box looks perfect and costs four times what it should.
Does it account for retina screens?
Yes. The threshold is against the rendered size times your device pixel ratio, so a 2× file on a 2× screen is correct and is not flagged.
Can it convert the images for me?
No. It tells you which ones and by how much; the conversion belongs in your build, where it happens once instead of on every request.
Why is the saving an estimate?
Because the browser only reports a transfer size for resources it fetched over the network this load. Anything served from cache is measured by dimensions alone, and the row says which of the two it used.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits