shadcn.io— 1,000s of shadcn/ui blocks
Skip to content

Why your screenshots are 2 MB, and how to shrink them 60–90%

I once counted the screenshots in a single design-review email thread. Eleven of them, PNG, averaging just under 2 MB each. Twenty-odd megabytes of mostly-white dashboards, flying back and forth between six people who all had the same app open in another tab. Nobody thought about it, because it "worked." That's the trap. Screenshots are quietly enormous, and the reason is baked into how your computer takes them.

Why a screenshot is a 2 MB file

When you hit the screenshot shortcut, your operating system saves a PNG. That's a sensible default — PNG is lossless, so the capture is pixel-perfect, and for a screenshot full of crisp text that's genuinely the right instinct. The problem is what PNG does with size.

PNG stores every pixel exactly. A modern screen is dense — a full-window grab on a Retina or 4K display can be 2,000+ pixels wide, and PNG faithfully records every one of those millions of pixels at full fidelity. It doesn't care that 60% of the frame is the same shade of near-white. It doesn't throw anything away, because throwing things away isn't what it does. So a screenshot of a nearly-empty settings page — visually almost nothing — still weighs 1.5 to 2.5 MB, because the canvas is huge even when the content is sparse.

The move: convert to WebP

WebP can do something PNG can't — compress lossily while keeping crisp edges and transparency. On screenshots specifically, that combination is close to magic, because a screenshot is mostly flat regions (cheap to compress) with a bit of text (which WebP keeps sharp). The lossy pass discards the imperceptible noise; your eye never files a complaint.

Real numbers from screenshots on my own disk:

ScreenshotAs PNGAs WebP
A settings page, mostly white1.6 MB~180 KB
A full analytics dashboard2.4 MB~310 KB
A dark-mode code editor1.9 MB~240 KB

That's roughly 85–90% off, and placed side by side I can't tell which is which. The text stays legible down to the pixel. This is the single highest-return conversion I do, precisely because screenshots are so wildly overweight to begin with — there's an enormous amount of nothing to squeeze out.

"Won't the text get blurry?"

This is the fear, and it's a fair one, because you've probably seen a JPG screenshot with fuzzy haloed text and assumed all lossy formats do that. WebP is better at edges than JPG — meaningfully better. At a sensible quality setting, text on a WebP screenshot stays crisp. I've zoomed in to 400% hunting for artifacts around letterforms and come up empty on normal UI captures.

The honest exception: if you crank the quality down hard to chase a tiny file, you will eventually see text soften. The fix is not to do that. A middle quality setting already gets you the 60–90% win with the text intact. There's no reason to push into the range where it breaks.

When shrinking doesn't help

Two cases where I leave the PNG alone.

If the screenshot is going back into a design tool to be marked up, annotated, or composited, I keep it lossless. WebP's lossy pass is a one-way door, and I don't want to bake compression into something I'm about to edit and re-export. Ship the WebP, keep the PNG master — same rule as always.

And if a screenshot is already small — a tiny cropped detail, a single button, something already under about 100 KB — the conversion barely moves the needle. The 60–90% win comes from files that are huge because the canvas is huge. A small crop has already solved that problem. Don't add a step for nothing.

How I actually do it

I run screenshots through the PNG-to-WebP converter on this site before they go anywhere near an email or a doc. It happens in your browser, so the capture — which, let's be honest, often shows half your screen and whatever was in the background — never leaves your device. Drop the PNG in, watch the size column collapse, download the WebP, attach that instead.

The bigger point isn't the tool, it's the reflex. Once "screenshot, then shrink" is automatic, you stop firing 2 MB images at people who already have the app open, your emails send faster, and threads stop ballooning into the tens of megabytes. That eleven-screenshot email would've been about 2 MB total instead of twenty-plus. Same pictures. Same everything. Just none of the dead weight.

Related posts


All posts