Workflow6 min read·Updated

Convert Screenshots to WebP Without Blurry Text

A Retina screenshot is often 1–3 MB as PNG. WebP at 88–92% quality is usually 150–350 KB with readable type. Go below 85% and you will see mushy letters — that is a settings problem, not a WebP problem.

Text is the constraint

Photos hide artifacts. UI type does not. Use a higher quality and downscale to the displayed CSS width (or 2× that). Never encode a 2880 px screenshot for a 720 px column at quality 70.

Why it matters

  • SaaS blogs and docs are screenshot-heavy.
  • PNG-24 is the default on macOS and it is huge.
  • Readers on laptops notice blur immediately.

How to do it

  1. Collect PNGs. Convert at quality 90, max width 1440 (or 2× your prose column).
  2. Check the first download at 100% zoom.
  3. Unlock the rest as a ZIP for the docs repo.

Settings that work

Pure UI: 90–92%. Screenshot with a photo in it: 86–88%. Flatten browser chrome if you do not need it — fewer pixels.

Convert a batch in your browser. Nothing is uploaded.
Open the converter

Put it into practice

Convert your images to WebP right now, free and privately in your browser.

Open the converter

Frequently asked questions

PNG is fine in the repo as a source. It is a poor choice on the published page.

Lossless is smaller than PNG but much larger than lossy 90%. Use lossy for docs.

Keep reading

Performance6 min read

Compress PNG

PNGs are huge because they are lossless. Convert UI to high-quality WebP and photos to WebP 80%.

Read more
Workflow6 min read

Figma to WebP

Figma PNG exports are lossless and huge. Convert them to WebP at 1× or 1.5× the layout width.

Read more
Tutorial6 min read

Best WebP quality setting

What quality should you use when converting to WebP? We tested photos, screenshots and graphics at every level. Get concrete recommendations per image type.

Read more