How to optimize images for Core Web Vitals (and actually pass)

Images are the number one reason websites fail Core Web Vitals. Here is how to fix that in 30 minutes, with measurable results you can verify in PageSpeed Insights.

Why images are usually the problem

On a typical web page, images account for 40-60% of total bytes transferred. The hero image is usually the Largest Contentful Paint (LCP) element — the metric Google cares most about for page experience rankings. A single 3MB hero image on a 4G mobile connection takes over 6 seconds to download. That alone pushes LCP past Google's "poor" threshold of 4 seconds.

The fix is not complicated. It is three things: compress, right-size, and right-format. Most sites can cut image payload by 70-80% in under an hour with no visible quality difference.

Step 1: Identify the LCP element

Open your page in Chrome DevTools, go to the Performance tab, record a page load, and look for the "LCP" marker. It will highlight the element causing the largest contentful paint — usually an image. You can also run PageSpeed Insights and scroll to the Diagnostics section where it explicitly identifies the LCP element.

Once you know which image is the LCP element, that is where to focus first. Optimizing that single image often improves LCP by 1-3 seconds.

Step 2: Compress the LCP image

Use MiniPx to compress the LCP image. Settings: WebP format, Smart preset (quality 65%), max width matching your layout (typically 1200-1920px). This alone typically reduces a 2-4MB hero image to 150-400KB — a 5-10x improvement.

Real example: a 3.2MB hero JPEG (4000x2667px) compressed to WebP at Smart preset with 1920px max width becomes 187KB. Visual difference at web display size: none. LCP improvement on 4G mobile: approximately 3 seconds.

Step 3: Right-size all images

Do not upload a 4000px image for an 800px content column. The browser downloads the full-resolution image and then shrinks it in the viewport — wasting bandwidth for zero visual benefit. Resize images to match their display dimensions (or 2x for retina screens).

Common target widths: hero/banner images — 1920px, content images — 800-1200px, thumbnails — 300-400px, product images — 800px. MiniPx lets you set a max width during compression, so resizing and compressing happen in one step.

Step 4: Use the right format

Format choice has a significant impact on file size. WebP produces 25-35% smaller files than JPEG at equivalent quality. For most websites in 2026, WebP should be the default. Read our full format comparison guide for details.

Use the HTML picture element to serve WebP with JPEG fallback:

<picture>
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." width="1920" height="1080"
       loading="eager" fetchpriority="high">
</picture>

Step 5: Fix layout shift (CLS)

Images cause Cumulative Layout Shift when the browser does not know their dimensions before loading. The fix is simple: always set explicit width and height attributes on every img tag. The browser reserves the correct space before the image downloads, preventing content from jumping around.

<!-- Bad: causes layout shift -->
<img src="photo.webp" alt="...">

<!-- Good: browser reserves space -->
<img src="photo.webp" alt="..." width="800" height="600">

<!-- Also good: CSS aspect-ratio -->
<img src="photo.webp" alt="..."
     style="aspect-ratio: 4/3; width: 100%;">

Step 6: Lazy load below-the-fold images

Add loading="lazy" to every image that is not visible on the initial viewport. This tells the browser to delay downloading those images until the user scrolls near them. It reduces initial page weight and focuses bandwidth on above-the-fold content.

Critical rule: never lazy-load the LCP image. The hero image, main product photo, or any above-the-fold image should have loading="eager" and fetchpriority="high". Lazy-loading these images tells the browser to deprioritise them, which makes LCP worse.

Step 7: Use responsive images (srcset)

A mobile device on a 375px screen does not need a 1920px image. Use srcset to provide multiple sizes and let the browser choose the appropriate one:

<img srcset="hero-400.webp 400w,
             hero-800.webp 800w,
             hero-1200.webp 1200w,
             hero-1920.webp 1920w"
     sizes="100vw"
     src="hero-1200.webp"
     alt="..." width="1920" height="1080">

Compress each size variant with MiniPx before deploying. The combination of right-sized images + WebP format + smart compression can reduce total image payload by 80-90% compared to unoptimized full-resolution JPEGs.

Verify your improvements

After compressing and deploying optimized images, test with PageSpeed Insights (pagespeed.web.dev). Check both mobile and desktop scores. Focus on the LCP metric — it should be under 2.5 seconds. If it is still slow, the Performance tab in Chrome DevTools shows exactly what is taking time.

For ongoing monitoring, set up a Google Search Console property and check the Core Web Vitals report weekly. It shows real-user data (not lab data) and flags pages that need attention.

Target file sizes by image type

All of these targets are achievable with MiniPx Smart compression in WebP format. Drag in your images, set the right max width and format, and download optimized files ready for deployment. See compress images for website and compress images for WordPress for platform-specific guides.

Frequently asked questions

Compress, convert, and resize images in your browser. Nothing gets uploaded.