Priya writes two tutorials a week. Each one carries eight to twelve screenshots. She is careful about code quality, careless about file size — and after eighteen months her blog has 600 images and a hosting bill that keeps climbing.
She opened DevTools one afternoon and sorted the network panel by size. The top eleven requests were all her own screenshots. The article text was 40 KB. The images were 3.2 MB.
Nothing was broken. The page was just heavy, in the specific way that nobody notices until a reader on a train gives up.
The pain, layer by layer
Pain 1: screenshots are born heavy.
Press PrtSc, paste into an editor, save. You get a PNG at full device resolution — on a 2× display that is 2560×1600 of flat colour and text. A single UI screenshot lands between 200 KB and 800 KB without anyone doing anything wrong.
Pain 2: the obvious fix makes text look worse.
"Just save as JPEG" is the advice every blog post gives. On a screenshot full of 14px code, JPEG produces ringing around every glyph. Priya tried it once. The comment section noticed.
Pain 3: the good converters want your file.
Most "free image converter" sites ask you to upload. For a published tutorial that is merely annoying. For a screenshot of an internal dashboard, a client mockup, or a half-written article, it is a small act of faith you should not have to make.
Pain 4: batch work is the whole problem.
An article has ten images. A tool that handles one at a time means ten round trips, ten downloads, and a folder full of image (1).webp, image (2).webp. The friction is not the conversion — it is the ceremony around it.
Pain 5: the cost is invisible until it is not.
Slow LCP does not send you an invoice. Bandwidth does. And the readers you lose never tell you why they left.
All five pains point at the same gap: you need a format that is smaller than PNG, without the quality tax of JPEG, and you need to convert a folder — without handing the files to a server.
What WebP actually is
WebP is an image format from Google with two modes: lossy (comparable to JPEG, usually smaller) and lossless (comparable to PNG, usually 20–35% smaller). It supports transparency and animation, and every browser that matters has supported it since 2020.
For screenshots, the win comes from lossless WebP: identical pixels, fewer bytes, no artefacts on text.
The tool: OnliTools Image to WebP
OnliTools Image to WebP converts a batch of JPG/JPEG/PNG files to WebP in the browser and hands back a single ZIP. The images never leave the tab — decoding and re-encoding both happen locally.
Step 1 — select the images
Pick as many as you want at once. The counter confirms what is queued.
Step 2 — start the conversion
One click. No upload progress bar, because there is no upload.
Step 3 — download the ZIP
You get images-webp.zip with one .webp per input, same base filename. Drop them into your static folder and update the references.
In HTML:
<picture>
<source srcset="/img/dashboard.webp" type="image/webp">
<img src="/img/dashboard.png" alt="Dashboard overview">
</picture>
In Markdown, just point at the new file:
What it actually saved — real numbers
I ran three of my own screenshots through it, all 1280×900:
| Screenshot | PNG | WebP | Saved |
|---|---|---|---|
| Tool page, mostly empty | 100,705 B | 69,678 B | −31% |
| Tool page, text-heavy | 95,868 B | 65,294 B | −32% |
| Long article page | 245,742 B | 137,712 B | −44% |
| Total | 442,315 B | 272,684 B | −38% |
No visible difference at 100% zoom. The long, text-dense page saved the most — which is exactly the kind of image a tutorial is full of.
Scale that to Priya's 600 images and the 3.2 MB article becomes roughly 2 MB without touching a single pixel of content.
Five things to know before you convert everything
1. Don't convert images you will edit later. WebP is a delivery format, not an archive. Keep the PNG source; convert on export.
2. Lossy WebP on text is still lossy. For screenshots and diagrams, use the lossless path. For photographs, lossy is fine and much smaller.
3. Animated GIFs convert too — check the result. Frame timing and loop behaviour are the usual casualties.
4. Old Safari is the only real holdout. Safari 14+ handles WebP. If you still support older, keep a PNG fallback with <picture>.
5. Filenames carry your SEO. dashboard-overview.webp beats image-3.webp, and alt text still matters more than the format.
Related, if you are already here
Once the images are lighter, the next two questions are always the same: are they the right dimensions, and do they leak anything?
- Image Resizer — trim oversized screenshots before converting; a 2560px image displayed at 800px is wasted bytes either way.
- Remove EXIF Metadata — strip GPS and camera data before publishing photos.
- Image Converter — when you need a format other than WebP.
The takeaway
Priya did not need a new CMS or a CDN plan. She needed to stop shipping PNGs to browsers that have supported a better format for six years.
Convert the batch, keep the sources, and check the numbers yourself — the tool shows you what you saved, which is the only performance metric that ever feels real.
Top comments (0)