The usual advice for a screenshot that's too big to share is "save it as JPEG". I tested that on a long page of text, and the JPEG came out larger than the PNG while looking worse.
Here's the test, why it happens, and what to use instead.
The test
I generated a 1280×4000 image of black and grey text on a white background, with some headings and blue links, to imitate a long article capture. Then I saved it in each format with Python's Pillow library. It's a generated page rather than a real browser capture, so your exact numbers will differ, but the pattern holds for text-heavy pages.
| Format | Size | Quality loss? |
|---|---|---|
| Lossless WebP | 69 KB | None |
| PNG, reduced to 256 colours | 222 KB | Very slight |
| PNG, optimised | 493 KB | None |
| PNG, as first saved | 507 KB | None |
| JPEG, quality 60 | 552 KB | Visible |
| JPEG, quality 80 | 751 KB | Visible |
| JPEG, quality 80, no chroma subsampling | 861 KB | Visible |
JPEG lost on both counts. Even at quality 60, it was bigger than the original PNG and damaged the text. Lossless WebP was about 7 times smaller than the PNG, with every pixel identical.
Why JPEG struggles with text
JPEG was designed for photographs, where colours change gradually. It splits an image into 8×8 pixel blocks and describes each block as a sum of smooth wave patterns.
A sky needs only a few of those patterns. The sharp edge of a black letter on white needs a lot of them, and almost every block on a text page contains an edge. So most blocks stay expensive.
Lowering the quality throws away the fine patterns, and that's what causes the halos you see around letters. You're losing sharpness without saving much space.
Colour makes it slightly worse. Most JPEG encoders store colour at half resolution by default, known as 4:2:0 chroma subsampling. You won't notice that in a photo, but it smears coloured text such as links. Turning it off keeps coloured text sharper, but as the table shows, the file gets bigger.
Why PNG and WebP do so well
A page of text is very repetitive. My test image had only 710 distinct colours, most of them the in-between shades around letter edges, and most of the image is long runs of pure white.
Lossless formats thrive on that. PNG filters each row and then compresses the repeated patterns. Lossless WebP goes further, with tricks like reusing recently seen colours and earlier matching pixels, which is why it wins so clearly here.
What to use
Sharing or embedding on the web: lossless WebP. Every current browser opens it.
cwebp -lossless -z 9 capture.png -o capture.webp
It has to stay PNG: reduce the colours first. On text, the change is very hard to see. Then, if you want every last byte, run a lossless optimiser.
pngquant --quality=85-100 --speed 1 --output capture-small.png capture.png
oxipng -o 4 --strip safe capture-small.png
A form insists on JPEG: accept that the file will be larger and the text softer. Don't go below about quality 80 for anything people need to read.
magick capture.png -quality 85 -sampling-factor 4:4:4 capture.jpg
A page that's mostly photos: this is where JPEG (or lossy WebP) is the right choice. It's several times smaller than PNG on real photos. The advice above is specifically about text, UI and diagrams.
The rule of thumb
Sharp edges and few colours: use a lossless format. Soft gradients and lots of colours: use a lossy format. For a page with both, try both and compare, because a quick test beats any rule.
Disclosure: I build PixelConvert, an image converter. I wrote a longer guide on getting screenshots small and readable for documentation.
Top comments (0)