How-to Guide 2 min read

How to Improve Your Lighthouse Image Score

Lighthouse audits images across four checks: next-gen formats, proper sizing, efficient encoding, and LCP element optimisation. Each flagged image comes with an estimated savings value. This guide works through each audit systematically so you can clear them one by one.

Files never leave your device ⚡ Instant browser processing 🆓 100% free — no account 🚫 No watermark on output
By ImgToolkit Team · Updated May 2026 · 2 min read · Processed in your browser
PNGJPGWebPGIF

Quick Answer

Lighthouse audits images across four checks: next-gen formats, proper sizing, efficient encoding, and LCP element optimisation. Each flagged image comes with an estimated savings value.

Try it now — free, no signup

Your images stay on your device. Nothing is uploaded to any server.

Fix Lighthouse Image Issues

Step-by-Step Guide

5 steps · takes under 1 minute

1

Run Lighthouse and export the report

In Chrome DevTools → Lighthouse tab → run Performance audit. Under Opportunities, look for all four image checks. Note each failing image URL and its estimated savings.

2

Fix 'Serve images in next-gen formats'

Download each flagged image. Convert to WebP using the Format Converter. Upload WebP versions and update src attributes. Estimated saving: 30–50% of current image weight.

3

Fix 'Properly size images'

The flagged images are larger than their display size. For each: find the CSS display size, resize the image to that width (×2 for retina), re-upload. Use the Resize tool.

4

Fix 'Efficiently encode images'

These images are in the right format but not compressed enough. Download, compress at 80–85% quality in the Image Compressor, re-upload. Typical saving: 40–70%.

5

Fix LCP image

Lighthouse identifies your Largest Contentful Paint element. If it's an image: (1) compress it aggressively, (2) add fetchpriority='high' to its <img> tag, (3) add a <link rel='preload'> in the <head>. This tells the browser to download it first.

🔒

100% Private — Zero Uploads

ImgToolkit runs entirely in your browser using the Canvas API. Your images are never sent to a server, never stored in the cloud, and never seen by anyone else. This makes it safe for sensitive documents, client work, medical imagery, and confidential screenshots.

💡

Pro tip

Use 75–85% quality for web images — you get 60–80% smaller files with no visible difference at normal screen sizes.

Format & File Size Comparison

Same 1080×1080px photo processed four ways

FormatQualityFile SizeNotes
PNG (original) Perfect 4.2 MB No compression — too large for web
Compressed PNG Visually identical 1.1 MB −74% — transparency preserved
JPG (85% quality) Excellent 310 KB −93% · Best for photos
WebP (85%)BEST Excellent 205 KB −95% · Recommended for web

Based on a 1080×1080px photo. Results vary by image content and complexity.

Related Free Tools

All tools run in your browser — no account or upload needed

Frequently Asked Questions

4 questions answered

What Lighthouse score should I aim for on images?

Lighthouse doesn't give an image-specific score — image audits contribute to the overall Performance score (0–100). Aim for a Performance score of 90+. Clearing all image audit opportunities typically adds 10–30 points to the Performance score, depending on how image-heavy your page is.

Why does Lighthouse flag images that look fine?

Lighthouse analyses technical metrics (file size, format, dimensions), not visual appearance. An image can look perfectly sharp to a human but still fail the audit because it's 2× larger in file size than it needs to be. The audits are about efficiency, not about whether the image looks acceptable.

What is the difference between PageSpeed Insights and Lighthouse?

Lighthouse is the underlying audit engine — it runs in Chrome DevTools and in PageSpeed Insights. PageSpeed Insights runs Lighthouse on Google's infrastructure (simulating a slow mobile connection) and also includes real-world field data from the Chrome User Experience Report (CrUX). They use the same image checks but PageSpeed includes real-user measurements.

I fixed all image issues but my Lighthouse score didn't improve much — why?

Lighthouse scores are weighted — images are important but not the only factor. JavaScript execution time, render-blocking resources, server response time, and Cumulative Layout Shift also contribute. Once images are clean, look at 'Eliminate render-blocking resources' and 'Reduce unused JavaScript' as the next high-impact opportunities.

Ready to get started?

Free, instant — your files stay on your device. Always.

Fix Lighthouse Image Issues

All Free Image Tools

Image Compressor →Background Remover →Image Resizer →Crop Image →PNG to JPG →JPG to WebP →AI Upscaler →Watermark Tool →Blur Faces →Rotate Image →