Image Optimisation for Core Web Vitals
Core Web Vitals are Google's metrics for real-world page experience: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Images directly affect LCP and CLS — two of the three. Getting images right is essential for passing the Core Web Vitals assessment that affects both rankings and user experience.
Quick Answer
Core Web Vitals are Google's metrics for real-world page experience: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Interaction to Next Paint (INP). Images directly affect LCP and CLS — two of the three.
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
Fix LCP — compress and preload your hero image
LCP measures the time for the largest visible element to render. For most pages, this is the hero image. Target: LCP under 2.5 seconds. Fix: (1) compress the hero image to under 200KB WebP, (2) add fetchpriority='high' to the img tag, (3) preload it in <head> with <link rel='preload' as='image'>.
Fix CLS — add width and height to all images
CLS measures unexpected layout shifts. Images without explicit width and height attributes cause layout shifts when they load. Add width and height attributes to every img tag — the browser reserves the correct space before the image loads.
Convert all images to WebP or AVIF
Smaller images load faster, improving LCP. Convert JPG and PNG to WebP (25–35% smaller) or AVIF (30–50% smaller). This directly reduces LCP time for image-heavy pages.
Resize images to display dimensions
Serving a 3000px image that displays at 800px makes the browser download and decode 14× more pixels than needed. Resize to actual display width (×2 for retina). This reduces both download time (LCP) and decode time.
Lazy-load below-fold images
Add loading='lazy' to every image below the initial viewport. This reduces initial page weight and allows the browser to prioritise LCP image loading.
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
Pre-optimizing images before uploading to a platform gives you more control than relying on the platform's automatic (and often aggressive) compression.
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
Ready to get started?
Free, instant — your files stay on your device. Always.
Optimise for Core Web Vitals