For most websites, images are the biggest single factor in Core Web Vitals scores. They are the largest paintable element, the most common cause of layout shift, and a frequent reason main-thread work blocks user interaction. This guide walks through every image-related lever you can pull to keep LCP, CLS, and INP in the green.
The Three Vitals — Quick Recap
- LCP (Largest Contentful Paint) — when the biggest visible element finishes rendering. Target: ≤ 2.5 s.
- CLS (Cumulative Layout Shift) — how much visible content jumps around as the page loads. Target: ≤ 0.1.
- INP (Interaction to Next Paint) — how snappy interactions feel. Target: ≤ 200 ms. INP replaced FID in 2024.
Images touch all three. The rest of this article shows how.
1. Make Sure the LCP Image Loads First
On most landing pages, the LCP element is a hero image. Three quick wins:
- Preload it. Add
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">in<head>. - Set
fetchpriority="high"directly on the<img>tag too. - Never lazy-load the LCP image.
loading="lazy"on a hero is one of the most common Lighthouse warnings.
2. Use a Modern Format
Switching from JPG/PNG to WebP or AVIF typically cuts file size significantly with identical visual quality, which feeds straight into LCP. Use the <picture> element to keep a JPG fallback for very old clients:
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg" alt="..." width="1920" height="1080">
</picture>Convert PNGs in seconds with our PNG → WebP tool.
3. Compress Aggressively but Sensibly
Quality 80 for JPG/WebP is the sweet spot for most photographic content — the eye cannot distinguish it from quality 95, but the file is half the size. For graphics, prefer lossless WebP or compressed PNG. Drop file size in one click with our image compressor (browser-only, your files never leave the device).
4. Always Set Width and Height
This is the single most important fix for CLS. The width and height attributes are not about layout pixels — modern browsers use them to reserve aspect-ratio space before the image loads:
<img src="/24picture/hero.webp" width="1920" height="1080" alt="...">Combined with CSS max-width: 100%; height: auto;, the image scales responsively without ever shifting layout.
5. Use srcset for Responsive Sizing
Serving a 4K image to a 360 px phone is wasted bandwidth. Use srcset + sizes so each device downloads only what it needs:
<img
src="/24picture/hero-1280.webp"
srcset="/hero-640.webp 640w, /hero-1280.webp 1280w, /hero-1920.webp 1920w"
sizes="(max-width: 768px) 100vw, 1280px"
alt="..." width="1920" height="1080">Need to batch resize originals? Try our image resize tool.
6. Lazy-Load Below-the-Fold Images
Add loading="lazy" to every <img> below the first viewport. The browser will only download them when the user scrolls near. This frees bandwidth and CPU for the LCP and improves INP indirectly.
Exception: the LCP image itself, and anything you preload, must not use loading="lazy".
7. Decode Asynchronously
Setting decoding="async" on non-critical images lets the browser decode them off the main thread, protecting INP from large image decodes during scrolling and tap events.
8. Watch Out for Web Fonts and Icon Sprites
If you use icon sprites or large SVG graphics, run them through an SVG optimizer. Our SVG optimizer typically cuts file size substantially and reduces parse time, which helps INP on interaction-heavy pages.
9. Avoid Layout-Shifting Image Carousels
Reserve a fixed-height container for the carousel. If slides have different aspect ratios, normalize them to a single ratio with object-fit: cover. Carousels that resize as new slides load are a major CLS source.
10. Cache Aggressively
Set Cache-Control: public, max-age=31536000, immutable for hashed image filenames. A repeat visitor with cached images will routinely score perfect LCP.
Quick Audit Checklist
- LCP image preloaded with
fetchpriority="high"✓ - Modern format (WebP/AVIF) with fallback ✓
- Quality 80 or equivalent ✓
- Width and height attributes on every image ✓
srcset+sizesfor hero and content images ✓loading="lazy"+decoding="async"below the fold ✓- SVGs optimized ✓
- Long-cache headers ✓
Pro tip: most LCP failures we see are caused by one giant unoptimized hero. Convert it, set its dimensions, and preload it — and your score will jump before you touch anything else.
Conclusion
Core Web Vitals are not a black box. Images dominate the metrics, and almost every fix is a one-line HTML change or a single trip through a converter. Get your hero right, set dimensions everywhere, lazy-load below the fold, and you will pass.
Need a starting point? Run your hero image through our compressor, then convert it with the PNG → WebP tool and watch your LCP drop.
