1Understanding Google PageSpeed and Images
Google PageSpeed Insights evaluates your website's performance based on Core Web Vitals metrics, and images are the single largest factor affecting your scores. The Largest Contentful Paint (LCP) metric — which measures how quickly the main content becomes visible — is most often impacted by unoptimized images. In fact, Google's own data shows that images are the primary cause of slow LCP scores on most websites.
Scoring 90+ on PageSpeed requires systematic image optimization. This guide walks you through every step needed to achieve top scores while maintaining visual quality.
2The LCP Image Priority
LCP measures the render time of the largest image or text block visible in the viewport. On most pages, this is the hero image, a large featured photo, or a background image. Optimizing your LCP image has the single biggest impact on your PageSpeed score.
- Target LCP image size: Under 200KB for JPG, under 150KB for WebP
- Target LCP image dimensions: Maximum 1200px wide for most layouts
- Format: WebP with JPG fallback, or modern AVIF with WebP fallback
- Loading: Never lazy-load the LCP image — it must load immediately
3Image Optimization Checklist
- Identify the LCP image using Chrome DevTools (Performance tab) or PageSpeed Insights report
- Resize LCP image to maximum display dimensions (no larger than needed)
- Compress LCP image using our compress JPG tool at quality 78-82
- Convert to WebP using our JPG to WebP converter for additional savings
- Add explicit width and height attributes to prevent Cumulative Layout Shift (CLS)
- Preload the LCP image using a link rel="preload" tag in your HTML head
- Lazy-load all below-fold images using loading="lazy" attribute
- Implement srcset for responsive images to serve appropriate sizes per device
4Common PageSpeed Image Issues
Offscreen Images
PageSpeed flags images that are loaded but not visible in the initial viewport. Fix this by adding loading="lazy" to images below the fold. This defers their loading until the user scrolls near them, dramatically reducing initial page weight.
Oversized Images
Serving images larger than their display dimensions wastes bandwidth and slows rendering. Use responsive images (srcset/sizes) or serve appropriately sized variants for different breakpoints.
Inefficient Formats
Serving PNG images for photographic content or JPG images when WebP would be more efficient. Convert to modern formats where possible while maintaining fallbacks.
5Measuring Success
After optimizing your images, run PageSpeed Insights again and compare scores. A well-optimized site should score 90+ on both mobile and desktop. Monitor your LCP metric specifically — aim for under 2.5 seconds. Use the SEO image optimization tool for ongoing monitoring.
6Conclusion
Google PageSpeed optimization is heavily dependent on image optimization. By focusing on the LCP image, implementing lazy loading, using modern formats, and maintaining proper dimensions, you can achieve top PageSpeed scores that improve both search rankings and user experience. The tools and techniques in this guide provide a clear, actionable path to PageSpeed perfection.