Video Tool

Extract Every Frame from a Video as PNG Images

Drop a video, choose how many frames to capture and at what resolution, then download them as individual PNGs or one ZIP file.

Extract Frames
Extract Every Frame from a Video as PNG Images
Free Tool

Video to Image Frames Extractor

Upload a video, choose how many frames to capture and at what resolution, then download as PNGs or a ZIP.

Drop a video here

MP4, MOV, WebM, MKV and more

Video loaded in a dark player ready for frame extraction
01

Video Player Drop Zone

Try It Now
Frame count and resolution controls
02

Control Frame Count and Resolution

Try It Now
Grid of extracted video frames ready for download
03

Download PNGs or ZIP

Extract Now
How It Works

Extract frames in three steps

1

Upload your video

Drop a video file onto the player or click Browse. MP4, MOV, WebM, MKV and other browser-supported formats all work. The video loads in the player immediately.

2

Set frame count and width

Choose how many frames to extract (2 to 100) and the output image width in pixels (up to 1920 px). Frames are distributed evenly across the full video duration.

3

Capture and download

Click Capture Frames. A progress bar tracks each frame. When done, download individual PNGs by clicking any thumbnail, or grab all frames at once as a ZIP.

Deep Dive

How the Frame Extractor Works

All processing runs in the browser using the HTML5 Canvas API — no server upload required.

How the Frame Extractor Works
01

Loading: HTMLVideoElement

The uploaded video is loaded into a hidden HTMLVideoElement via an object URL. The browser decodes the video natively so no external codec library is needed. The element's metadata (width, height, duration) becomes available once the video is ready.

FormatsAny container the browser can decode (MP4, WebM, MOV, MKV)
ProcessingRuns entirely in the browser — no server round-trip
02

Seeking: video.currentTime

Frame positions are calculated by dividing the video duration evenly into the requested number of frames. For each position the tool sets video.currentTime and waits for the seeked event before drawing — ensuring the correct frame is rendered rather than the previous one.

DistributionFrames evenly spaced from 0 s to the last frame
AccuracyDepends on the video's keyframe interval
03

Rendering: Canvas 2D drawImage()

Each sought frame is drawn onto a Canvas element at the specified output width. The height is calculated automatically to match the video's native aspect ratio. ctx.drawImage() copies the current video frame pixel-by-pixel into the canvas.

FormatPNG (lossless) via canvas.toDataURL("image/png")
Max widthUp to 1920 px
04

Packaging: JSZip

When downloading all frames, each PNG data URL is decoded from Base64 back to a binary Blob and added to a JSZip archive. The archive is generated in the browser and offered as a single download using the FileSaver.js saveAs() helper.

Outputvideo-frames.zip containing frame-1.png to frame-N.png
Benefits

Why Use This Frame Extractor

🎞️

Up to 100 Frames

Extract 2 to 100 frames distributed evenly across the entire video.

📐

Custom Resolution

Set the output width up to 1920 px — aspect ratio is preserved automatically.

🖼️

PNG Quality

Every frame is exported as a lossless PNG via the HTML5 Canvas API.

📦

ZIP Download

Download all extracted frames at once as a single ZIP file.

Who Uses It

Who Uses the Frame Extractor

From filmmakers making storyboards to researchers building image datasets, here are the most common uses.

People using a video frame extraction tool
01

Filmmakers and Storyboard Artists

Extract key frames from a rough cut or reference video to use as storyboard panels, saving hours of manual screenshot work.

02

Motion and Sports Analysts

Capture frames at precise intervals to analyze an athlete's form, a ball's trajectory, or any rapid motion that is invisible at normal playback speed.

03

Social Media and Content Creators

Pull thumbnail candidates or highlight stills from a video clip and use them directly in posts, stories or presentations.

WorkflowExtract frames here, import PNGs into your design tool
04

Machine Learning and Computer Vision

Build image datasets from video recordings quickly. Extract hundreds of frames across multiple clips to train or evaluate visual models.

05

Educators and Researchers

Turn a recorded lecture or experiment video into a sequence of still images for slide decks, papers, or printed handouts.

06

Casual Users

Want to grab a perfect still from a holiday video or a clip? Drop it in, extract a few frames, and download the one you need.

Frequently Asked Questions

What video formats are supported?

Any format your browser can decode natively: typically MP4, WebM, MOV, MKV and AVI. No external codec is needed since the browser handles decoding.

How many frames can I extract?

Between 2 and 100 frames per video. The frames are evenly distributed across the full video duration, so extracting 10 frames from a 60-second video gives you one frame every 6 seconds.

What image format are the frames saved as?

All frames are saved as PNG (lossless). PNG preserves every detail from the original video frame without compression artefacts.

How is the frame timing calculated?

The tool divides the total video duration evenly by the number of frames requested. For example, 5 frames from a 20-second video are captured at 0 s, 5 s, 10 s, 15 s and 20 s.

Can I download all frames at once?

Yes. After extraction, click Download All Frames to receive a ZIP file named video-frames.zip containing all PNGs named frame-1.png through frame-N.png.

Why do some frames look blurry or misaligned?

Accuracy depends on the video's keyframe (I-frame) structure. Frames between keyframes must be reconstructed by the browser decoder, which can occasionally produce slightly off results at high seek speeds. Extracting fewer frames usually improves accuracy.

Get Started Free

Ready to Extract Frames?

Drop a video, set your frame count, and download the images in seconds.