Optimize Images for Google PageSpeed Insights

Google PageSpeed Insights is the go-to tool for measuring website performance. If your PageSpeed score is stuck below 90, images are likely a significant factor. PageSpeed Insights runs specific audits that detect unoptimized images, outdated formats, oversized files, and delivery issues—all of which directly impact your Core Web Vitals and search rankings.

This guide walks through each image-related PageSpeed audit, explains what causes warnings, and provides step-by-step fixes that will boost your scores into the green.

Key PageSpeed Image Audits

PageSpeed Insights evaluates images across multiple performance dimensions. Here are the most common image-related audits and how to pass them:

1. Serve Images in Next-Gen Format

What PageSpeed checks: Are your JPEG and PNG images served as WebP or AVIF?

The issue: Legacy formats waste bandwidth. A JPEG at 200KB could be 120KB as WebP at the same quality.

The fix: Convert all photographic images to WebP or AVIF. Use compression tools to batch convert existing libraries.

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero image" />
</picture>

Expected improvement: 10-15 PageSpeed points per image converted.

2. Properly Size Images

What PageSpeed checks: Are images served at dimensions larger than their display size?

The issue: A 3000px photo displayed in a 600px container wastes 96% of its bytes.

The fix: Resize every image to its maximum display width before uploading. A 1200px display needs a 1200px source (or 2400px for retina).

Expected improvement: 5-10 points per oversized image.

3. Efficiently Encode Images

What PageSpeed checks: Could images be compressed further without visible quality loss?

The issue: Many images are saved at quality 90-100%, which is overkill for web display.

The fix: Compress to 82-85% quality. The difference is imperceptible but the size savings are significant.

Expected improvement: 5-10 points per large image.

4. Defer Offscreen Images (Lazy Loading)

What PageSpeed checks: Are below-fold images loading unnecessarily?

The issue: Images below the viewport compete with above-fold content for bandwidth.

The fix: Add loading="lazy" to images below the fold. Ensure above-fold images are NOT lazy-loaded.

<img src="product.webp" loading="lazy" alt="Product" />

Expected improvement: 2-5 points on pages with many images.

5. Ensure Text Remains Visible During Web Font Load

What PageSpeed checks: Do images with text have fallbacks during loading?

The fix: Use font-display: swap and provide text alternatives for critical images.

Image Optimization Checklist for PageSpeed

Use this checklist before every PageSpeed audit:

All JPEG/PNG images converted to WebP or AVIF
Images sized to maximum display dimensions
Quality set to 82-85% for all lossy images
EXIF metadata stripped from all images
Lazy loading enabled for below-fold images
Width and height attributes declared on all <img> tags
CSS background images sized appropriately
Responsive srcset implemented for key images

Advanced PageSpeed Techniques

Use Priority Hints

<link rel="preload" as="image" href="hero.avif" type="image/avif" />
<img src="hero.avif" fetchpriority="high" alt="Hero" />

This tells the browser to prioritize the LCP image.

Implement Responsive Images

Serve different file sizes to different devices using srcset and sizes:

<img
  srcset="small.webp 400w, medium.webp 800w, large.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  src="medium.webp"
  alt="Responsive image"
/>

Use a CDN with Image Optimization

Cloudflare Images, Cloudinary, and Imgix automatically optimize, resize, and convert images on delivery, often improving PageSpeed scores without any code changes.

Monitoring PageSpeed Over Time

PageSpeed scores can regress as content changes. Set up monitoring:

CI/CD integration: Run PageSpeed Insights on every deploy
Scheduled audits: Monthly checks on critical pages
Real User Monitoring: Track actual field performance with Cloudflare or GA4
Budget alerts: Set minimum score thresholds and alert when scores drop

Conclusion

Optimizing images for Google PageSpeed Insights is one of the fastest ways to improve your performance scores and Core Web Vitals. Focus on next-gen formats, proper sizing, quality compression, and lazy loading. Use browser-based tools to pre-optimize every image before upload—no server round-trips, no quality loss, and complete privacy.

Boost your PageSpeed Insights score today with proper image optimization.