Recording your screen is easy. Getting good still images out of that recording afterwards is where people lose an afternoon.
The manual approach - play, pause, screenshot, crop, save, repeat - is fine for three images and miserable for thirty. Batch extraction handles the same job in one pass, and screen content has a few specific characteristics that make it behave differently from ordinary video.
Why this comes up so often
Documentation is the main driver. Writing a tutorial, a help article, or an onboarding guide means capturing a sequence of UI states, and recording the flow once then extracting stills is far faster than taking thirty individual screenshots while trying not to lose your place.
Bug reports are the other big one. Recording a glitch as it happens is often the only way to catch it, but a video attached to a ticket is awkward - nobody wants to scrub through ninety seconds to find the moment. Extracted frames let you attach exactly the three images that show the problem.
The pattern in both cases is the same: video is the right capture format and stills are the right delivery format.
Use PNG, not JPEG
For screen content PNG usually wins outright. Flat colour and sharp UI text compress well without any loss, while JPEG leaves a fuzzy halo around every hard edge that makes small text harder to read.
The reasoning is the same as for slides, covered in the format comparison. Typical sizes for screen content:
| Content | PNG | JPEG q92 | Winner |
|---|---|---|---|
| UI screenshot, 1080p | ~250 KB | ~180 KB | JPEG on size, PNG on clarity |
| Slide, white background | ~90 KB | ~140 KB | PNG on both |
| Code editor, dark theme | ~180 KB | ~210 KB | PNG on both |
| Video playing inside the UI | ~2.1 MB | ~300 KB | JPEG on size |
The exception is a recording where most of the frame is photographic or video content. There, PNG loses its advantage and JPEG is the sensible pick.
Screen recordings are variable frame rate
Screen recorders capture when the picture changes, not at a fixed rate. A recording can sit at two frames per second on a static page and jump to sixty the moment you scroll, so "every 30th frame" means nothing on this footage. "Every three seconds" always works, and that is how this tool samples: by time, not by frame number.
If a downstream tool needs evenly spaced frames, convert to a constant frame rate first. Frames per second explained covers variable frame rate in more detail.
Convert VFR to constant 30 fps
ffmpeg -i recording.mp4 -vsync cfr -r 30 output.mp4Where your recording came from
macOS screen recording
Cmd+Shift+5 and QuickTime both produce H.264 MOV files that extract without any trouble. On Apple Silicon Macs some recordings come out as HEVC, which stays fine in Safari and can be inconsistent in Chrome on other platforms.
Windows Game Bar and Snipping Tool
Win+G and the newer Snipping Tool recording both output H.264 MP4. These are the most broadly compatible files of the group and work everywhere.
OBS
OBS defaults to MKV to survive crashes, and MKV support in browsers is inconsistent. Either set the output to MP4 in Settings, or use the built-in Remux Recordings option under the File menu, which rewraps to MP4 without re-encoding and takes seconds.
Browser-based recorders
Anything using the MediaRecorder API - most web-based screen recorders, Loom’s web capture, various meeting tools - produces WebM by default, usually VP8 or VP9. These extract fine everywhere. If one uses AV1, older browsers may struggle.
Try FrameRipper - free, no upload
Extract frames from any video directly in your browser. No sign-up, no file size limits.
Open FrameRipperChoosing an interval
Screen content changes in bursts rather than continuously, which makes intervals harder to pick than for ordinary video. The safe approach is to sample densely enough to catch every distinct state and accept duplicates.
Duplicates cost you very little. Sorted by filename they cluster together, so deleting runs of identical frames takes seconds. Missing the one screen you needed means recording the whole flow again.
| Recording type | Interval | 5-minute recording |
|---|---|---|
| Step-by-step UI walkthrough | 2-3 seconds | 100-150 frames |
| Slide presentation | 20-30 seconds | 10-15 frames |
| Bug reproduction | 0.5-1 second | 300-600 frames |
| Long-form tutorial | 5-10 seconds | 30-60 frames |
Getting cleaner source recordings
A few habits at capture time save far more effort than any amount of cleanup afterwards.
Record at native resolution without scaling the window, since scaling resamples every pixel and softens text. Hide notifications first - macOS has Do Not Disturb, Windows has Focus Assist - because a Slack banner in the middle of a documentation screenshot means recapturing. Close unrelated tabs and windows, which is both cleaner and avoids accidentally publishing something you did not intend to.
Move deliberately. Fast scrolling produces frames caught mid-motion, and no extraction setting recovers a blurred frame. Pausing for a beat on each state you want captured makes a dramatic difference to how many usable frames you end up with.
After extraction
A folder of two hundred PNGs is raw material. Sorting by filename and deleting duplicate runs typically reduces it to the twenty or thirty distinct states that actually matter.
Frame numbers also map back to timestamps. If you sampled every three seconds, frame 40 sits at roughly two minutes in - useful when a still needs context from the recording and you want to jump straight to that moment rather than hunting.
For documentation, most tools take a batch image import directly. Because extracted files are numbered in sequence, they land in the right order in Notion, Confluence, GitHub issues and most static site generators without any renaming.
Try FrameRipper - free, no upload
Extract frames from any video directly in your browser. No sign-up, no file size limits.
Open FrameRipper