Images can affect loading and layout, but the three Core Web Vitals do not measure the same problem. LCP concerns visible main-content rendering, CLS concerns unexpected movement, and INP concerns interaction responsiveness. Identify the failing behavior first: fewer image bytes are not a universal fix for all three.
For LCP, locate the delay
Identify the actual LCP element at the relevant viewport. It can be a text block rather than an image. If it is an image, inspect when the request starts, how long the download takes and when rendering occurs. Compress or resize when transfer time is significant; fix discovery or rendering when those dominate. Do not lazy-load the LCP image.
For CLS, reserve the correct space
Set intrinsic width and height or reserve the intended aspect ratio in the layout. Keep responsive styling consistent with that ratio. A lighter image might arrive sooner, but if the page creates its space only after arrival, the underlying layout issue remains.
Illustrative example: a square product card receiving a landscape image needs a deliberate crop or containment rule. Compression cannot decide how that picture should fit, and mismatched assumptions can move the surrounding content.
For INP, inspect interaction work
If a gallery freezes while images are decoded, filtered or rendered after a click, examine the work triggered by that interaction. Large synchronous operations or excessive rendering can matter even when the files are small. Do not attribute a poor interaction result solely to image format or promise that WebP conversion will repair it.
Compare measurements without overclaiming
Repeat lab measurements under consistent conditions and use real-user data when available. Track the metric tied to your change alongside visual quality. The web.dev LCP guidance separates server response, discovery, resource loading and rendering; follow that breakdown instead of treating one overall score as an explanation. Better page experience is useful, but no image setting guarantees a ranking increase.