How to Reduce Your LCP Image Size
LCP (Largest Contentful Paint) measures how long it takes for the largest visible element to render — and for most websites, that element is the hero image. Google's Good threshold is under 2.5 seconds. A poorly optimised hero image of 2–4MB can easily push LCP to 8–12 seconds on mobile. This guide gives you the exact steps to get under 2.5 seconds.
Quick Answer
LCP (Largest Contentful Paint) measures how long it takes for the largest visible element to render — and for most websites, that element is the hero image. Google's Good threshold is under 2.5 seconds.
Try it now — free, no signup
Your images stay on your device. Nothing is uploaded to any server.
Step-by-Step Guide
5 steps · takes under 1 minute
Identify your LCP element
Run PageSpeed Insights on your URL. In the Diagnostics section, Lighthouse identifies the LCP element and its current load time. Confirm it's an image — most sites' LCP element is the hero image or first above-fold photo.
Compress the LCP image aggressively
Target: under 150KB for the LCP image. Use the Image Compressor at 80% WebP quality. A 1440×700px hero at 80% WebP is typically 80–160KB.
Resize to actual display width
If your hero displays at 1440px but you're serving 3000px, resize to 1440px (or 2880px for retina). This alone cuts size by 75% before any quality adjustment.
Add fetchpriority='high' to the LCP image tag
Add fetchpriority='high' to the LCP image's <img> tag. This tells the browser to download this image before other resources, reducing time-to-render.
Preload the LCP image in the document head
Add <link rel='preload' as='image' href='/hero.webp' fetchpriority='high'> in your <head>. This starts the download as soon as the HTML parser reaches it — before CSS and JS are processed.
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
4 questions answered