Image Optimization for Core Web Vitals: The Practical Checklist
Images are the most common cause of poor LCP scores. Here's the complete checklist to optimize images for Core Web Vitals without sacrificing quality.
Largest Contentful Paint (LCP) measures how long it takes for the biggest visible element to load. In most cases, that element is an image. Fix your images, fix your LCP. Here's exactly how.
Step 1: Use the right format
WebP delivers 25–35% smaller files than JPEG at comparable quality. AVIF goes further — 40–50% smaller than JPEG — but encoding is slower and support is at ~92% (as of 2026). For most sites, WebP is the practical choice. Use AVIF for images you can pre-encode and serve statically.
Step 2: Set correct dimensions
Never serve a 2400px image for a space that displays at 600px. Resize images to their display dimensions before serving. If the element displays at different sizes on different devices, create multiple versions and use the `srcset` attribute to let the browser pick the right one.
Step 3: Compress without over-compressing
For WebP, quality settings of 75–85 are indistinguishable from the original to most users at typical display sizes. Going below 70 starts to show artifacts. The goal is the smallest file size where you can't see the difference — not the absolute smallest file size.
Step 4: Lazy load below-the-fold images
Add `loading='lazy'` to images that are below the visible viewport on initial load. Browsers implement this natively now — no JavaScript library required. This defers loading until the user scrolls toward the image, reducing initial page weight.
Step 5: Do NOT lazy load the LCP image
This is the most common mistake. If the hero image is your LCP element, lazy loading it delays the LCP render. The LCP image should be eager-loaded, ideally with a `<link rel='preload'>` hint in the `<head>` to start downloading it before the HTML parser even reaches the image tag.
Step 6: Use explicit width and height
Set `width` and `height` attributes on images (or use CSS aspect-ratio). This tells the browser how much space to reserve before the image loads, preventing Cumulative Layout Shift (CLS) — the score measuring unexpected page jumps that disorient users.
Step 7: Serve from a CDN
Images served from a CDN arrive from a server geographically close to the user. For a user in Singapore loading an image from a server in Ohio, a CDN can cut image load time by 60–70%. If you're on Vercel, Netlify, or Cloudflare, images are already CDN-served. If you're self-hosting, this is the highest-leverage infrastructure investment you can make.
🔧 Free Tools Used in This Guide
FreeToolKit Team
FreeToolKit Team
We build free browser tools and write about the tools developers actually use.
Tags: