What they're testing
Whether you know images are usually the heaviest part of a page, and which tools already exist for it.
The short answer~30 seconds
In order: send the displayed size via srcset (a 3000px file in a 400px slot wastes 90% of the bytes, and no compression setting recovers that), use a modern format (AVIF or WebP, typically 30–50% smaller than JPEG), lazy-load anything below the fold with loading="lazy", and always declare width/height so nothing shifts. For the LCP image, invert it: fetchpriority="high" and never lazy.
The long answer
The common mistake is applying loading="lazy" to EVERY image, including above the fold. The browser then defers it until it's sure the image is in the viewport, which is after layout — and if that's the LCP image you've just degraded the most important metric with an attribute added to improve performance.
On width/height: they don't fix the rendered size (CSS still decides) — they tell the browser the ASPECT RATIO so it can reserve space before the image arrives. Without them the content below jumps when it loads, and that's the single most common source of CLS. A CSS aspect-ratio achieves the same thing.
What they'll ask next
?How much does an image CDN solve?
Most of the mechanical part: it resizes, picks a format from the browser's Accept header, and serves from nearby. What it can't do for you is decide which image is the priority and which is lazy — that remains a decision in the markup.
These lose points
- Compressing but still serving one size to every device. Phones still download the file intended for a 4K display.