Browser DevTools for Image Performance Auditing
Using Chrome DevTools Network panel, Coverage, and Lighthouse to identify oversized images.
MV
Marcus Vance
Contributing Author · Squoosh Next BlogChrome DevTools provides several overlapping tools for image performance auditing. The Network panel filter set to Img shows all image requests with their actual file sizes, durations, and initiator scripts. Sorting by Size column immediately reveals the largest offenders.
The Coverage tab records which bytes of every resource are actually used during a session — for images this is less relevant but for inline SVGs it shows whether all paths in the file are rendered. Lighthouse generates automated image optimization recommendations including estimated savings from converting to WebP and serving properly sized images. The Performance panel flame chart shows image decode time as a separate task on the Rasterize layer thread, making it possible to identify whether an image is too large to decode within a single frame budget.
For real-user measurement, the PerformanceObserver API with the largest-contentful-paint entry type surfaces LCP image candidates and their render timestamps.
Key Takeaways
Chrome DevTools provides several overlapping tools for image performance auditing.
The Network panel filter set to Img shows all image requests with their actual file sizes, durations, and initiator scripts.
Sorting by Size column immediately reveals the largest offenders.
The Coverage tab records which bytes of every resource are actually used during a session — for images this is less relevant but for inline SVGs it shows whether all paths in the file are rendered.
Try It in the Workspace
Everything discussed in this article can be tested directly in Squoosh Next — no sign-up, no upload, 100% client-side.