How to Optimize Images for Core Web Vitals (2026 Guide)

What Are Core Web Vitals?

Core Web Vitals are Google's set of standardized metrics for measuring real-world page experience. They became a Google ranking factor in 2021 and have grown in weight since. As of 2026, three metrics make up the Core Web Vitals:

Images directly impact LCP and CLS — the two metrics where most sites fail. A single large unoptimized hero image can single-handedly push LCP into the "Poor" range.

LCP: Fixing Your Largest Contentful Paint

The LCP element is the largest image or text block visible in the initial viewport. For most websites, it's the hero image, product photo, or banner. Google measures how long from the first byte of the page to when that element is fully rendered.

Step 1: Identify Your LCP Element

Open Chrome DevTools → Lighthouse → Run audit. The LCP element will be highlighted in the report. Alternatively, open the Performance panel, run a recording, and look for the "LCP" marker in the timeline.

Step 2: Eliminate Render-Blocking for the LCP Image

If your LCP image is loaded via CSS (background-image), the browser cannot discover it until the CSS is parsed — which is too late. Always use an <img> element for your LCP image, never a CSS background image.

/* CSS background — browser discovers this too late */
.hero { background-image: url('/hero.webp'); }

<img src="/hero.webp" alt="Hero image" 
     width="1200" height="600"
     fetchpriority="high">

Step 3: Convert to WebP or AVIF

The single highest-impact change for LCP is converting your hero image from JPG to WebP. A typical 400KB JPG hero image becomes 130–180KB as WebP at equivalent visual quality. That's 55–65% less data the browser needs to download before it can render your LCP element.

For maximum compression, AVIF goes further — typically 50% smaller than JPG. Use the <picture> element to serve AVIF with WebP fallback:

<picture>
  <source srcset="/hero.avif" type="image/avif">
  <source srcset="/hero.webp" type="image/webp">
  <img src="/hero.jpg" alt="Hero" width="1200" height="600" fetchpriority="high">
</picture>

Step 4: Set fetchpriority="high"

This HTML attribute tells the browser to prioritize downloading the LCP image above other resources. Add it only to your LCP image — using it on multiple images reduces its effectiveness.

CLS: Preventing Layout Shift from Images

When an image loads and the browser doesn't know its dimensions in advance, it initially renders with zero size, then "pops" to full size when the image data arrives. This causes visible layout shifts — text jumps down, buttons move — and directly worsens your CLS score.

The Fix: Always Specify Width and Height

Every <img> element should have explicit width and height attributes matching the image's intrinsic dimensions. Modern browsers use these to reserve the correct space before the image loads:

<!-- ❌ Causes layout shift -->
<img src="/photo.webp" alt="Product photo">

<!-- ✓ Reserves space, no layout shift -->
<img src="/photo.webp" alt="Product photo" width="800" height="600">

You don't need to set explicit CSS width/height — just the HTML attributes. The browser calculates the aspect ratio and reserves the appropriate space regardless of the rendered size.

For Responsive Images: Use aspect-ratio

If your images are fluid-width (e.g., width: 100%), set an aspect-ratio in CSS to preserve space:

img { aspect-ratio: 16 / 9; width: 100%; height: auto; }

Choosing the Right Image Format

Format choice is the most impactful single decision for image file size. Here's what to use for Core Web Vitals performance:

Photos and Complex Images → WebP or AVIF

WebP should be your default for all photographic content on the web. It achieves 25–35% better compression than JPG at equivalent quality. Browser support is 97%+ as of 2026. AVIF delivers 40–55% better compression than JPG — use it with a WebP fallback via <picture> for maximum impact.

Screenshots and UI Graphics → PNG

PNG's lossless compression preserves sharp text and pixel-perfect UI elements that JPG blurs. While PNG files are larger, they're appropriate when quality cannot be compromised. For web delivery of UI screenshots, converting PNG to WebP (lossless mode) can reduce size by 20–30% with no quality loss.

The JPG to WebP Conversion Impact

Consider a page with five 100KB JPG images. Converting all to WebP saves roughly 170KB. At a median mobile connection of 10 Mbps, that's 140ms of loading time saved — potentially the difference between "Good" and "Needs Improvement" LCP.

Use IMGVO's free image compressor or JPG to WebP converter to convert your images without any server upload.

Responsive Images & Correct Sizing

Serving oversized images is one of the most common PageSpeed warnings: "Properly size images." It means you're sending more pixels than the browser displays, wasting bandwidth.

Use srcset to Serve Different Sizes

The srcset attribute lets you specify multiple image versions at different widths. The browser picks the most appropriate size based on the user's screen and pixel density:

<img
  src="/hero-800.webp"
  srcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  alt="Hero image"
  width="1200" height="600"
  fetchpriority="high"
>

Mobile users receive the 400px version (much smaller file) while desktop users get the 1200px version. This can save 60–80% of image bytes on mobile — the platform where LCP failures are most common.

Resize Before You Upload

The simplest approach: before uploading any image, resize it to its display dimensions. A hero image displayed at 1200px wide should be 1200px wide (2400px for retina). Never upload a 4000px image for a 400px thumbnail.

Lazy Loading — What to Do and What Not to Do

Native lazy loading (loading="lazy") defers loading of off-screen images until the user scrolls near them. This reduces initial page weight and speeds up LCP — but only if used correctly.

✓ DO: Lazy load below-the-fold images

<!-- Images that appear below the visible screen -->
<img src="/product-2.webp" alt="Product" width="400" height="400" loading="lazy">

❌ DON'T: Lazy load the LCP image

<!-- ❌ This will hurt your LCP score -->
<img src="/hero.webp" alt="Hero" loading="lazy" fetchpriority="high">

<!-- ✓ Correct: no lazy loading on LCP image -->
<img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600">

Rule of Thumb

Apply loading="lazy" to all images except the first 2–3 visible on page load. A quick estimate: if an image appears below 700px from the top of the page on mobile, lazy load it.

Preloading the LCP Image

Preloading tells the browser about a critical resource before it's discovered in the HTML. For LCP images, this can shave 200–600ms off your LCP time by starting the download earlier in the waterfall.

Basic Preload

<!-- Add in <head> -->
<link rel="preload" as="image" href="/hero.webp">

Preload for Responsive Images

<link rel="preload" as="image"
  href="/hero-1200.webp"
  imagesrcset="/hero-400.webp 400w, /hero-800.webp 800w, /hero-1200.webp 1200w"
  imagesizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
>

Compression Settings That Work

The goal is the smallest file that looks good to human eyes — not mathematically lossless.

Recommended Quality Settings

• JPG: Quality 75–85 for web delivery. Quality 95+ only for print or archiving.
• WebP lossy: Quality 75–85 matches JPG at 85–92 with smaller files.
• AVIF: Quality 60–75 in most encoders — AVIF's scale differs from JPG's.
• PNG: Compression level 7–9 (lossless — level only affects encode speed vs file size trade-off).

Use IMGVO's compressor to find the right quality level visually — it shows a before/after preview with file size savings before you download.

Strip EXIF Metadata

EXIF metadata (GPS location, camera info, date/time) adds bytes to every image file — typically 5–30KB for photos from smartphones. Stripping EXIF data before publishing reduces file size and protects user privacy if images contain GPS coordinates.

For a detailed overview of how compression works under the hood, see How Image Compression Works. For the trade-offs between lossless and lossy approaches, see Lossless vs Lossy Compression.

Core Web Vitals Image Checklist

• Convert all photos to WebP (or AVIF with WebP fallback)
• Add width and height attributes to every <img> element
• Use fetchpriority="high" on the LCP image only
• Never use loading="lazy" on the LCP image or any above-the-fold image
• Add loading="lazy" to all below-the-fold images
• Preload the LCP image using <link rel="preload"> in <head>
• Resize images to their display dimensions before uploading
• Use srcset and sizes to serve different sizes to different screen widths
• Use <img> not CSS background-image for the LCP element
• Strip EXIF metadata to reduce file size and protect privacy
• Set WebP quality to 75–85 for a balance of size and quality
• Run Google PageSpeed Insights after changes to verify improvement

Frequently Asked Questions

Related Tools & Articles