Is your website slow to load? Most of the time, the culprit is oversized images.
Google’s PageSpeed Insights tracks a metric called LCP (Largest Contentful Paint), which measures how long it takes for the largest above-the-fold image to fully render. One real-world case: a Divi-based site with a 15.6-second mobile LCP — turned out the header background image was uploaded at full resolution, uncompressed (from a r/divi benchmark post).
The more everyday scenario: when you upload to Xiaohongshu, Zhihu, WeChat, or email attachments, every platform has its own size limit. Xiaohongshu covers cap at 5MB, WeChat article images at 2MB, and many application forms only accept 200KB.
Image compression is not just about making files “smaller.” This guide will spend 5 minutes explaining what to compress, how small, into what format, and which tool is fastest.
Three Compression Paths
There are only three ways to shrink an image, but most people confuse them:
| Path | What it does | Compression rate | Quality loss | Best for |
|---|---|---|---|---|
| Lossy compression | Drops subtle details (nearly invisible to the eye) | High, 60-80% | Minimal | Photos, landscapes |
| Lossless compression | Optimizes storage, like zip | Low, 10-30% | Zero loss | PNG screenshots, icons |
| Format conversion | Switches from one format to another | Very high, 70-95% | Depends on target | PNG to WebP / AVIF |
A metaphor: lossy compression deletes the filler from a thick book (you can still read it); lossless compression trims the punctuation and whitespace (not a single word changes); format conversion swaps the paperback for an e-book (same content, 10x smaller).
In practice, option three is the most effective — converting a PNG straight to WebP often turns a 5MB photo into a 200KB WebP with nearly indistinguishable quality.
How to Choose Key Parameters
Picking a path isn’t enough. Tools will throw a bunch of parameters at you. Here’s what each one actually controls:
Quality
A 0-100 slider that controls how much detail gets discarded. Recommended values:
| Scenario | Recommended Quality | Target file size |
|---|---|---|
| Web hero image | 75-80 | < 200KB |
| Blog body image | 80 | < 150KB |
| E-commerce product photo | 85-92 | < 300KB |
| Social media avatar | 80 | < 100KB |
| Email attachment | 75 | < 1MB |
| Print / archival | 92+ or original | No compression |
Quality 80 is the sweet spot for the web — file size drops 60-70%, but most people cannot tell the difference (cleverutils.com benchmark).
Chroma Subsampling
JPEG and WebP discard some color information during encoding, since the human eye is more sensitive to brightness than color. The parameter is written as 4:4:4, 4:2:0, or 4:2:2:
4:4:4: Full color preserved (use for screenshots, UI captures)4:2:0: Drops 75% of color data (use this for photos — halves file size)4:2:2: In between (common in video)
You usually don’t need to set this manually — most tools default to 4:2:0, which is correct.
Resolution
If a 4000×3000 phone photo only displays at 800px wide on your web page, 75% of those pixels are wasted. Resize first, then compress — the result is much better than compressing the original.
EXIF Metadata
Photos carry hidden data: camera model, GPS location, shoot timestamp — useless on a web page and makes the file bigger. Strip it before uploading. For the details on what to remove and what risks remain, see the EXIF Privacy Guide.
Format Decision Tree
Five mainstream formats — how to pick:
Need transparency?
- Yes → Transparent PNG / WebP / AVIF all work
- Need legacy browser support? PNG
- Want the smallest size? AVIF > WebP > PNG
- No → Photo or illustration?
- Photo → WebP > AVIF > JPG
- Illustration / screenshot → PNG (color accuracy) or WebP
Format characteristics:
| Format | Compression | Transparency | Browser support | Best for |
|---|---|---|---|---|
| JPG | Baseline | ❌ | 100% | When compatibility matters most |
| PNG | Poor | ✅ | 100% | Screenshots, icons |
| WebP | 25-34% smaller than JPG | ✅ | 97%+ | Web default |
| AVIF | ~20% smaller than WebP | ✅ | 90%+ | New projects, maximum compression |
| HEIC | ~50% smaller than JPG | ✅ | Apple only | iPhone originals |
The 25-34% WebP-over-JPG figure comes from Google Developers’ 2010 study, still cited as the benchmark today. Chrome, Firefox, Safari 14+, and Edge all support it — 97%+ coverage. Use it without hesitation.
AVIF is more aggressive, but full Safari support only landed in 16.4 (March 2023). If any users are still on older Safari, set up a JPG fallback.
If your source is HEIC (iPhone default), convert to WebP first, then compress. piick.cc’s Image Format Converter handles all these format swaps.
Hands-On: 30 Seconds on Piick
Don’t want to install software? Run it directly in the browser. piick.cc’s Image Compressor does the work entirely on the frontend — no upload to any server, no privacy concerns.
Three steps:
- Drop your image in — supports JPG / PNG / WebP, up to 25MB per file
- Pick Quality — default is 80, which works for most cases
- Download the compressed file — shows the savings, e.g. 4.8MB → 620KB (87% smaller)
Tested on a 4000×3000 phone photo (4.8MB) at Quality 80, output was 620KB at the same dimensions with no visible quality drop.
Advanced: Batch, Retina, EXIF
Batch Compression
Need to compress 50 images? Doing it one by one is painful. Squoosh CLI (npx squoosh-cli --mozjpeg '{"quality":80}' *.jpg) or ImageMagick scripts handle batch jobs. piick.cc currently handles single files only; batch support is on the roadmap.
Should Retina screens get more aggressive compression?
No. Retina displays have higher pixel density, not a higher demand for sharper images — web pages still render at the same CSS pixel dimensions on Retina. What you should do is upload 2x resolution images (e.g., 1600×800 for an 800×400 container) while keeping the same compression parameters. Quality 80 works just as well on Retina.
Should you keep EXIF?
- Personal photo sharing: keep it (easier to archive)
- Commercial websites: strip it (smaller files + better privacy)
- News / media: keep copyright fields
For specific fields to watch out for, see the EXIF Privacy Guide.
FAQ
Compressed to under 200KB but already at Quality 60 and it still looks blurry — what now?
Resize the resolution first, then compress. Shrinking 4000×3000 to 2000×1500 before compressing can cut file size in half again, with better quality. piick.cc’s Image Cropper handles precise crops.
Can I use WebP without thinking about it?
For 97% of browsers, yes. If your audience skews toward older Safari / IE, either set up a JPG fallback or stick with JPG.
Is PNG-to-WebP conversion lossless?
No. WebP has two modes — lossless WebP and lossy WebP. Default tools use lossy, and the quality drop is barely visible. If you need absolute losslessness (screenshot archiving), use cwebp -lossless input.png -o output.webp.
Why is my compressed file bigger than the original?
This often happens when Quality is set above 95 — the compression algorithm has to store more metadata as quality rises, which can produce a file larger than the original. In that case, just use the original and don’t compress.
When will AVIF fully replace WebP?
Once browser support hits 95% (expected 2026-2027). For now, lead with WebP. Want to experiment? Try AVIF through Piick’s Format Converter.
Image compression isn’t as complex as it seems: pick a format first (WebP as the default), then a Quality value (start at 80), and finally decide whether to resize. Need to run it once online? Open the piick.cc Image Compressor and get results in 30 seconds.