Image Optimization and Core Web Vitals: A Practical Guide

Google started using Core Web Vitals as a ranking factor a few years ago, and suddenly everyone cared about page speed. But when you dig into what actually makes pages slow, it's almost always the same culprit: images.

On the average web page, images account for about 50% of the total page weight. Get images right, and you've solved half the performance puzzle.

The Three Metrics That Matter

LCP (Largest Contentful Paint) — How fast the biggest visible element loads. Usually, that's an image. Google wants this under 2.5 seconds.

CLS (Cumulative Layout Shift) — How much stuff jumps around while the page loads. Images without defined dimensions are a major cause. Target: under 0.1.

INP (Interaction to Next Paint) — How quickly the page responds to user actions. Heavy images can block the main thread and delay interactions. Target: under 200ms.

The Impact Is Real

Here's what happens when you optimize images on a typical content site:

| Metric | Before Optimization | After Optimization | |--------|--------------------|--------------------| | Page weight | 4.2 MB | 890 KB | | LCP | 4.8 seconds | 1.6 seconds | | CLS | 0.25 | 0.02 | | Load time (3G) | 18 seconds | 4 seconds |

That's not cherry-picked. Those numbers come from real sites I've worked with. The fixes aren't complicated — they just take a little intention.

Step 1: Right Size, Right Format

The single biggest win is serving images at the right dimensions. A 3000px-wide hero image displayed at 1200px is sending 6x more pixels than needed.

Resize your images to match their display size. For retina displays, go 2x — so if an image displays at 600px, make it 1200px.

Then pick the right format:

• WebP — 25-35% smaller than JPEG at equivalent quality. Use this as your default.
• AVIF — Even smaller than WebP, but encoding is slower and browser support is catching up.
• JPEG — Universal fallback. Still fine for photos where WebP isn't an option.
• PNG — Only for images that need transparency and can't use WebP.
• SVG — For icons, logos, and simple illustrations. Tiny file size, infinite scaling.

Step 2: Compress Aggressively

Most images carry more quality than screens can display. You can compress a JPEG to quality 80 and nobody will notice the difference — but the file will be 40-60% smaller.

Here's a rough guide:

| Quality Level | Use Case | Typical Savings | |---------------|----------|-----------------| | 90-100 | Photography portfolios | 10-20% | | 75-85 | General web images | 40-60% | | 60-75 | Thumbnails, backgrounds | 60-80% |

Don't guess at quality levels. Compress, then look at the result. If you can't tell the difference, the compression is fine.

Step 3: Fix Layout Shift

Every image on your page should have explicit width and height attributes, or use CSS aspect-ratio. Without these, the browser doesn't know how much space to reserve, so content jumps around as images load.

<!-- Good: browser knows the space needed -->
<img src="photo.webp" width="800" height="600" alt="Description" />

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

This alone can take your CLS from failing to passing.

Step 4: Lazy Load Below-the-Fold Images

If an image isn't visible when the page first loads, don't load it until the user scrolls to it.

<img src="photo.webp" loading="lazy" alt="Description" />

One attribute. That's it. But don't lazy-load your hero image or LCP element — that needs to load immediately.

Step 5: Use Responsive Images

Serve different sizes for different screen widths. A phone doesn't need a 1400px image.

<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="photo-800.webp"
  alt="Description"
/>

Yes, it means generating multiple sizes. But the bandwidth savings on mobile are significant.

SVGs: The Often-Overlooked Optimization

If you have icons or logos as PNGs, convert them to SVG. A 50KB PNG icon becomes a 3KB SVG that looks perfect at any size.

Even existing SVGs can usually be optimized. Most design tools export SVGs with extra metadata, unnecessary precision, and hidden layers. Running them through an optimizer typically cuts the file size by 30-60%.

Optimize your SVGs to squeeze out those extra bytes.

A Quick Audit Checklist

Run through this for any page you want to optimize:

1. Measure first — Use Lighthouse or PageSpeed Insights to get your current scores
2. Check image sizes — Are any images wider than their display size?
3. Check formats — Are you using WebP where possible?
4. Check compression — Run images through a compressor
5. Check dimensions — Does every <img> have width and height?
6. Check lazy loading — Are below-the-fold images lazy loaded?
7. Measure again — Compare your new scores

---

Image optimization isn't glamorous work, but it's the highest-impact performance improvement you can make. Most pages can cut their load time in half just by serving properly sized, compressed images in modern formats. Start with your heaviest pages and work down from there.