Why Image Compression Matters
If a website has 10 images and each is 2 MB, the total page weight is 20 MB. On 3G mobile, that's a 50+ second load time — users won't wait. Compression is the art of preserving perceived quality while reducing file size.
Two Fundamental Compression Types
Lossy
Discards information that's hard for the human eye to detect. JPG, WebP (lossy mode), and AVIF work this way. Controlled by a quality parameter (1-100):
- Q90-100: Imperceptible to the naked eye, but files still large.
- Q80-90: ⭐ Sweet spot for web — small files, virtually no visible loss.
- Q60-80: Some details blur but acceptable for fast loading.
- Below Q60: Blocks become visible, quality drops noticeably.
Lossless
Discards nothing — just encodes more efficiently. PNG, GIF, and WebP (lossless mode) work this way. Typically achieves 20-50% reduction — not as aggressive as lossy but quality is fully preserved.
Which Format When?
| Content type | Recommended format | Why |
|---|---|---|
| Photo (landscape, portrait) | JPG Q85 or WebP Q80 | Lossy compression isn't noticeable on photos |
| Logo, icon | PNG or WebP lossless | Sharp edges and transparency required |
| Screenshot | PNG | Mix of text + graphics; JPG blurs text |
| Animation | WebP or AVIF | 5-10× smaller than GIF |
| High-quality archive | PNG or TIFF | No loss during repeated edits |
Compression Strategy: 3 Steps
Step 1: Resize to the Right Dimensions
If a 4000×3000 pixel photo will display at 800 px wide on the web, physically resize it. This alone removes 75% of the size. Use Photoshop, GIMP, or online tools.
Step 2: Pick the Right Format
Use the table above to choose by content type. For modern websites, WebP should be the default with JPG fallback.
Step 3: Tune the Quality Parameter
Q80-85 is almost always ideal for the web. Test the threshold below which quality becomes visibly worse. Online converters (e.g., JPG → WebP) do this automatically.
Before / After Compression
Typical results (2400×1600 photo):
- Original PNG: 3.2 MB
- JPG Q85: 480 KB (85% smaller)
- WebP Q80: 320 KB (90% smaller, smaller than JPG too)
- AVIF Q70: 240 KB (93% smaller, most aggressive)
In this example, switching to WebP cuts page weight significantly while keeping visual quality intact.
What NOT to Do
- Don't re-save JPGs repeatedly: Each save degrades quality. Use PNG for editing, convert to JPG only at the final stage.
- Don't over-compress: Below Q60, visible artifacts appear. Users punish poor quality more than slowness.
- Don't lock into one format: Modern sites should serve both WebP and JPG (via
<picture>).
Wrap-Up
A good compression strategy is three steps: right size + right format + right quality setting. Switching from JPG/PNG to WebP alone can halve your page weight. That's a direct SEO and UX win.