You have a page dominated by images. What are the highest-leverage optimizations, and how do images cause layout shift?
Practical image tuning — format, responsive sizing, lazy-loading — and the CLS connection.
Images are usually the largest bytes on a page and the LCP element, so they pay back optimization the most. (1) Format: prefer modern codecs — AVIF, then WebP — which are far smaller than JPEG/PNG at equal quality; serve them with a fallback via <picture>. (2) Responsive sizing: never ship a 2000px image into a 400px slot. Use srcset + sizes so the browser picks a resolution appropriate to the viewport and DPR, so phones don't download desktop-sized files. (3) Lazy-load below-the-fold images with loading="lazy" so off-screen images don't compete for bandwidth during initial load — but NEVER lazy-load the LCP/hero image (that delays your key metric); instead give it fetchpriority="high". (4) Compress appropriately; strip metadata. Now the CLS connection: an <img> with no width/height (and no CSS aspect-ratio) has zero height until the bytes arrive, then suddenly takes up space and shoves everything below it down — a layout shift. ALWAYS set width and height attributes (or aspect-ratio in CSS); modern browsers use them to reserve the correct box before the image loads, even in responsive layouts. So the checklist is: right format, right size, lazy the non-critical ones, prioritize the hero, and always reserve dimensions.
Cutting page weight; fixing a slow LCP or a jumpy layout caused by images.
<!-- Modern format with fallback, responsive sizes, dimensions reserved -->
<picture>
<source type="image/avif" srcset="hero-480.avif 480w, hero-960.avif 960w">
<source type="image/webp" srcset="hero-480.webp 480w, hero-960.webp 960w">
<img src="hero-960.jpg"
srcset="hero-480.jpg 480w, hero-960.jpg 960w"
sizes="(max-width: 600px) 480px, 960px"
width="960" height="540" <!-- reserves space => no CLS -->
fetchpriority="high" alt="…"> <!-- hero: do NOT lazy-load -->
</picture>
<!-- Below the fold: lazy-load -->
<img src="thumb.webp" width="200" height="150" loading="lazy" alt="…">