What Are Core Web Vitals?
Core Web Vitals are a set of three real-world performance metrics that Google uses as a search ranking signal. They measure how fast, stable, and responsive a page feels to real users.
| Metric | Measures | Good Score | Image Impact |
|---|---|---|---|
| LCP | Largest Contentful Paint — load time of biggest visible element | ≤ 2.5s | Critical |
| CLS | Cumulative Layout Shift — visual stability during load | ≤ 0.1 | High |
| INP | Interaction to Next Paint — responsiveness to user input | ≤ 200ms | Low |
For most content-driven websites, the LCP element is the hero image or a large featured photo. This makes image optimization the single highest-impact intervention for Core Web Vitals.
Fixing LCP: Largest Contentful Paint
LCP measures how long it takes for the largest visible element to render. A slow LCP is almost always caused by one or more of these image problems:
Problem 1: Image Too Large
Serving a 3000px wide image to a 390px mobile screen forces the browser to download 5–10× more data than needed. Fix: use srcset with appropriately sized variants per device. ImgForge generates these automatically.
Problem 2: Wrong Format
Serving JPEG when AVIF or WebP is supported wastes 30–50% of the transfer size. Fix: use the <picture> element with AVIF → WebP → JPEG format priority.
Problem 3: No Preload for Above-Fold Image
The browser's preloader scans HTML for resources to download early, but <picture> elements are complex — the preloader often misses them. Without a preload hint, the LCP image download starts late.
Fix: add a <link rel="preload"> to your <head> pointing at the hero image. ImgForge generates this snippet for you when you select "Above the fold":
<link
rel="preload"
as="image"
href="hero_desktop_1920.avif"
imagesrcset="hero_480.avif 480w,
hero_1024.avif 1024w,
hero_1920.avif 1920w"
imagesizes="(max-width: 480px) 480px,
(max-width: 1024px) 1024px,
1920px"
fetchpriority="high">Problem 4: loading="lazy" on the Hero Image
A critical mistake: applying lazy loading to the image that is your LCP element. Lazy loading defers the download, which delays LCP. Only use loading="lazy" on images below the fold. For the hero image, use loading="eager" fetchpriority="high".
LCP checklist for hero images: correct format (AVIF/WebP) + appropriate width variant + fetchpriority="high" + <link rel="preload"> in <head> + width/height attributes set.
Fixing CLS: Cumulative Layout Shift
CLS measures how much page content visually shifts during loading. Images without explicit dimensions cause the most common source of layout shift on the web: the browser doesn't know how tall an image is before it loads, so it reserves no space. When the image loads, everything below it jumps down.
The Fix: Always Set width and height
Adding width and height attributes to every <img> tag allows the browser to reserve the correct space before the image loads, eliminating CLS entirely for images.
<!-- ❌ Causes CLS — no dimensions --> <img src="photo.jpg" alt="Product photo"> <!-- ✅ No CLS — browser reserves space --> <img src="photo.jpg" alt="Product photo" width="800" height="600">
The width and height values don't need to match your CSS display size — they just need to represent the correct aspect ratio. Modern browsers use them to calculate and reserve the right amount of vertical space. ImgForge reads the original image dimensions and automatically sets the correct width attribute in the generated HTML.
Passing Lighthouse Image Audits
Google Lighthouse runs three image-specific audits that directly affect your Performance score:
"Properly size images"
Lighthouse checks whether your images are significantly larger than the size at which they're displayed. Fix: generate size-appropriate variants for each device using srcset. ImgForge creates mobile (480px), tablet (1024px), and desktop (1920px) variants by default, with custom overrides available.
"Serve images in next-gen formats"
Lighthouse flags any JPEG or PNG served without a WebP or AVIF alternative. Fix: wrap all images in a <picture> element with AVIF and WebP sources. ImgForge generates this structure for every image.
"Avoid layout shifts"
Lighthouse checks for missing width/height attributes. Fix: always set both attributes. ImgForge includes the correct width attribute in all generated HTML output.