Images and Core Web Vitals: diagnose before compressing

A smaller image file does not automatically fix a slow page. Start with a performance recording and identify the element and delay that users are actually waiting for.

LCP: identify the element and the wait

The largest visible content can be an image, video or text block. If it is an image, inspect when the request starts, when bytes finish arriving and when it renders. Compression addresses the transfer portion; it does not remove slow server responses, late discovery or rendering delays. Google’s LCP explanation describes the metric.

For an image that is actually the LCP element, avoid lazy loading it. Make its URL discoverable in the initial HTML and consider fetchpriority="high". Use appropriately sized sources; the responsive-images guide explains srcset and sizes. Measure again under the same conditions rather than assigning a guaranteed millisecond saving.

CLS: reserve space and inspect other causes

Add correct width and height attributes, then use responsive CSS such as max-width:100%; height:auto. That allows the browser to reserve the aspect ratio before the image loads. Images without reserved space are one cause of layout shifts; ads, fonts and inserted content can also move the page. Google’s CLS guidance covers these cases.

INP: inspect the interaction

A small downloaded image can still require expensive processing. Record the slow click, drag or conversion, and look for long tasks, large canvases and repeated updates. Consider workers or yielding for costly work where appropriate. Changing format alone does not establish that interaction responsiveness improved. See the INP definition.

A file-size calculation you can check

Our synthetic source is 272855 bytes; its WebP q80 output is 40808 bytes. The difference is 232047 bytes. At a hypothetical constant 5 million bits/second, 232047 × 8 / 5000000 is about 0.37 seconds of transfer. This is a calculation, not a measured page-load or LCP improvement: connection setup, contention, caching, decoding and quality differences are excluded.

Use Compress Image with your source, download and inspect the output, then measure the page using it. Keep an unchanged comparison page and note viewport, throttling, cache state and tool version. Repeat runs to see variability. Lab results help diagnose; field data describes actual visits and needs sufficient coverage. Do not label one local run a proven user-wide gain.