Your PNG Screenshots Are 5x Bigger Than They Need to Be

I published a tutorial last month with 14 screenshots. After it went live, I checked the page weight out of curiosity: 38MB. Thirty-eight megabytes — for a page that is mostly text.

Every screenshot was a PNG, straight from my Mac's screenshot tool. A single full-screen Retina capture was 4.2MB. I had uploaded them exactly as they came out of the OS, the way most of us do.

Why screenshots are so heavy

Three things conspire against you:

1. Retina resolution. A screenshot on a modern display is 2x or 3x the CSS pixels. That 1440px-wide illustration in your article is actually a 4320px-wide PNG.
2. PNG is lossless. Great for crisp UI text, terrible for file size. Any photo-like gradient or shadow in the shot balloons fast.
3. Nobody compresses before uploading. Platforms will happily serve your 4MB original to every single reader.

The kicker: after compression, my 4.2MB screenshot came out at 380KB — and I could not tell the difference at article width. The detail PNG preserves is detail no reader will ever see, because the image is displayed at a fraction of its native resolution anyway.

The 30-second fix

I don't hand-tune screenshots anymore. My workflow now:

1. Take the screenshot as usual — PNG, full Retina glory.
2. Drop it into ZipPic's image compressor — free, runs entirely in your browser, no signup, no upload.
3. It compresses locally and shows a live before/after comparison. Nudge the quality slider until the text edges still look crisp.
4. Download, then upload the compressed version to your post.

That 14-screenshot tutorial went from 38MB to under 5MB. Load time went from "go make coffee" to instant — and every reader on mobile data got a faster page for free.

The part nobody thinks about: what's in the screenshot

Screenshots are uniquely sensitive uploads. Open tabs, file paths, a Slack DM in the background, an API key sitting in a terminal window you forgot was visible. Every "free online compressor" that asks you to upload a screenshot is asking you to hand all of that to a stranger's server first.

I started compressing locally for the file size. I keep doing it for the privacy. Nothing leaves your machine — the work happens in your browser via WebAssembly, and the file you download is the only copy that ever moves.

Next time you write a tutorial, try this: take one PNG screenshot, run it through a local compressor, and compare them side by side at article width. If you can't spot the difference — and you won't — there's no reason to ever upload the original again.