PNG, JPEG, or WebP: which format for screenshots
Photographs and screenshots are almost opposite kinds of image, and the formats that suit them differ accordingly. A photo is continuous gradients and noise. A screenshot is large areas of flat colour separated by hard, high-contrast edges.
Compression algorithms are tuned for one or the other, and using the wrong one is immediately visible.
Why JPEG is wrong for screenshots
JPEG compresses by discarding high-frequency detail — the parts of an image that change rapidly from pixel to pixel. In a photograph that detail is mostly sensor noise and fine texture, so removing it costs little.
In a screenshot, the highest-frequency content is the text. Every letter edge is an abrupt jump from background to foreground. JPEG cannot represent that cheaply, so it approximates — and the approximation appears as faint halos and speckling around characters, usually called ringing or mosquito noise.
The result is a screenshot that looks slightly dirty. Worse, the artefacts concentrate exactly where the information is: the text you took the screenshot to show.
JPEG also has no transparency, which rules it out for window captures with rounded corners or drop shadows.
PNG: the correct default
PNG is lossless. What you capture is what you get, permanently, with no generational loss if the file is re-saved.
It also compresses flat colour very well. Interfaces are full of large uniform regions — toolbars, panels, backgrounds — and PNG handles long runs of identical pixels efficiently. A screenshot of a mostly-empty dialog can compress to a remarkably small file.
Where PNG struggles is photographic content: a screenshot of a video player showing an actual frame, or a design tool displaying a photo. Lossless compression of continuous-tone content produces large files.
PNG supports full alpha transparency, so window shadows survive intact.
WebP: smaller, with a caveat
WebP offers both lossless and lossy modes. In lossless mode it typically produces smaller files than PNG for the same content with no quality difference — which makes it attractive for a documentation site with hundreds of screenshots, where total page weight matters.
The caveat is workflow, not browsers. Browser support is broad and has been for years. But WebP is still less universally handled by desktop applications, ticketing systems, and older internal tooling than PNG is. A screenshot pasted into a chat client is a different problem from one served by your own website.
A reasonable split:
- PNG for anything you send to another person — tickets, chat, email
- WebP for images whose delivery you control, like your own docs or site
AVIF, briefly
AVIF generally compresses better than WebP. Encoding is slower, and support across non-browser tooling is thinner still.
For a website serving many images where every kilobyte counts, it's worth testing. For everyday screenshot sharing it adds friction without solving a problem you have.
The short version
Use PNG. It is the default on both macOS and Windows for good reason: it is lossless, it handles transparency, and it compresses interface content well.
Consider WebP when you're serving many images from your own site and page weight is measurable.
Avoid JPEG for anything containing text. The one legitimate case is a screenshot that is mostly photographic — and even then, look closely at the text in it before committing.
If you remember one thing: the format that makes photos small is the format that makes text ugly.