We Compressed 6 Real Screenshots: JPEG vs WebP vs PNG, Measured

Screenshots bloat documents, tickets and blog posts. We re-encoded six real interface captures at several quality levels. We measured file size and PSNR, so the next choice can be a rule instead of a guess.

Why screenshots need their own test

Photo advice often fails on screenshots. An interface capture is mostly flat color, thin text and sharp borders. Those details are exactly what chroma subsampling and block compression damage first. A loss nobody notices in a landscape photo shows up as colored fringing around letters.

Our image tools handle a steady stream of screenshots, and the same two questions keep coming back. How small is small enough, and why did the text go soft? Rather than quote a rule of thumb, we ran six files through a measurement pass.

How the test ran

The samples were six 1440×900 page captures plus one 390×844 phone capture. They covered a home page, a form tool, a game, a long article, a dark interface and mobile. Chrome captured each one as PNG.

Each PNG was drawn into a canvas and re-encoded with the browser built-in encoder as JPEG, WebP, lossless WebP and PNG. JPEG and WebP used quality 0.85, 0.70 and 0.55. Every output was decoded back into a canvas, compared with the original pixel by pixel and scored with PSNR.

PSNR is measured in decibels, and higher is closer to the source. Above 40 dB the difference is hard to see. Between 35 and 40 dB there is a slight loss on close inspection. Below 33 dB, text and edges usually show visible damage.

Only Chrome encoders were used. Firefox, Safari and command line tools will land within ten to twenty percent on size, with the same direction and different exact numbers.

The totals

The table below sums the six samples. Both lossy formats use quality 0.70, and PSNR shows the lowest and highest result.

At the same nominal quality, WebP is another 40.4 percent smaller than JPEG and scores 2 to 3 dB higher. All six samples agreed, with no exception.

Finding 1: WebP wins on interface captures

Across the six pairs, WebP came out at 50 to 69 percent of the JPEG size. The widest gap was the game page. JPEG took 47.3 KB against 23.6 KB for WebP, less than half, while PSNR rose from 40.0 to 42.4.

The encoding explains it. WebP predicts each block from pixels above and to the left, so repeated borders and flat panels compress hard. Interface captures are full of repeated shapes, which plays directly to that strength.

Compatibility is no longer the objection. Every mainstream browser has supported WebP since 2020, and common document and chat tools display it without complaint. Only old systems and some print pipelines still insist on JPEG.

Finding 2: JPEG loses at text edges

JPEG splits the image into 8×8 blocks and applies a discrete cosine transform. Text edges are high frequency detail, and block boundaries produce ringing. PSNR averages the whole frame, so damage in a small text area gets diluted by large flat regions.

At quality 0.55 the long article capture fell to 101.8 KB and 32.9 dB. It still looks acceptable at a glance. Zoom to the body text and letters carry colored fringes, especially at small sizes.

WebP also loses at 0.55, but it held 38.2 dB and kept glyph shapes intact. When the size budget is tight, WebP degrades more gently.

Finding 3: PNG is not always biggest, lossless WebP is not always smallest

Many guides say PNG is always larger than a lossy format. That holds for photos, not for these captures. PNG totaled 737.9 KB and did come out largest. The phone sample was only 51.9 KB against 16.8 KB for WebP, a far smaller gap than the photo rule suggests.

Lossless WebP was the bigger surprise. At quality 1.0 the encoder produced pixel-identical files, and every one was larger than PNG. The home page took 239.8 KB against 138.3 KB, and the article page 316.7 KB against 238.5 KB.

So the widely repeated claim that lossless WebP always beats PNG is false in this setting. Lossless results depend on the encoder and the content. Flat captures with few distinct colors sit in PNG's comfort zone, where palette and filter choices pay off. When lossless matters, test both.

Choosing a quality level

The article capture makes a useful ladder because it is the hardest case in the set.

Quality 0.70 is enough for daily use. For chat or a ticket, WebP at 0.55 saves a little more. Avoid JPEG 0.55 for text screenshots. Below 0.50 both formats blur letters visibly, and the saved kilobytes are not worth it.

Resize before you compress

File size scales with pixel count. Cut a 1440 pixel capture to 720 and you remove three quarters of the pixels. Encode at 0.70 afterwards and the result is often a fifth of the original. That step usually beats any quality tweak.

The right width depends on where the image goes. Blog bodies work at twice the display width, which covers standard and high density screens. Tickets and chat windows are fine at one to one and a half times. Only print material needs full size, and that is where 300 DPI enters.

Our target size compressor takes a KB ceiling and trades quality against dimensions to meet it, which suits upload forms and email limits. Use the format converter when you only need a different container at the original size.

Limits of this test

Six samples, all interface captures. Photos, illustrations and gradient posters are not represented. On photos the JPEG and WebP gap narrows, and JPEG sometimes holds up better. Do not copy these numbers straight onto a photo workflow.

PSNR is an average. It does not measure whether text stays readable, and it misses banding and local blur. The reliable check is still zooming to 100 percent and reading the smallest line.

Encoders differ as well. These results came from Chrome canvas encoding. The same quality setting in another tool can shift the size by a wide margin. Compare tools with the same image and the same nominal setting. For the broader format trade-offs, see our image format guide.

Bottom line

For interface screenshots, choose WebP at 0.70 and drop to 0.55 only when the budget demands it. Fall back to JPEG 0.70 for old pipelines and accept slight edge loss. When you need lossless, test PNG and lossless WebP side by side instead of assuming.

Always resize first. Match the width to twice the display size, keep quality at 0.70, and most captures land under 100 KB. Documents and pages load faster, and nobody has to squint at the text.