Key takeaways
- JPEG is the wrong format for screenshots: its chroma subsampling smears text edges and flat-colour banding shows at every boundary — PNG or WebP always.
- A PNG screenshot can drop 60-80% of its weight from lossless optimisation alone — no pixels touched, no quality lost.
- Retina 2x screenshots are display-resolution overkill: downsample to the width the reader actually sees (usually half), which cuts file size about 4x with a quality gain on non-retina screens.
- For text-heavy captures destined for the web, lossy WebP at 85-90 is often visually identical to the PNG at a tenth of the bytes; check tiny text at 100% before trusting it.
- Crop before compressing: the 400 px of desktop around the dialog is 30% of the bytes and 0% of the message.
Why Screenshots Break the Normal Advice
Photographs are smooth gradients; screens are brutal discontinuities — black text on white at 10 px, 1 px borders, hard colour changes every few pixels. JPEG's whole design is discarding information the eye forgives in smooth content, and a screenshot contains none of the forgiving content: the ringing around every glyph, the banding in the flat panels, the smeared anti-aliasing on the borders. The same image as PNG is exact, and as lossy WebP at 90 is visually exact at a tenth of the size (the image file size guide has the per-destination budgets).
Retina capture doubles the problem: a 2x screenshot of a 1440 px window is a 2880 px file with text strokes two pixels thick, and it displays on most readers' screens at a size where half of those pixels are resampled away by software with cheaper algorithms than your downscale would have used.
The Recipe for Every Destination
Ticket or email attachment: crop to the content, downscale to the actual display width (usually 50% of a retina capture) with the resizer, export PNG. The typical result is 200-600 KB where the original was 8 MB, and text stays pin-sharp because PNG stores exactly what it is told.
Blog post or documentation: same crop and downscale, then the compressor at lossy WebP quality 85-90. UI screenshots are WebP's best case — flat areas compress to almost nothing and the only cost is on text edges, which the quality-85 band preserves visually. Verify the smallest text in the capture at 100% zoom before shipping, and fall back to PNG if the design has 9 px captions.
Sending to someone who will zoom: keep PNG at native resolution and compress losslessly (the optimisation pass removes PNG's waste — redundant filter choices, oversized palettes — without losing one pixel). A 6 MB retina PNG lands at 1.5-2.5 MB fully exact; that is the version for evidence, review and annotation.
The Annotator's Note: Crop First
The free win nobody does: a 2880 × 1800 retina capture of a 600 × 400 dialog is 95% background. Cropping to the subject multiplies every subsequent compression's effect and, more practically, focuses the reader's eye where the bug is. The ticket-quality test: open the image at 100% and ask whether the text you are reporting is already readable — if yes, everything outside it is padding; cut it.
Where the context matters (the menu path, the URL bar proving the environment), crop to the minimum frame that keeps the evidence rather than the whole desktop. And for anything public, redaction discipline first: faces, usernames and account numbers get pixelated — genuinely destroyed, not gently blurred — before sending, because weak blur is reconstructable.
Formats, Once and for All
PNG: always correct, sometimes fat. The safe answer when the receiver might zoom, edit or print. Lossless optimisation is free — run it always.
WebP: the delivery format for the web; lossy 85-90 handles most UI, lossless beats PNG by 15-30% and keeps exact pixels for the designs with hairlines.
JPEG: never, for text — the one exception being a screenshot of a photograph (the Netflix thumbnail bug), where the content is photographic and the format logic follows.
AVIF: excellent compression and growing support; for screenshots the win over WebP is smaller than the WebP win over PNG, because flat-colour content is cheap in both — use it for docs sites and tickets only if the viewer matrix supports it.
Frequently asked questions
The questions people ask most about how to compress and resize screenshots without losing legibility, answered directly.