Optimize Images for Better Lighthouse Score

If your Lighthouse score is stuck below 90, images are one of the fastest ways to boost it. Lighthouse runs specific audits that catch oversized files, missing attributes, outdated formats, and lazy loading mistakes. Fixing these issues can add 20-40 points to your performance score in a single pass.

This guide walks through each image-related Lighthouse audit, explains what triggers a warning, and provides actionable fixes that will get your scores into the green.

Key Lighthouse Image Audits

Lighthouse checks images across four main categories: performance, accessibility, best practices, and SEO. Here is what to watch for:

1. Serve Images in Next-Gen Format

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

The fix: Convert images to WebP or AVIF. WebP reduces file sizes by 25-35% compared to JPEG. AVIF reduces by 40-50%. Use the <picture> element with fallbacks for universal support.

Expected improvement: 10-15 Lighthouse points for image-heavy pages.

2. Properly Size Images

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

The fix: Resize every image to its maximum display width. A 3000px photo displayed in a 600px container wastes 80% of its bytes.

Expected improvement: 5-10 points, especially on image-heavy galleries.

3. Efficiently Encode Images

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

The fix: Run every image through a compressor at 75-85% quality. Use target-size mode for critical images. Strip metadata (EXIF, GPS) to shave additional bytes.

Expected improvement: 5-10 points per large image.

4. Image Accessibility

What Lighthouse checks: Do images have alt text? Are dimensions declared?

The fix: Add descriptive alt attributes to every meaningful image. Declare width and height attributes to prevent layout shifts (CLS).

Image Checklist for Lighthouse Optimization

Use this checklist before every Lighthouse audit:

All photographs are in WebP or AVIF format
Images sized to display dimensions (not oversized)
Quality settings between 75-85% for JPEG/WebP
EXIF metadata stripped from all web images
Alt text present on all informative images
Width and height attributes declared
LCP image preloaded with <link rel="preload">
Below-fold images use loading="lazy"

Advanced Techniques

Responsive Images with srcset

Serve multiple image sizes based on viewport. This eliminates the “one size fits all” approach:

<img
  srcset="photo-400w.webp 400w, photo-800w.webp 800w, photo-1200w.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="photo-800w.webp"
  alt="Product photo"
/>

Art Direction with the Element

Serve different crops or formats for different screen sizes:

<picture>
  <source media="(min-width: 1000px)" srcset="hero-wide.avif" type="image/avif" />
  <source media="(min-width: 600px)" srcset="hero-medium.avif" type="image/avif" />
  <img src="hero-small.avif" alt="Hero" />
</picture>

Monitoring Lighthouse Over Time

Lighthouse scores can regress as content changes. Set up automated monitoring:

CI/CD integration: Run Lighthouse in GitHub Actions on every deploy.
Real User Monitoring (RUM): Track field performance with Cloudflare Web Analytics or Google Analytics.
Scheduled audits: Re-run Lighthouse monthly on critical pages to catch regressions.

Conclusion

Optimizing images for a better Lighthouse score is one of the most effective performance improvements available. Focus on next-gen formats, proper sizing, quality compression, accessibility attributes, and lazy loading. Use CompressNeo to pre-optimize every image before upload, hitting target sizes automatically with zero uploads and no signup.

Improve your Lighthouse score today with better image optimization.