How to Optimize Images for Core Web Vitals: LCP, CLS and INP (2026 Guide)
Images are the Largest Contentful Paint element on 72% of mobile pages, making image optimization the single most impactful thing you can do for Core Web Vitals. This guide covers how images affect each CWV metric with real data, includes compression benchmarks showing exactly what happens to LCP at different optimization levels, and provides a complete workflow from resize to lazy load.
Table of Contents
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:
- Time to First Byte (TTFB) - how long until the server responds
- Resource load delay - time between TTFB and when the browser starts downloading the image
- Resource load duration - how long the image takes to download (this is where image optimization matters most)
- 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.
| Metric | JPEG (q80) | WebP (q80) | AVIF (q80) |
|---|---|---|---|
| Typical file size | 180 KB | 125 KB | 90 KB |
| Size vs JPEG | Baseline | -30% | -50% |
| Decode time (avg) | 12 ms | 14 ms | 35 ms |
| Browser support | 100% | 97%+ | 93%+ |
| LCP impact | Baseline | Faster (smaller download) | Fastest download, slower render |
| INP risk | Low | Low | Medium (slow decode on mobile) |
| Transparency | No | Yes | Yes |
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.
Convert your images to WebP for better CWV scores
Drop your JPEG or PNG files into SammaPix WebP Converter. 25-34% smaller files with no visible quality loss. Runs in your browser.
Open WebP ConverterCompression 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.
| Optimization | File size | Download (4G) | Est. LCP | CWV rating |
|---|---|---|---|---|
| Original (no optimization) | 850 KB | ~567 ms | ~3.2s | Needs improvement |
| JPEG q80 (50% reduction) | 425 KB | ~283 ms | ~2.5s | Borderline |
| JPEG q80 + resize (70%) | 255 KB | ~170 ms | ~2.0s | Good |
| WebP q80 + resize (90%) | 85 KB | ~57 ms | ~1.4s | Good |
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:
- 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.
- 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. - Compress at quality 75-85. SammaPix Compress with quality 80 delivers 50-80% file size reduction with imperceptible quality loss.
- Set width and height on every img. This prevents CLS. Use the image's actual pixel dimensions as the attribute values.
- Lazy load below-fold images. Add
loading="lazy"to all images below the fold. Keepfetchpriority="high"on the LCP image. - Strip EXIF metadata. EXIF data adds 10-100KB per image and serves no purpose on the web. Use SammaPix EXIF Remover.
Complete CWV image optimization workflow
Resize, convert to WebP, compress, and strip EXIF- all in your browser, all free. No signup needed.
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:
<img
src="hero-800.webp"
srcset="hero-400.webp 400w,
hero-800.webp 800w,
hero-1200.webp 1200w"
sizes="(max-width: 640px) 100vw,
(max-width: 1024px) 80vw,
800px"
width="1200" height="800"
alt="Descriptive alt text"
loading="eager"
fetchpriority="high"
/>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:
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" width="1200" height="800"
alt="Descriptive alt text" loading="eager" />
</picture>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.
Need AI-generated alt text for accessibility and SEO?
Alt text helps search engines understand your images and improves accessibility. SammaPix AI generates descriptive, SEO-friendly alt text automatically.
FAQ
What image format is best for Core Web Vitals?
WebP is the best default format for Core Web Vitals in 2026. It offers 25-34% smaller file sizes than JPEG at equivalent quality with fast decode times and 97%+ browser support. AVIF produces even smaller files (50% smaller than JPEG) but has slower decode times that can hurt INP on low-end devices. Use WebP as default with AVIF for high-traffic hero images where file size matters most.
How do images affect LCP score?
Images are the Largest Contentful Paint element on 72% of mobile pages. The LCP timing depends on how long it takes to download and render the largest visible image. A 500KB hero image on a 4G connection takes about 1.2 seconds to download, while a 100KB optimized version takes about 0.24 seconds. This single optimization can be the difference between passing and failing the 2.5-second LCP threshold.
Should I use AVIF or WebP for my website?
For most websites, WebP is the better choice in 2026. WebP has 97%+ browser support, fast decode times (14ms average for a 1200x800 image), and 25-34% file size reduction versus JPEG. AVIF offers 50% reduction versus JPEG but has slower decode times (35ms average) and only 93% browser support. If INP is a concern on mobile, WebP is safer. Use the picture element to serve AVIF with WebP fallback if you want both.
Should I lazy load my hero image?
No. Never lazy load your LCP image (typically the hero image or main content image above the fold). Lazy loading the LCP element delays its load, directly hurting your LCP score. Use loading='eager' or fetchpriority='high' for the LCP image. Lazy load all other images that are below the fold using loading='lazy'.
How much does image optimization improve PageSpeed score?
Image optimization is typically worth 15-30 points on a Google PageSpeed Insights mobile score. For sites with many unoptimized images, the improvement can exceed 40 points. Combining format conversion (to WebP), proper sizing, compression at quality 80, and lazy loading can take a site from a score of 40-50 to 80-90 on mobile.
How do I fix the 'Properly size images' audit in PageSpeed?
This audit flags images that are served at dimensions larger than their display size. For example, serving a 2400px wide image that displays at 600px wastes 75% of the bytes. The fix is to resize images to their actual display dimensions before uploading. Use srcset and sizes attributes to serve different sizes for different viewport widths. Tools like SammaPix Resize Pack can generate multiple sizes in one batch operation.