How to Optimize Images for Core Web Vitals: LCP, CLS and INP (2026 Guide)

Images and LCP: why your hero image is probably your bottleneck

Largest Contentful Paint (LCP) measures how long it takes for the largest visible element in the viewport to finish rendering. According to HTTP Archive data from 2025, images are the LCP element on approximately 72% of mobile pages and 68% of desktop pages. In most cases, the LCP element is the hero image, a product photo, or the main content image.

Google considers LCP "good" when it occurs within 2.5 seconds. An LCP between 2.5 and 4 seconds "needs improvement," and above 4 seconds is "poor." Since LCP is a direct ranking signal in Google Search, a slow LCP can measurably reduce your organic traffic.

The four sub-phases of LCP

The LCP timing depends on four sub-phases, as documented by web.dev:

1. Time to First Byte (TTFB) - how long until the server responds
2. Resource load delay - time between TTFB and when the browser starts downloading the image
3. Resource load duration - how long the image takes to download (this is where image optimization matters most)
4. Element render delay - time between download complete and paint on screen

For images, the resource load duration is usually the dominant factor. A 500KB hero image on a 4G connection (12 Mbps) takes approximately 333ms to download. A 100KB optimized version takes about 67ms. That 266ms saving, compounded with server response time and render delay, can be the difference between passing and failing the 2.5-second LCP threshold.

Critical: do not lazy load your LCP image

One of the most common mistakes is adding loading="lazy" to all images, including the hero image. Lazy loading delays the start of the image download until it enters the viewport, which is exactly the opposite of what you want for LCP. For the LCP image, use loading="eager" (the default) and add fetchpriority="high" to tell the browser to prioritize this image above other resources.

Images and CLS: preventing layout shifts

Cumulative Layout Shift (CLS) measures visual stability: how much the visible content shifts around during page load. A good CLS score is below 0.1. Images are one of the most common causes of layout shifts because when an image loads without reserved space, it pushes all content below it downward.

The fix: always set width and height

Always include width and height attributes on every img element. This allows the browser to calculate the aspect ratio and reserve the correct space before the image downloads. Modern browsers use these attributes to compute an intrinsic aspect ratio, preventing layout shifts even before the image loads.

For responsive images, set the intrinsic width and height attributes to the image's actual pixel dimensions, then apply CSS: max-width: 100%; height: auto;. The browser uses the width/height ratio to reserve space while the image scales responsively. This approach works in all modern browsers and eliminates image-caused CLS entirely.

Common CLS trap: client-side image loading

If you load images dynamically via JavaScript (for example, in a React app that renders images after hydration), the space is not reserved in the initial HTML. This causes a layout shift when the component renders. The fix is to either server-render the image markup or use a placeholder skeleton with the exact same dimensions as the final image.

Images and INP: decode time and main thread blocking

Interaction to Next Paint (INP) measures responsiveness: how quickly the page responds to user interactions like clicks, taps, and keyboard input. A good INP is below 200ms. While images are not the primary cause of poor INP (JavaScript is), large images can contribute through main thread blocking during decode.

When the browser decodes a large image (converting compressed bytes back into pixel data), this work happens on the main thread and can block user interactions. A 4000x3000 JPEG takes significantly longer to decode than a 1200x900 version because the decoded bitmap is proportional to pixel count, not file size.

AVIF decode time warning

AVIF images, while smaller on disk, have 2.5x slower decode times than JPEG or WebP on average. On low-end mobile devices, a complex AVIF image can take 50-80ms to decode versus 15-20ms for the equivalent WebP. If your site has many images loading simultaneously (e-commerce grids, image galleries), this decode overhead can push INP above the 200ms threshold. Prefer WebP when INP is a concern.

Additional mitigations: serve images at display dimensions (not larger), use content-visibility: auto for off-screen images, and use decoding="async" to move decode work off the main thread where supported.

Format comparison for Core Web Vitals: JPEG vs WebP vs AVIF

Choosing the right image format has a direct impact on all three Core Web Vitals metrics. Here is how the major formats compare for a typical 1200x800 photographic image. For a deeper format comparison, see our WebP vs AVIF vs JPEG comparison.

For most websites in 2026, WebP is the recommended default format. It offers the best balance of file size reduction, decode performance, and browser compatibility. AVIF is best reserved for hero images on high-traffic pages where every kilobyte matters and you can accept slower decode times, or for sites already using the <picture> element with JPEG fallback.

Compression benchmarks: what happens to LCP at different levels

To illustrate the real-world impact of compression on LCP, here are benchmarks based on a typical hero image (1200x800 JPEG) tested on a simulated 4G connection (12 Mbps down, 50ms latency). The estimated LCP includes TTFB (assumed 600ms for a typical server), resource load delay, and render time.

The takeaway: resize + format conversion + compression together bring LCP from "needs improvement" to solidly "good." Compression alone (50% reduction) barely passes. You need all three steps. For detailed benchmarks with more formats, see our image compression benchmark.

The complete image optimization workflow for CWV

Follow this workflow for every image on your site to maximize Core Web Vitals scores:

1. Resize to display dimensions. If an image displays at 600px wide, do not serve a 2400px version. This alone saves 75% of bytes. Use SammaPix Resize Pack to batch resize to exact dimensions or social media presets.
2. Convert to WebP. Use SammaPix WebP Converter for 25-34% additional savings over JPEG. Use the <picture> element with JPEG fallback for the 3% of browsers without WebP support.
3. Compress at quality 75-85. SammaPix Compress with quality 80 delivers 50-80% file size reduction with imperceptible quality loss.
4. Set width and height on every img. This prevents CLS. Use the image's actual pixel dimensions as the attribute values.
5. Lazy load below-fold images. Add loading="lazy" to all images below the fold. Keep fetchpriority="high" on the LCP image.
6. Strip EXIF metadata. EXIF data adds 10-100KB per image and serves no purpose on the web. Use SammaPix EXIF Remover.

HTML implementation: srcset, sizes, and the picture element

Optimizing the image file itself is only half the work. The HTML markup determines which image the browser actually downloads for each device.

The srcset attribute

The srcset attribute lets you provide multiple image files at different sizes. The browser picks the best one based on viewport width and device pixel ratio. This prevents mobile devices from downloading desktop-sized images:

The picture element for format switching

Use the <picture> element to serve AVIF or WebP with automatic JPEG fallback. The browser uses the first <source> it supports:

This pattern serves AVIF to browsers that support it (93%), WebP to those that support WebP but not AVIF (4%), and JPEG as the universal fallback (3%). For more on generating optimized alt text for all these images, see our AI image renaming and SEO guide.

How image optimization affects PageSpeed scores

Google PageSpeed Insights scores are a weighted combination of performance metrics. As of the 2024 scoring update: LCP accounts for 25% of the total score, CLS for 25%, and INP for 30%. Since images directly affect all three metrics, image optimization has an outsized impact on the final score.

In practice, implementing the full optimization workflow typically improves a PageSpeed mobile score by 15-30 points. For sites with many large, unoptimized images, the improvement can exceed 40 points. This makes image optimization the single highest-leverage technical SEO task available.

Fixing common PageSpeed image audits

PageSpeed flags specific image-related opportunities. Here is how to fix each one:

"Serve images in next-gen formats"

Convert JPEG and PNG images to WebP or AVIF. Use the <picture> element with fallbacks. The SammaPix WebP Converter handles batch conversion in your browser.

"Properly size images"

Resize images to their actual display dimensions. If an image renders at 600x400, do not serve a 2400x1600 original. Use srcset with multiple sizes. The SammaPix Resize Pack generates multiple sizes in one batch.

"Efficiently encode images"

Apply compression at quality 75-85. This audit fires when images could be smaller without visible quality loss. SammaPix Compress at quality 80 typically satisfies this audit. For more on finding the right quality setting, see our compression quality guide.

"Defer offscreen images"

Add loading="lazy" to all images that are not visible in the initial viewport. This delays their download until the user scrolls near them, freeing bandwidth for above-fold content. Remember: never lazy load the LCP image.

The business impact: fewer abandonments, higher rankings

According to Google's research published on web.dev, sites that pass all three Core Web Vitals thresholds experience 24% fewer page abandonments compared to sites that fail. This translates directly to more pageviews, longer sessions, and higher conversion rates.

Case studies published by the Chrome team demonstrate consistent business results from CWV optimization:

• Vodafone: 31% improvement in LCP led to an 8% increase in sales
• Yahoo Japan: 15% increase in pageviews after reducing CLS by 0.2
• Netzwelt: 2x increase in ad revenue after improving CWV scores
• Tokopedia: 35% increase in click-through rates with 55% better LCP

These results are consistent across industries: performance improvements driven by image optimization deliver measurable business outcomes. The ROI of spending a few hours optimizing images is almost always positive, especially for e-commerce and content sites where images dominate the page weight.

Monitoring image performance over time

Image optimization is not a one-time task. New content gets added, designs change, and new images can undo previous gains. Set up ongoing monitoring:

• Google Search Console: The Core Web Vitals report shows CWV pass rates across your entire site based on real user data (CrUX)
• PageSpeed Insights: Run spot checks on key pages after adding new images or making design changes
• Lighthouse CI: Automate PageSpeed checks in your CI/CD pipeline to catch regressions before they reach production
• Image audit tools: Periodically audit your site for oversized, uncompressed, or improperly formatted images using Lighthouse or browser DevTools

For a complete checklist covering all aspects of image optimization (not just CWV), read our Image Optimization Checklist for 2026.