How to Lazy Load Images Properly
Lazy loading defers the download of below-the-fold images until the user scrolls towards them. On a long blog post with 20 images, lazy loading means the browser only downloads the first 2–3 on initial load — reducing initial page weight by 60–80%. This directly improves LCP, reduces bandwidth, and improves mobile performance.
Quick Answer
Lazy loading defers the download of below-the-fold images until the user scrolls towards them. On a long blog post with 20 images, lazy loading means the browser only downloads the first 2–3 on initial load — reducing initial page weight by 60–80%.
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
Use native lazy loading — it's one attribute
Add loading='lazy' to every <img> tag that's not in the initial viewport. Example: <img src='photo.webp' loading='lazy' width='800' height='600' alt='description'>. Supported in Chrome, Firefox, Edge, Safari 15.4+. This is all you need for most use cases.
Never lazy-load the LCP image
The hero image or first above-fold image is usually the LCP element. Adding loading='lazy' to it delays its download and significantly hurts LCP. Only lazy-load images below the fold. Use fetchpriority='high' on the LCP image instead.
Always include width and height attributes
Without width and height, the browser doesn't know the image's aspect ratio until it loads — causing Cumulative Layout Shift (CLS). Add exact pixel dimensions to every img tag: width='800' height='600'. This reserves the correct space before the image loads.
For WordPress — use a lazy loading plugin
WordPress 5.5+ adds loading='lazy' to images automatically. If your theme or page builder overrides this, use Smush, Imagify, or ShortPixel — all add proper lazy loading. Verify it's working with DevTools → Network → scroll the page and watch images load.
Test lazy loading is working
Open DevTools → Network → filter by Img → load the page. Only above-fold images should appear in the Network tab. Scroll down — images should appear as you scroll near them. If all images load immediately, lazy loading is not working.
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
Ready to get started?
Free, instant — your files stay on your device. Always.
Optimise Images Before Lazy Loading