How to Optimize Images to Pass Google Core Web Vitals (LCP & CLS)
Actionable guide to fixing slow Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) caused by unoptimized images on your website.
Key Takeaways
- LCP is frequently triggered by a large hero image that takes too long to download and render.
- Always declare explicit width and height attributes or aspect-ratio CSS properties to prevent layout shifts (CLS).
- Compressing your hero banner below 100KB can improve LCP times by over 1.5 seconds.
Understanding LCP and CLS in 2026
Google uses Core Web Vitals as a direct ranking signal for organic search positioning. Sites that load cleanly and quickly outrank sluggish competitors with high bounce rates.
The two metrics most directly impacted by imagery are Largest Contentful Paint (which measures how quickly the main banner or photo renders) and Cumulative Layout Shift (which measures unexpected layout jumps while images load).
3 Essential Image Fixes to Score 95+ on PageSpeed Insights
Implement these three best practices on every page:
- Pre-Size Images to Actual Display Dimensions: Never serve a 4000x3000px camera photo inside a 400x300px blog card. Use Image Resizer to scale it down first.
- Compress Aggressively: Use lossy compression to reduce file weights under 150KB for banners and under 50KB for thumbnails.
- Prevent Layout Shifts: Always add explicit width and height attributes in HTML so the browser reserves layout space before the image finishes downloading.
Frequently Asked Questions
What is an ideal image file size for web pages?
Hero banners should ideally stay under 150KB–200KB, while article illustrations and product photos should remain under 50KB–80KB.
Does lazy loading help LCP?
Lazy load images below the fold, but NEVER lazy load your hero image or primary banner, as doing so delays your LCP score.
Explore All 19 Free Utilities
Convert, compress, and process your PDFs, images, and developer datasets directly in your browser.