Convert WebM to PNG

This page has a narrower reader than the JPG one. You are not illustrating something — you are producing evidence. A bug report needs the exact error string visible. A support ticket needs the field value and the timestamp in the corner. A documentation step needs the menu item somebody is meant to click. In all three, the picture fails if the text in it is not crisp.

That is the whole case for PNG over JPG here. Both start from the same decoded frame at the same resolution, and JPG then adds its own compression on top — which lands hardest exactly where text meets background. PNG stores what the decoder produced and stops. The file is bigger and the words are legible, which for this reader is not a trade at all.

Lossless means nothing further is discarded. It does not mean the frame is pristine, and this is worth being blunt about: the picture arrived through a video codec that had already spent most of its effort on motion. Whatever softness that introduced is baked in before this conversion sees a pixel.

So PNG is not an upgrade over the video, it is the absence of a downgrade. On a static interface at a moment when nothing is moving, that leaves you with essentially the screenshot you would have taken at the time. On a frame during a scroll or a window animation, it leaves you with an exact copy of a smeared frame — which is a reason to move the timestamp, not to change the format.

Type the number of seconds from the start. The default of zero is almost never right for a screen recording, because recording starts before doing does — you get a desktop, a loading page or a hand reaching for the mouse.

For evidence there is a second consideration: the useful frame is usually just *after* the thing happens, not during it. The moment an error dialogue appears is a moment of animation and compression noise; half a second later it is sitting still and the codec has had time to describe it properly. If the first attempt is soft, add half a second and convert again rather than reaching for a sharpening filter.

Screen recordings have two very different kinds of moment in them. When nothing moves, a video codec can spend nearly all its bits on one frame and then coast, so a static interface is described extremely well — better, often, than the bitrate would suggest. When the page scrolls, every pixel changes at once and the same bitrate has to cover the whole frame, so detail collapses.

That is why a frame grabbed mid-scroll looks like a photocopy of a photocopy and a frame grabbed two seconds later looks perfect. If a recording seems to have no good frames at all, it was probably captured at a bitrate too low for its resolution — the fix is to record again with a higher setting, because nothing downstream can put back what was never encoded.

Browser-recorded video is essentially always 4:2:0: full brightness detail, but colour sampled at half resolution in each direction. On photographs this is invisible, which is why it has been standard since the beginning of digital video.

On a screen it is a different story, and it is the one artefact this reader notices. Coloured text on a contrasting background — red error text, a syntax-highlighted keyword, a coloured badge — arrives with a soft edge in the colour channel that the PNG then preserves faithfully. Preserving it is correct; it is what the recording contains. It is also the reason a still from a screen capture will never quite match a screenshot taken at the time, and worth knowing before you spend twenty minutes hunting for a better frame.

PNG discards nothing, so a full-resolution frame is a substantial file. Interface content compresses well — large flat areas of a single colour are the case PNG was designed for — and a 1080p screen capture frame typically lands in the low hundreds of kilobytes. A frame containing a photograph or camera footage can run to several megabytes.

After encoding, the image goes through an optimisation pass that rewrites it more efficiently without changing a pixel. On a measured 960 by 640 photograph that took 1,366 KB down to 468 KB, for about half a second of extra work. It is why the PNGs from this page are not as large as PNGs usually are, and it costs nothing in fidelity because it is a lossless recompression rather than a quality setting.

Documentation work means several frames from one recording: the menu, the dialogue, the confirmation. Each is a separate conversion — set the timestamp, convert, download, change the number — and each takes a couple of seconds because nothing leaves the machine in between.

Recording the demonstration deliberately makes this much easier. Pause for a beat at each state you intend to capture, and every one of those pauses becomes a frame where the codec had time to settle. It is the difference between six clean stills and six attempts at finding a clean still.

A recording of your own screen is, by construction, a recording of everything that was on it: an inbox in another tab, a customer name in the corner, a Slack notification, the internal tool you were demonstrating. Sending the whole video to a converter to get one frame back means handing over all the frames you did not want.

Here the WebM is decoded in the tab with the codecs the browser already ships, one frame is encoded, and nothing carrying the video is transmitted. The check takes ten seconds — open developer tools, watch the network tab, convert — and on this pair it is worth doing once so you know.