Image Compression for Page Speed and Core Web Vitals

Images account for roughly 50% of total page weight on the average website. A single unoptimized hero banner can add 2-5 seconds to your load time and tank your Core Web Vitals scores. Google uses these metrics as ranking factors, which means slow images do not just frustrate visitors — they cost you search traffic.

This guide covers exactly how images impact each Core Web Vital, with specific techniques and code examples to fix every common image performance issue.

How Images Impact Page Speed

The math is simple: more bytes take longer to download. On a 4G mobile connection averaging 15 Mbps, a 3 MB hero image takes roughly 1.6 seconds to download — before the browser even starts rendering it. On slower connections, that number climbs fast.

Key statistics:

• Images represent 50% of total bytes transferred on the average webpage
• The median webpage loads 900 KB of images (mobile) to 1.1 MB (desktop)
• A 1-second improvement in load time can increase conversions by 7%
• 53% of mobile users abandon sites that take longer than 3 seconds to load

Mobile connections amplify the problem. Desktop users on broadband may barely notice a 500 KB image, but mobile users on congested networks experience meaningful delays. Since Google uses mobile-first indexing, your mobile performance is what determines your search rankings.

Core Web Vitals Explained for Images

Google’s Core Web Vitals measure real-world user experience. Three of the four metrics are directly affected by image optimization.

LCP (Largest Contentful Paint)

What it measures: The time it takes for the largest visible element to render. On most pages, this is a hero image, banner, or featured photo.

Target: Under 2.5 seconds.

Image impact: The hero image is the LCP element on 70%+ of web pages. An unoptimized hero image is the single most common cause of poor LCP scores. A 1.5 MB hero banner on a mobile connection can push LCP past 4 seconds by itself.

CLS (Cumulative Layout Shift)

What it measures: How much page content shifts unexpectedly during loading. Images without explicit dimensions cause the page to reflow when they load, pushing text and buttons around.

Target: Under 0.1.

Image impact: Every image without width and height attributes (or CSS aspect-ratio) causes a layout shift when it loads. A page with 10 images missing dimensions can easily exceed 0.3 CLS — three times the acceptable threshold.

FCP (First Contentful Paint)

What it measures: The time until the browser renders the first piece of content (text, image, or SVG).

Target: Under 1.8 seconds.

Image impact: Render-blocking resources delay FCP. While images themselves are not render-blocking, oversized images competing for bandwidth can delay other critical resources. Above-the-fold images that are too large can also delay FCP if they are the first visible content.

INP (Interaction to Next Paint)

What it measures: The responsiveness of the page to user interactions.

Image impact: Minimal for most sites. Extremely large images can cause main-thread work during decode, but this is rare with modern browsers. INP is primarily affected by JavaScript, not images.

Optimizing Images for LCP

Since the hero image is the LCP element on most pages, optimizing it has the highest impact on your score.

1. Preload the Hero Image

Tell the browser to start downloading your hero image immediately, before it discovers it in the HTML:

<link rel="preload" as="image" href="/images/hero-banner.webp"
      type="image/webp"
      fetchpriority="high">

The fetchpriority="high" attribute bumps the image ahead of other resources in the download queue. This alone can improve LCP by 200-500 milliseconds.

2. Size the Image Correctly

Serve an image that matches the display size. A 3000px-wide hero displayed at 1200px wastes 75% of the downloaded bytes.

Use srcset to serve the right size for each viewport:

<img src="/images/hero-1200.webp"
     srcset="/images/hero-600.webp 600w,
             /images/hero-900.webp 900w,
             /images/hero-1200.webp 1200w,
             /images/hero-1800.webp 1800w"
     sizes="100vw"
     alt="Hero banner description"
     width="1200"
     height="600"
     fetchpriority="high">

3. Use WebP Format

WebP files are 25-35% smaller than equivalent JPEGs. For your LCP image, that difference translates directly into faster rendering. Convert your hero images with BulkImagePro’s converter or use the JPEG to WebP converter specifically.

For a detailed comparison of format performance, see our WebP vs JPEG vs PNG guide.

4. Compress to the Right Quality

For hero images, quality 80-85% provides an excellent balance. Below 75%, compression artifacts can become visible at full-screen sizes. Above 90%, you pay a steep file size penalty for imperceptible quality gains.

Compress your hero images with BulkImagePro to find the optimal quality-to-size balance.

5. Deliver via CDN

Serve images from a CDN with edge locations close to your users. CDN delivery typically shaves 50-200 milliseconds off load times compared to origin servers, and that directly improves LCP.

Preventing CLS with Proper Image Sizing

Layout shifts caused by images are the easiest CLS issues to fix. The solution is telling the browser how much space to reserve before the image loads.

Always Set Width and Height

The simplest fix: add width and height attributes to every <img> tag:

<img src="product.webp"
     alt="Product photo"
     width="800"
     height="600">

The browser uses these values to calculate the aspect ratio and reserve the correct space, even before the image downloads.

Use CSS aspect-ratio

For responsive layouts where images scale with their container, use the CSS aspect-ratio property:

.hero-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.product-thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

This reserves the correct proportional space regardless of the container width.

Combine Both Approaches

For the most robust implementation, use both HTML attributes and CSS:

<img src="hero.webp"
     alt="Description"
     width="1200"
     height="675"
     style="width: 100%; height: auto; aspect-ratio: 16 / 9;">

This ensures correct layout reservation across all browsers and rendering modes.

Responsive Images with srcset

Responsive images serve different file sizes based on the device’s viewport and pixel density. This prevents mobile devices from downloading desktop-sized images.

Basic srcset Implementation

<img src="blog-image-800.webp"
     srcset="blog-image-400.webp 400w,
             blog-image-800.webp 800w,
             blog-image-1200.webp 1200w,
             blog-image-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1000px) 80vw,
            1200px"
     alt="Blog content image"
     width="1200"
     height="800"
     loading="lazy">

Recommended Breakpoints

Generate images at these widths to cover common viewport sizes:

Breakpoint	Target Devices	Retina Equivalent
400px	Mobile phones	800px (2x)
800px	Tablets, small laptops	1600px (2x)
1200px	Laptops, desktops	2400px (2x)
1600px	Large desktops	3200px (2x)

Use BulkImagePro’s bulk resizer to generate all four sizes from your source images in a single batch.

Art Direction with Picture Element

When different crops or compositions are needed at different sizes, use the <picture> element:

<picture>
  <source media="(max-width: 600px)"
          srcset="hero-mobile-portrait.webp"
          type="image/webp">
  <source media="(max-width: 1000px)"
          srcset="hero-tablet-landscape.webp"
          type="image/webp">
  <img src="hero-desktop.webp"
       alt="Hero banner"
       width="1600"
       height="600">
</picture>

Lazy Loading Strategy

Lazy loading defers image downloads until the user scrolls near them. This reduces initial page weight and speeds up the first meaningful render.

Native Lazy Loading

Modern browsers support lazy loading natively with a single attribute:

<img src="below-fold-image.webp"
     alt="Description"
     width="800"
     height="600"
     loading="lazy">

Which Images to Lazy Load

• Lazy load: Every image below the fold (not visible on initial page load)
• Never lazy load: The hero image, above-the-fold product images, or any image that is the LCP element

Critical rule: Never add loading="lazy" to your LCP image. Lazy loading the LCP element delays its rendering and directly worsens your LCP score. Instead, use fetchpriority="high" on LCP images.

Intersection Observer for Advanced Control

For more control over lazy loading behavior, use the Intersection Observer API:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.srcset = img.dataset.srcset || '';
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '200px' // Start loading 200px before visible
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

The rootMargin of 200px starts loading images just before they scroll into view, preventing a visible loading delay.

CDN and Caching for Images

CDN Benefits

A Content Delivery Network (CDN) serves images from edge servers close to your users. Benefits include:

• Reduced latency: 50-200ms faster delivery from nearby edge nodes
• Bandwidth offloading: Your origin server handles less traffic
• Automatic optimization: Many CDNs offer on-the-fly WebP/AVIF conversion, resizing, and compression

Cache Headers

Set long cache durations for images since they rarely change:

Cache-Control: public, max-age=31536000, immutable

The immutable directive tells browsers the file will never change at this URL, eliminating unnecessary revalidation requests. Use content hashes or version strings in URLs (e.g., hero-abc123.webp) to bust the cache when images do change.

Measuring and Testing

Google PageSpeed Insights

The primary tool for measuring Core Web Vitals. Enter your URL and check:

• LCP: Look for “Largest Contentful Paint element” to identify which image is the LCP
• CLS: Check for “Avoid large layout shifts” and “Image elements do not have explicit width and height”
• Opportunities: “Properly size images,” “Serve images in next-gen formats,” and “Efficiently encode images” are the three most common image-related suggestions

Lighthouse (Chrome DevTools)

Run a Lighthouse audit in Chrome DevTools (F12 > Lighthouse tab) for detailed diagnostics:

• Performance score: Overall page speed rating
• Diagnostics: Lists every image that could be smaller, including estimated savings
• Treemap: Visual breakdown of page weight by resource type

WebPageTest

For deeper analysis, WebPageTest provides:

• Filmstrip view: See exactly when each image appears during loading
• Waterfall chart: Identify which images block rendering or compete for bandwidth
• Connection throttling: Test performance on realistic mobile connections (3G, 4G)

Before/After Optimization Case Study

Consider a typical blog page with 20 images: one hero banner, four in-content photos, and 15 thumbnail previews for related articles.

Before Optimization

Image Type	Count	Avg. Size	Total
Hero banner	1	2.8 MB	2.8 MB
Content photos	4	1.5 MB	6.0 MB
Thumbnails	15	350 KB	5.25 MB
Total	20		14.05 MB

PageSpeed score: 38/100 (mobile). LCP: 6.2 seconds. CLS: 0.28.

Optimization Steps

1. Resize: Hero to 1600px wide, content images to 1000px, thumbnails to 400px using BulkImagePro’s resizer
2. Compress: All images at 80% quality using BulkImagePro’s compressor
3. Convert to WebP: Using the format converter
4. Add dimensions: Width and height attributes on all <img> tags
5. Preload hero: Add <link rel="preload"> for the hero image
6. Lazy load: Add loading="lazy" to all below-fold images

After Optimization

Image Type	Count	Avg. Size	Total
Hero banner	1	145 KB	145 KB
Content photos	4	85 KB	340 KB
Thumbnails	15	22 KB	330 KB
Total	20		815 KB

PageSpeed score: 94/100 (mobile). LCP: 1.8 seconds. CLS: 0.02.

Results: 94% reduction in total image weight. LCP improved by 4.4 seconds. CLS dropped from 0.28 to 0.02. All three metrics now pass Core Web Vitals thresholds.

The initial page load only downloads the hero banner and first two content images (815 KB above-the-fold payload versus 14 MB before). Remaining images load on scroll via lazy loading.

For more on how image optimization connects to search visibility, see our image SEO guide. For tips on creating optimized thumbnail images specifically, read our web-friendly thumbnails guide.

FAQ

What is a good LCP score for images?

Google considers LCP under 2.5 seconds "good," between 2.5-4.0 seconds "needs improvement," and above 4.0 seconds "poor." Since hero images are the LCP element on most pages, aim for a hero image that loads and renders in under 2 seconds. This typically requires the image to be under 200 KB and delivered via CDN with a preload hint.

How do images cause layout shift (CLS)?

When an image loads without explicit width and height attributes, the browser does not know how much space to reserve. The image initially takes up zero space, and when it loads, surrounding content jumps to make room. Fix this by always including width and height attributes on img tags, or using the CSS aspect-ratio property.

Should I lazy load all images?

No. Only lazy load images below the fold. Never lazy load the hero image or any above-the-fold image, especially the LCP element. Lazy loading the LCP image delays its render and worsens your LCP score. Use loading="lazy" for below-fold images and fetchpriority="high" for the hero image.

What image format is fastest for page speed?

WebP is the best all-around format for page speed in 2026, offering 25-35% smaller files than JPEG with 97%+ browser support. AVIF is even smaller (50% less than JPEG) but has slightly less browser coverage and slower encoding. For maximum speed, serve AVIF with WebP and JPEG fallbacks using the HTML picture element.

How much can image optimization improve my PageSpeed score?

On image-heavy pages, proper optimization can improve your PageSpeed score by 30-60 points. A typical blog page with unoptimized images scores 30-50 on mobile. After resizing, compressing, converting to WebP, and implementing lazy loading, the same page often scores 85-95. The exact improvement depends on how much of your page weight is images.

Does image compression affect image quality?

Lossy compression at 75-85% quality is virtually indistinguishable from the original for photographs displayed at their intended size on screen. You can typically reduce file sizes by 50-80% before quality loss becomes visible. The key is compressing from the highest-quality source and sizing images to their actual display dimensions first.

How do I find which images are slowing down my page?

Run Google PageSpeed Insights on your URL and check the "Opportunities" section for "Properly size images," "Efficiently encode images," and "Serve images in next-gen formats." Each suggestion lists the specific images and estimated savings. For deeper analysis, use Chrome DevTools Network tab filtered to images, sorted by size, to identify the largest files.

---

Ready to optimize your images for faster page speed? Compress your images free with BulkImagePro — reduce file sizes by 50-80% with no visible quality loss. Process up to 50 images at once, right in your browser.

For a complete overview of compression methods, see our image compression guide. Running an online store? Check out our e-commerce image optimization guide for product-specific techniques.