How to Improve Your Google Lighthouse Score with Image Optimization
Google Lighthouse is an automated tool built into Chrome DevTools that scores your website's performance, accessibility, and SEO on a scale of 0–100. A score below 90 on Performance usually means images are the main problem — they're too large, in the wrong format, or not sized correctly. Fixing image issues alone can move a Performance score from 40–60 up to 80–95. This guide covers every image-related Lighthouse warning and how to fix each one for free.
Quick Answer
Google Lighthouse is an automated tool built into Chrome DevTools that scores your website's performance, accessibility, and SEO on a scale of 0–100. A score below 90 on Performance usually means images are the main problem — they're too large, in the wrong format, or not sized correctly.
Try it now — free, no signup
Your images stay on your device. Nothing is uploaded to any server.
Step-by-Step Guide
6 steps · takes under 1 minute
Run Lighthouse and identify image warnings
Open Chrome DevTools (F12), go to the Lighthouse tab, and run an analysis on your page. Look for these specific warnings: 'Serve images in next-gen formats', 'Properly size images', 'Efficiently encode images', and 'Largest Contentful Paint element'.
Fix: Serve images in next-gen formats (WebP/AVIF)
Lighthouse flags JPG and PNG images as a warning because WebP is 25–35% smaller at equal quality. Convert your images to WebP using the Image Converter tool. Use a <picture> element with a JPEG fallback for older browsers.
Fix: Efficiently encode images (compress)
Lighthouse flags images with excessive file size. Compress your JPG images to 75–80% quality and PNG images using the Image Compressor. The tool shows before/after file sizes so you can verify the savings.
Fix: Properly size images
If Lighthouse says an image is larger than its display size (e.g., a 2000px image displayed at 400px), resize it to the actual display size. Use the Image Resizer — resize to the CSS pixel size times 2 for retina screens.
Fix: LCP (Largest Contentful Paint)
The LCP element is usually a hero image or banner. Add loading='eager' and fetchpriority='high' to the HTML <img> tag for this image. Compress it to under 100KB and serve it as WebP. This is the highest-impact LCP fix.
Re-run Lighthouse to verify
After uploading your compressed, correctly-sized WebP images, re-run Lighthouse. Image warnings should be resolved and the Performance score should increase significantly.
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
| Format | Quality | File Size | Notes |
|---|---|---|---|
| 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
5 questions answered
Ready to get started?
Free, instant — your files stay on your device. Always.
Compress Images for Lighthouse Free