June 22, 2026

Optimizing Images for Core Web Vitals and SEO

Michael Frost

10 min read 1,209 words

Optimizing Images for Core Web Vitals and SEO

Key Takeaways

✓Largest Contentful Paint (LCP) is your most important image metric — it measures when the main content appears.
✓Always set explicit width and height attributes on images to prevent Cumulative Layout Shift (CLS).
✓Use 'loading=lazy' for all below-the-fold images to defer their loading until the user scrolls near them.
✓Serve WebP or AVIF: a 40–60% reduction in image bytes directly improves LCP scores.
✓Use responsive images (srcset) to avoid sending desktop-sized images to mobile devices.

Images are typically the heaviest component on a web page. For most content sites, images account for 50–70% of total page weight. This makes them the single most impactful factor for Core Web Vitals — Google's set of performance metrics that now directly influence search rankings. Mastering image optimisation is not just a technical exercise; it is a prerequisite for competitive organic search performance.

Understanding Core Web Vitals and Their Image Relationship

Google's Core Web Vitals are three metrics that measure the user experience of a page load:

Largest Contentful Paint (LCP) measures the time from page navigation start to when the browser renders the largest visible content element. In practice, the LCP element is a hero image on the vast majority of pages. Every millisecond it takes for that image to download, decode, and render is a millisecond added to the LCP score. A good score is under 2.5 seconds.

Cumulative Layout Shift (CLS) measures unexpected layout movement during page load. When an image loads without reserved space, it pushes content down, causing text or buttons to jump — this is layout shift. A good score is under 0.1.

Interaction to Next Paint (INP) measures responsiveness to user interactions. Images affect INP indirectly: heavy images consume memory and processing capacity, which can delay the browser's ability to respond to clicks and taps.

The Image Optimisation Stack

A complete image optimisation strategy involves five layers, applied in sequence:

1. Format selection. Replace JPEG and PNG with WebP or AVIF. This single change reduces image bytes by 25–50% for the same visual quality. WebP has universal browser support; AVIF adds another 20–30% on top of WebP. Use the `<picture>` element with AVIF first, WebP second, and JPEG as fallback for complete coverage.

2. Compression. Even after switching to WebP, images should be compressed. The target quality level for web is typically 75–85% — files at this setting are visually indistinguishable from lossless at normal viewing sizes. Imgira's Image Compressor applies smart compression that analyses each image and finds the minimum quality threshold that preserves perceptual sharpness.

3. Dimension sizing. Never serve a 4000px-wide desktop image to a 390px-wide phone. Create multiple sizes of each image and use the `srcset` and `sizes` attributes to let the browser choose the smallest version that meets the display requirements. A phone needs a 390–800px image; a tablet needs 800–1200px; a desktop needs 1200–2000px.

4. Layout reservation. Set explicit `width` and `height` attributes on every `<img>` element. Modern browsers use these values to calculate the aspect ratio and reserve layout space before the image loads, eliminating CLS. This also means CSS `aspect-ratio` boxes work correctly even before the image data arrives.

5. Loading strategy. Use `loading="lazy"` on all images below the fold — this defers their download until the user scrolls close to them, reducing initial page load weight. For the LCP image (the first hero or feature image), use `loading="eager"` (or omit the attribute, since eager is the default) and add `fetchpriority="high"` to signal that this image should be fetched as early as possible.

How to Identify and Fix LCP

The first step is measuring. Use Lighthouse in Chrome DevTools (Cmd+Shift+I → Lighthouse tab) or Google PageSpeed Insights to run a performance audit. The report identifies:

The current LCP element
The LCP score in milliseconds
Opportunities to reduce LCP, including image-specific recommendations

For image-related LCP issues, the most common fixes are:

Reduce image file size: WebP conversion and compression. If your LCP image is a 500 KB JPEG, converting to WebP at 80% quality often brings it to 80–150 KB — a 3–5× improvement that directly translates to proportional LCP improvement on bandwidth-constrained connections.

Preload the LCP image: Add this to your `<head>`:

```html

```

This starts fetching the image before the browser has parsed the `<body>`, saving significant time on LCP.

Avoid rendering the LCP image in CSS: CSS background images are discovered later in the parse cycle than `<img>` elements. If your hero image is a CSS background, consider converting it to an `<img>` element so the browser can discover and fetch it earlier.

Remove render-blocking resources: If the page is blocked by a large JavaScript bundle or unoptimised fonts, the image download may be delayed even if the image itself is small. LCP is a holistic metric.

Eliminating Cumulative Layout Shift From Images

CLS from images is one of the most common performance mistakes in web development. The fix is simple but must be applied consistently across every image:

Always specify width and height:

```html

```

Or use CSS aspect-ratio:

```css

.hero-image {

width: 100%;

aspect-ratio: 16 / 9;

}

```

The browser uses these dimensions to reserve the exact layout space before the image loads, so no content shifts when the image arrives.

Common sources of image-driven CLS that developers miss:

Images in carousels or sliders with variable heights
Images in `<picture>` elements where different source variants have different aspect ratios
Images loaded via JavaScript that replace text placeholders (the text height vs. image height causes a shift)
Third-party widgets that inject images (ads, social embeds)

Responsive Images: Serving the Right Size

Every image on your site should ideally have multiple size variants. Here is a complete responsive image implementation:

```html

<source

type="image/avif"

srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1600.avif 1600w"

sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"

<source

type="image/webp"

srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"

sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"

<img

src="hero-800.jpg"

alt="Descriptive alt text here"

width="800"

height="450"

loading="eager"

fetchpriority="high"

</picture>

```

The `sizes` attribute tells the browser how wide the image will be displayed at different viewport widths. The browser uses this to select the smallest `srcset` variant that still looks sharp on the device's display.

Alt Text and SEO

Image optimisation is not just about bytes. Alt text is an important SEO signal and an accessibility requirement:

Descriptive, specific alt text ("Woman using a laptop in a coffee shop" rather than "image") helps Google understand the image content, contributing to image search rankings and page relevance signals.
Do not keyword-stuff alt text — write it as a description of what the image actually shows.
Decorative images (dividers, abstract backgrounds) should have `alt=""` to signal to screen readers and search engines that they carry no semantic content.
Product images should use alt text that includes the product name, colour, and key distinguishing feature — "Red ergonomic office chair with lumbar support" is a better product image alt text than "chair."

The Performance Dividend

The cumulative effect of a complete image optimisation strategy is substantial. A typical unoptimised content page with 10 images averaging 400 KB each carries 4 MB in image weight. After converting to WebP, compressing to 80% quality, and serving responsive sizes, the same 10 images might total 600 KB — a 6.7× reduction in image bytes.

On a 10 Mbps connection, that reduces download time from 3.2 seconds to 0.5 seconds for images alone. This directly improves LCP, reduces time to interactive, and creates a measurably better user experience — which is exactly what Google's ranking algorithm is designed to reward.

Optimizing Images for Core Web Vitals and SEO insight

Visualizing: Optimizing Images for Core Web Vitals and SEO

Frequently Asked Questions

Google's threshold is under 2.5 seconds for 'good.' Between 2.5 and 4.0 seconds is 'needs improvement.' Over 4.0 seconds is 'poor.' Aim for under 2.0 seconds for competitive search rankings.

Indirectly, yes. Google uses Core Web Vitals as a ranking signal. Large images slow LCP, which is a Core Web Vital. Faster pages rank better, and image optimisation is the single biggest lever for most pages.

Yes. Use <link rel='preload' as='image'> in your document <head> for the LCP element (usually the hero image). This tells the browser to fetch it before it discovers it in the HTML, significantly improving LCP.

It signals to the browser that this image is high priority and should be fetched early. Use it only on the LCP image — overusing it defeats the purpose by making all images equal priority.

Use Chrome DevTools Performance panel, record a page load, and look for the LCP element in the trace. Google PageSpeed Insights also identifies the LCP element directly in its diagnostic output.

Michael Frost

Web Performance Engineer

Michael is a full-stack developer with deep expertise in WebAssembly, browser performance, and modern web standards. He writes technical guides on building high-performance browser applications and the tools that power them.

WebAssemblyBrowser APIsWeb Performance

Curated for you