The Complete Image Compression Guide
Shrink files without wrecking quality
Big image files slow down web pages, waste storage and clog up email. But compress carelessly and the quality falls apart. This guide covers how to compress properly — cutting size as far as possible while keeping the image looking right.
Contents
1. How image compression works
An image file stores color information for millions of pixels. Compression is the process of encoding that data more efficiently to reduce the file size.
There are two broad approaches. Lossy compressionshrinks the file by discarding detail the human eye barely registers. Lossless compressionthrows nothing away and simply stores the same data more efficiently. Lossy compression achieves far higher compression ratios, but the original data can never be fully recovered.
2. Lossy vs. lossless compression
Lossy compression
- Typical formats: JPG, WebP (lossy mode)
- Compression ratio: high (down to 10–30% of the original size)
- Quality: depends on the quality setting
- Best for: photos, web publishing, social uploads
Lossless compression
- Typical formats: PNG, WebP (lossless mode), GIF
- Compression ratio: low (50–80% of the original size)
- Quality: perfectly preserved
- Best for: logos, screenshots, keeping editable masters
The short version: For photos, use lossy compression (JPG, WebP) and cut the size dramatically. For graphics that need transparency or crisp lines, lossless (PNG) gives the better result.
3. Recommended quality settings by use case
JPG and WebP quality is expressed as a value from 0–100 (or 0–1). The numbers below are field-tested recommendations.
| Use case | JPG quality | WebP quality | Typical file size (at 1080p) |
|---|---|---|---|
| Social thumbnails and social media | 70~75% | 65~70% | 100~300 KB |
| Body images for blogs and websites | 75~80% | 70~75% | 200~400 KB |
| General archiving and sharing | 85% | 80% | 400~700 KB |
| Professional portfolios and high-fidelity work | 90~95% | 85~90% | 700 KB~1.5 MB |
| Print masters | 95~100% | — | 1~5 MB |
Tip: At 75% quality, most people can't see any difference. For web publishing, 75–80% is the sweet spot between file size and quality.
4. Practical tips for going smaller
① Resize first, compress second
Upload a 4000×3000 photo at full resolution and it's going to be huge, no matter what. Resize it to the size it will actually display at (say 1200×900) first, then compress, and you'll end up with a far smaller file. There's no reason to keep 4000px of data for an image shown at 1200px.
② Use WebP
At the same quality setting, WebP is 25–35% smaller than JPG. If you're publishing images on a website or blog, simply choosing WebP over JPG measurably cuts bandwidth and improves load times.
③ Convert PNG photos to JPG
If photos from your phone are sitting in PNG, convert them to JPG or WebP. Keeping a photograph that needs no transparency as a PNG just makes the file needlessly large.
④ Match the format to the job
Use PNG for logos with transparent backgrounds and JPG or WebP for photos. Picking the wrong format is the single most common source of wasted file size.
⑤ Strip the metadata
JPEG images carry EXIF metadata: capture date, GPS location, camera details. Removing it trims another 5–15% off the file size and is better for your privacy too.
5. Before and after: size comparison
Here's a before-and-after comparison based on a real 1920×1080 photograph.
| State | File size | Reduction |
|---|---|---|
| Original PNG (lossless) | About 4.2 MB | — |
| JPG at 95% quality | About 1.8 MB | 57% smaller |
| JPG at 85% quality | About 850 KB | 80% smaller |
| JPG at 75% quality | About 450 KB | 89% smaller |
| WebP at 80% quality | About 320 KB | 92% smaller |
※ Real results vary with image content. Busy photographs produce larger files; simple graphics produce smaller ones.
6. Compressing images with ImgFixIt
ImgFixIt compresses images inside your browser. Your image is never sent to a server.
- Upload your image (drag & drop or click)
- Check "Quality Compression" in the "③ Compress / Resize" step
- Set the quality with the slider — 75–80% is recommended for the web
- If you also want a format change, choose WebP in "② Format"
- Click download to save the compressed image
Combine with resizing for maximum effect: Check "Resize" as well to cut the dimensions first, then apply quality compression — that gets you the smallest possible file.