Image Optimization for Core Web Vitals and LCP

Images are typically the single largest contributor to a web page's weight. Because page speed directly affects both user experience and search ranking, optimizing images is one of the highest-impact things you can do for a site. Google measures this through Core Web Vitals, and images sit right at the center of two of them.

How images affect Core Web Vitals

Largest Contentful Paint (LCP) measures how long the largest visible element takes to render. On most pages that element is a hero image or a large photo, so a heavy, slow image directly pushes LCP up. The target is under 2.5 seconds.

Cumulative Layout Shift (CLS) measures unexpected movement of content while the page loads. If an image has no declared dimensions, the browser doesn't reserve space for it, and surrounding content jumps once it arrives. Both problems are fixable with a handful of techniques.

1. Use a modern format

Switching from JPEG or PNG to WebP or AVIF often cuts file size by 25–50% at the same visual quality. Smaller files download faster, which directly lowers LCP. Converting a whole folder of images at once — as you can with Scrunch — is the fastest way to apply this across a site.

2. Serve images at their display size

A very common mistake is uploading a 4000-pixel-wide photo and displaying it in an 800-pixel container. The browser still downloads the full file. Resize images to roughly the size they are shown at, allowing about 2x for high-density (retina) screens, and the savings are dramatic.

3. Use responsive images

The srcset attribute lets the browser pick the right image for each screen. A phone should never download a desktop-sized hero image. Providing a few widths ensures small screens get small files, which is especially important for mobile Core Web Vitals.

4. Lazy-load off-screen images

But never lazy-load the hero

Adding loading="lazy" to images below the fold lets the browser defer them until needed, saving bandwidth. However, the LCP image at the top of the page should load eagerly — ideally with fetchpriority="high" — so it appears as fast as possible.

5. Reserve space to prevent layout shift

Always set width and height attributes (or a CSS aspect-ratio) on images. This lets the browser reserve the correct space before the image loads, eliminating the jump that hurts CLS.

Quick checklist

• Convert images to WebP or AVIF
• Resize to the actual display size (allow ~2x for retina)
• Provide responsive srcset widths
• Lazy-load below-the-fold images
• Prioritize the LCP/hero image
• Set width and height to avoid layout shift

Format and size are the foundation — start there. Scrunch handles the conversion and compression step for many images at once, right in your browser.