Skip to main content
Develop Tools
← Return to usage guide

How to Extract Frames from GIFs and Videos

When using a scene from a video in documentation or as a thumbnail, check the timestamp in the preview and extract only a short range around it to make the desired frame easier to find. This explains how to narrow down the required frame even without a dedicated current-position save button, based on the DevelopTools implementation.

Flow for selecting target Frame 3 from consecutive video frames and saving it as a single still image
Flow for selecting target Frame 3 from consecutive video frames and saving it as a single still image

Save a favorite scene as a still image

Load a video or GIF in the browser and extract every frame, at second intervals, every N frames, or by FPS setting to PNG, JPEG, or WebP.

Open the Video/GIF Frame Extraction Tool

Conclusion: Extract a short range around the time and select one image

The current tool does not provide a UI to save one image directly from the preview stop position. First play the video to identify the target time, then set start and end positions around it. Generate candidates every N seconds or N images per second, then save the desired image individually from the results list.

For example, if you need around 12.4 seconds, target the range from 12 to 13 seconds and try several frames per second. Increase the number of frames when motion is fast, and narrow the range for quiet scenes to reduce unnecessary output.

Verification order when choosing a scenario

confirmationWhat to check
PreviewThe time when the intended action starts and ends
TimestampWhether the time attached to the extraction result is within the target interval
FrameCheck whether it is during blur, closed eyes, a fade to black, or a subtitle transition
ResolutionWhether required dimensions exist for documents or Thumbnails

Practical steps to narrow it down to one image

  1. Load the video, play the Preview, and note the target time.
  2. Set the start and end positions around the target scene.
  3. Select N images per second and generate candidate images starting with a short range.
  4. Compare Thumbnails and save only the individual page you need.
  5. If the time appears offset, move the range slightly earlier or later and extract it again.

DevelopTools frame extraction features and supported scope

The current tool loads one MP4, MOV, WebM, or animated GIF, decodes it with FFmpeg.wasm, and converts it into still images. You can choose every frame, every N frames, every N seconds, or N images per second. Start and end positions can be entered in 0.001-second increments, but there is no dedicated button to save one image at the preview's current position. Set the target range and extraction interval, then save required images individually from the results list.

ItemSupport in the current Tool
InputOne GIF, MP4, WebM, or MOV file. AVI, MKV, and animated WebP are not selectable
extractionAll frames, every N frames, every N seconds, N images per second, start and end seconds
outputPNG, JPEG, and WebP. Original resolution, aspect-ratio changes, and Resize to fit maximum width and height.
confirmationVideo/GIF preview, duration, resolution, FPS, estimated source frame count, and estimated output frame count
SaveResult thumbnail grid, individual saves, deletion of unneeded images, and bulk ZIP saving
executionProgress display and cancellation. Confirm at 500 images or more; show a strong warning at 2,000 or more

The following are not implemented: automatically obtaining the current position on the Timeline; a list for directly clicking Frame numbers or Timestamps; displaying raw GIF Frame Delay and Disposal; extraction using Canvas or WebCodecs; and batch processing of multiple videos. The article presents only implemented features as operating instructions.

Estimate the frame count and duration before execution.

Extracting every frame from one minute of fixed 30 fps video yields about 1,800 images by simple calculation; at 60 fps, about 3,600. However, variable frame rate, missing frames, timestamps, and decoder behavior can cause actual output count to differ from the estimate obtained by multiplying displayed FPS. Use DevelopTools "Expected output" as a guide to assess work scale, and confirm the final count from the extraction results.

Even when a time is specified, the video may not contain a frame exactly at 10.000 seconds. After narrowing the start position, extract again over a short interval if necessary, and visually check the thumbnail and saved image. For validation where reproducibility matters, record the original video, settings, and extraction result together.

Do not immediately extract all frames from a long video. First check the format, quality, and count in a few-second segment, then expand the target range.

Choose PNG, JPEG, WebP, and image size.

When you select the original resolution, frames can be output without unnecessary scaling. However, this does not improve compression noise or motion blur already present in the original video. If the aspect ratio changes or content must fit within a specified range, it is reduced while preserving the aspect ratio. If another format is needed after extraction, use the image file conversion tool instead of extracting the video again.

FormatBest ForCheck points
PNGUI, text, lines, source material for later editing, transparent areasLossless compression can easily increase storage use for large-scale retention
JPEGPhoto-like video, document Thumbnails, and many verification imagesLossy compression. Check quality and the background color of transparent areas
WebPImages whose file size and quality you want to adjust for Web publishingCheck destination support and quality settings

How to extract frames in the browser

  1. Select one video or GIF, then check the preview, duration, resolution, FPS, and estimated frame count.
  2. Choose all frames, every N frames, every N seconds, or N images per second according to your purpose.
  3. To target only the needed scene, enter the start and end positions in seconds.
  4. Choose PNG, JPEG, or WebP, quality, and image size, then confirm the expected output count.
  5. After extraction, check thumbnails, then save needed images individually or save all results as a ZIP.

Input files, extracted images, and file names are not sent to DevelopTools servers or external APIs. The FFmpeg.wasm core loaded initially is also hosted on this site.

Items to check after saving

Result names are based on the original file name with a frame number and timestamp added. For many images, move through result pages to review them. Reloading the browser does not preserve work results, so save needed images before closing the page.

  • Whether the desired scene, time, and motion state are captured
  • Whether orientation, resolution, aspect ratio, and transparent areas are as expected
  • Whether the extracted image count, six-digit sequential filenames, and time notation suit the work purpose
  • Whether JPEG / WebP quality and size are appropriate, and whether PNG text and thin lines are sufficient
  • If ZIP is used, check that it can be extracted and that all required images are present

Notes on large videos, privacy, and usage permissions

Because FFmpeg.wasm runs in the browser, meeting recordings and unreleased video can be processed without uploading them. However, it handles the full video and extracted images in device memory, so long, high-resolution, high-fps materials or thousands of outputs consume significant CPU, memory, and storage. It cannot necessarily process any number of GB. If a warning appears, shorten the target section or increase the extraction interval.

Use videos you recorded yourself, GIFs you created, or materials you have permission to save and process. This does not cover methods for obtaining streaming video or third-party copyrighted works without permission.

Primary sources for FFmpeg and FFmpeg.wasm

Command examples and option meanings are based on the official FFmpeg documentation. -ss is the seek position, -frames:v is the number of output frames, fps and select are filters, and image2 is related to sequential image output. Behavior varies by version and option placement, so when incorporating these into a production script, verify them against the documentation for your version and actual data.

Example: save the operation-complete screen around 12 seconds

Load a 30 fps MP4 and confirm in the preview that the operation completes around 12.4 seconds. Do not process the entire file immediately; first determine the target interval and required density.

Extract candidates using a start of 12 seconds, end of 13 seconds, five images per second, PNG, and original resolution. After extraction, check the timestamp, cursor position, text readability, and resolution; if needed, adjust one parameter at a time, either the range or interval.

  1. Keep the original video and load one item into the frame extraction tool.
  2. Use the preview and media information to determine the target range.
  3. Set the extraction method, output format, and image size, then check the expected number of images.
  4. Try a short range and check the result before extracting the production range.

Extraction results are not archives that replace the original video. Store the original video and settings, and select only the frames needed for the intended purpose.

Frequently asked questions

Can the current playback position be saved with one button click?
The current Tool has no button dedicated to the current position. Set start and end positions and extraction density, then choose one image from the candidates.
Will it be exactly the same Frame as the specified second?
Exact matches may not be possible due to Timestamps or variable frame rates. Extract a short range before and after and verify visually.
Can it be saved at the original resolution?
You can select "original resolution" for image size. However, it will not improve quality beyond the information in the compressed original video.