How to Compress Images for Web — The Complete Guide
Images account for 50–75% of a typical webpage's total transfer size. Google's Core Web Vitals penalise slow pages in search rankings, and every 100ms of load time reduces conversions. This guide covers the complete web image optimisation workflow — the right format, the right size, the right compression level — so every image you ship is as lean as possible without sacrificing visual quality.
Quick Answer
Images account for 50–75% of a typical webpage's total transfer size. Google's Core Web Vitals penalise slow pages in search rankings, and every 100ms of load time reduces conversions.
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
Choose the right format first
Photos → WebP (or JPG as fallback). Graphics, logos, screenshots with text → PNG. Animations → WebP or GIF. Using the wrong format is the most common mistake — a PNG photo can be 10× larger than its WebP equivalent.
Resize to display dimensions
Never serve a 3000px image in a 600px column. Resize to the maximum size it will display at, plus 2× for retina screens. Oversized images are the single biggest source of avoidable page weight.
Compress with a quality of 75–85%
For photos: 80% WebP or JPG gives excellent quality at a fraction of the size. For graphics/PNG: use lossless compression to preserve sharp edges. For thumbnails: 65–75% quality is fine.
Strip metadata
EXIF data (GPS location, camera model, shooting settings) adds 20–100KB to every image with no visual benefit. The compressor strips this automatically.
Verify with PageSpeed Insights
Run your page through Google PageSpeed Insights after uploading. Images should score green on 'Properly size images' and 'Serve images in next-gen formats' if you've followed this process.
Before vs After Compression
Typical result on a 1080×1080px product photo
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.
Compress Images for Web