How to Optimize Images for Core Web Vitals

Core Web Vitals are Google’s set of real-world performance metrics for measuring how a page feels to actual visitors: how fast the main content appears, how quickly the page responds, and how stable the layout stays while loading. They are part of Google’s page experience signals, and more importantly, they correlate with the things every site owner cares about: lower bounce rates, higher engagement, and better conversions.

Images touch these metrics more than almost any other asset. On most pages, the Largest Contentful Paint element is an image. Missing image dimensions are one of the top causes of layout shift. And heavy image downloads compete for bandwidth with everything else the page needs.

This guide explains how images affect each Core Web Vital, then walks through the specific fixes that move the numbers, with code examples and platform tips.

Note: Google adjusts metrics, thresholds, and tooling over time. The details below reflect common current guidance, so confirm them in Google’s web.dev documentation.

The Core Web Vitals at a Glance

Metric	What It Measures	“Good” Threshold	Image Impact
Largest Contentful Paint (LCP)	How quickly the largest visible element renders	2.5 seconds or less	Very high
Cumulative Layout Shift (CLS)	How much content shifts unexpectedly	0.1 or less	High
Interaction to Next Paint (INP)	How quickly the page responds to interactions	200 milliseconds or less	Indirect

Google evaluates these at the 75th percentile of real user visits, measured separately for mobile and desktop. That means three out of four visits need to meet the threshold for a page to pass.

How Images Affect Each Metric

Largest Contentful Paint (LCP)

LCP marks the moment the biggest element in the viewport finishes rendering. For most content pages, product pages, and landing pages, that element is a hero image, a featured photo, or a product shot. Any delay in that image translates directly into a worse LCP.

LCP time breaks down into four parts:

Time to first byte: how long the server takes to respond.
Resource load delay: how long before the browser even starts downloading the image.
Resource load duration: how long the download takes, which depends on file size and connection speed.
Element render delay: how long between download completion and actual painting.

Image optimization addresses the middle two directly, and often the fourth too.

Cumulative Layout Shift (CLS)

When an image loads without reserved space, the content below it jumps down. Visitors lose their place, tap the wrong button, and get annoyed. Images without width and height attributes, late-loading banners, and ads or embeds inserted above content are the usual culprits.

Interaction to Next Paint (INP)

INP is mostly a JavaScript issue, but images can contribute indirectly. Heavy image carousels, large decode operations, and scripts that manipulate images can block the main thread and make interactions feel sluggish. Lean images and lightweight image components keep the main thread free.

Step 1: Identify Your LCP Image

Before optimizing anything, find out which element is your LCP and whether it is an image.

Run the page in PageSpeed Insights and look at the Largest Contentful Paint element listed in the diagnostics.
Use Chrome DevTools: open the Performance panel, record a page load, and check the LCP marker in the Timings track.
Check Search Console’s Core Web Vitals report to see which page groups fail on mobile or desktop.

Remember that the LCP element can differ between mobile and desktop. A desktop hero banner might be swapped for a smaller image on mobile, so test both.

Step 2: Resize Images to Their Display Size

Serving a 4000-pixel photo into an 800-pixel slot forces visitors to download pixels they will never see. This is the most common cause of a slow LCP image.

What to do

Check the rendered size of each image in DevTools.
Export images at roughly that width, up to about twice the display size for high-density screens.
Use responsive images so phones download smaller files than desktops:

<img
  src="hero-1200.webp"
  srcset="hero-600.webp 600w, hero-1200.webp 1200w, hero-1800.webp 1800w"
  sizes="100vw"
  width="1200" height="600"
  alt="Mountain trail at sunrise">

The srcset attribute lists the available versions, and sizes tells the browser how wide the image will display so it can pick the right file before layout completes.

Step 3: Use Modern Formats (AVIF and WebP)

Format choice has a major effect on file size, and file size drives download time.

WebP is commonly around 25-35% smaller than JPEG at comparable quality, supports transparency, and is supported by all modern browsers.
AVIF often compresses further than WebP, with broad and growing browser support. It can take longer to encode, so it suits images you generate once and serve many times.

Use the <picture> element to offer the best format with a safe fallback:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" width="1200" height="600" alt="Mountain trail at sunrise">
</picture>

For logos and icons, use SVG. For animations, short MP4 or WebM video is usually many times lighter than a GIF.

Step 4: Compress Without Visible Loss

After resizing, compress to cut file size further.

Lossy compression gives the largest savings and suits photographs. Quality settings around 75-85 for JPEG and WebP are a common starting point, then adjust based on a visual check.
Lossless compression preserves every pixel and suits graphics with sharp edges or text.
Strip unnecessary metadata such as EXIF data, camera details, and embedded thumbnails.

A reasonable guideline for many sites is to keep typical content images in the low hundreds of kilobytes or less, and give your LCP image extra care, since it has the biggest influence on the score. Always compare before and after, zooming in on faces, textures, and text.

Step 5: Make the LCP Image Load Early

A heavy image is only part of the story. Often the bigger problem is that the browser discovers the LCP image late, wasting precious time before the download even begins.

Ensure the image is in the initial HTML. If the LCP image is set through a CSS background, loaded by JavaScript, or rendered client-side by a framework, the browser cannot find it until later. Use a standard <img> tag in the HTML wherever possible.

Prioritize it. The fetchpriority attribute tells the browser this image matters most:

<img src="hero.webp" fetchpriority="high" width="1600" height="800" alt="Summer collection">

Preload when necessary. If the image cannot appear in the initial markup, such as a CSS background, preload it:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

Never lazy-load it. This is the single most common self-inflicted LCP problem. Many themes and plugins add loading="lazy" to every image automatically, including the hero. Verify that your above-the-fold images are excluded.

Step 6: Lazy-Load Everything Below the Fold

Lazy loading defers images that are not yet visible, so the browser spends its early bandwidth on the content visitors see first.

<img src="gallery-4.webp" loading="lazy" width="800" height="600" alt="Gallery photo">

Guidelines

Apply loading="lazy" to images well below the first screen.
Do not apply it to the hero, the main product image, or anything likely to be in the initial viewport.
Always pair lazy loading with width and height attributes, so the deferred image does not cause layout shift when it appears.
You can also add decoding="async" to let the browser decode images without blocking other work.

Step 7: Reserve Space to Prevent Layout Shift

To fix CLS, make sure the browser knows how large every image will be before it downloads.

Add width and height attributes matching the image’s intrinsic dimensions:

<img src="photo.webp" width="1200" height="800" alt="Team photo">

Modern browsers use these values to compute an aspect ratio and reserve space automatically. Combine them with responsive CSS:

img { max-width: 100%; height: auto; }

Use the CSS aspect-ratio property for containers, background images, and embeds:

.card-image { aspect-ratio: 4 / 3; }

Other layout shift causes to watch for

Banners, cookie notices, or promotional bars injected above content after load
Ads and embeds without reserved slots
Web fonts that swap and reflow text beside images
Images swapped in by scripts without placeholder dimensions

Test with the Layout Shift Regions option in DevTools to see exactly what moves.

Step 8: Deliver Through a CDN With Strong Caching

Distance and caching shape how quickly images arrive.

Use a CDN so images are served from locations near each visitor. Image CDNs such as Cloudinary and imgix can also resize and convert formats automatically.
Set long cache lifetimes for static images, commonly up to a year for versioned or fingerprinted filenames, so repeat visits skip the download.
Enable HTTP/2 or HTTP/3 for efficient parallel downloads.
Reduce server response time, because a slow first byte delays every image behind it.

Step 9: Be Careful With Sliders, Carousels, and Background Images

Certain design patterns quietly sabotage Core Web Vitals.

Sliders and carousels often load heavy JavaScript before showing the first slide, delaying LCP. If you must use one, make the first slide a plain, prioritized image and load the rest later.
CSS background images are discovered late and cannot use srcset or loading attributes. Use a real <img> tag for important images.
Full-screen hero videos can be spectacular but heavy. Provide a lightweight poster image and consider whether the video is worth the cost on mobile.
Parallax and animation effects can delay rendering and trigger layout shifts if not built carefully.

Platform-Specific Tips

WordPress

Use an optimizer such as ShortPixel, Imagify, EWWW, or Smush for compression and WebP/AVIF conversion.
Check that your theme or performance plugin does not lazy-load the hero image. Recent WordPress versions handle this better, but verify.
Upload correctly sized images, and use a caching plugin plus a CDN.

Shopify

Shopify’s CDN serves modern formats and resized variants automatically.
Upload well-prepared images, use your theme’s responsive image settings, and remove unnecessary apps that inject extra scripts.

Next.js, Nuxt, and other frameworks

Use the framework’s built-in image component, which typically generates responsive sizes, modern formats, and lazy loading automatically. Mark the LCP image as a priority.

Custom sites

Add a build step with a tool like Sharp, or use an image CDN for on-demand transformation.

A Repeatable Optimization Workflow

Measure a baseline. Record Core Web Vitals from Search Console (field data) and PageSpeed Insights (lab and field data) for key templates.
Identify the LCP element on mobile and desktop.
Resize and convert the heaviest images first.
Compress and visually check quality.
Prioritize the LCP image, removing lazy loading and adding fetchpriority="high".
Add width and height to every image to stop layout shift.
Lazy-load below-the-fold images.
Add a CDN and caching.
Retest, running the lab test more than once because results vary slightly.
Monitor field data. Real-user metrics update over a rolling window of about 28 days, so be patient before judging results.

Common Mistakes to Avoid

Lazy-loading the LCP image. Delays your most important visual.
Skipping width and height. Guarantees layout shift.
Resizing with CSS only. Shrinks the display, not the download.
Over-compressing. Blurry images hurt user trust even when scores look good.
Using PNG for photographs. Files are dramatically larger than WebP or JPEG.
Relying on lab scores alone. Field data from real users is what counts for Core Web Vitals.
Optimizing the desktop only. Mobile is usually stricter and carries most traffic.
Treating it as a one-time task. New uploads need automatic optimization, or performance slowly degrades.

Quick Checklist

LCP element identified on mobile and desktop
Images resized to display dimensions with responsive srcset
Photos served as AVIF or WebP with fallbacks
Compression applied and visually verified
LCP image prioritized, preloaded if needed, and never lazy-loaded
Below-the-fold images lazy-loaded
width and height on every image
CDN and long cache lifetimes enabled
Sliders and background images reviewed
Field data monitored in Search Console

Final Thoughts

Optimizing images for Core Web Vitals comes down to three ideas: send fewer bytes, send them earlier, and reserve space so nothing jumps. Resize to fit, use modern formats, compress with care, prioritize your hero image, lazy-load the rest, and always declare dimensions. Those habits improve LCP and CLS together, and they make pages feel faster to real people, which is the point of the metrics in the first place.

Start with your highest-traffic template, fix its images, and watch the field data over the following weeks. Then repeat the process across the rest of your site. Fast, stable pages build trust, keep visitors engaged, and give your content its best chance to perform.