How to Convert Image Sequences into Video

Turning a folder of images into a video file is something animators, 3D artists, stop-motion creators, and time-lapse photographers do constantly. Most tutorials point you toward FFmpeg or Premiere Pro, but both require either command-line knowledge or a paid subscription. This guide covers the complete workflow — including the technical details of how browser-based encoding works and what to expect at different FPS settings — using our free Images to Video tool.

Why Convert an Image Sequence to Video?

The need to go from images to video comes up in several distinct creative and technical workflows:

• 3D animation rendering: Software like Blender, Cinema 4D, and Unreal Engine render animation as individual image files by default — one PNG per frame. If a render crashes mid-sequence, only the current frame is lost. Once rendering is complete, these frames need to be stitched back into a video for playback and delivery.
• Stop-motion animation: Physically animating objects one frame at a time and photographing each position produces a folder of images in sequence. Converting that to video brings the animation to life.
• Time-lapse photography: Cameras capturing one shot per second, minute, or hour over an extended period produce hundreds or thousands of images. Converting them to video at a higher FPS creates the accelerated time-lapse effect.
• Presentation and motion graphics: Designers sometimes export individual frames from motion graphics software as images, then reassemble them into video for final delivery.
• Social media slideshows: Converting a series of photos into a video at 1–2 seconds per frame creates a simple slideshow format that performs well on Instagram and TikTok.

Understanding Frame Rate: The Core Setting

FPS (frames per second) is the single most important setting when converting images to video. It controls how long each image appears on screen and therefore the duration and pacing of the final video.

Here's how common FPS settings play out in practice:

• 1–2 FPS: Each image holds for half a second to a full second. Good for photo slideshows where you want viewers to see each image clearly.
• 8–12 FPS: The traditional range for hand-drawn animation. Gives a stylized, slightly choppy motion that feels intentionally animated. This is the framerate used in classic cartoons and many indie animations.
• 24 FPS: Cinema standard. Creates smooth, film-like motion. Required for professional 3D animation delivery.
• 30 FPS: Standard for web video, broadcast TV, and social media. Smooth motion with a slightly different feel from cinema.
• 60 FPS: Used for gaming captures, sports replays, and high-speed content. Makes motion look very fluid and "hyper-real."

For time-lapse, the FPS choice is what creates the acceleration effect. If you photographed one image every minute for 2 hours (120 images total), playing them back at 24 FPS produces a 5-second video that makes 2 hours of real time pass in moments.

Step-by-Step: Converting Images to Video in Your Browser

1. Open the Images to Video tool at videotoimagesequence.online/images-to-video. No account, no installation required.
2. Drop your image files into the drop zone. You can select multiple files at once. JPG and PNG are both supported. The tool accepts files out of order — it will display them in a numbered grid.
3. Check and reorder the sequence. If your files were named sequentially (frame_001.jpg, frame_002.jpg...) they'll load in the right order automatically. If not, drag and drop the tiles to arrange them correctly. The order in the grid is the order in the final video.
4. Set your FPS. Use the FPS selector to choose how fast the images play back. Use 24 FPS for animation, 12 FPS for a stylized animated feel, or 1–2 FPS for a photo slideshow.
5. Click "Create Video." The encoder draws each image onto an off-screen HTML5 Canvas element at the specified rate and records the output using the browser's MediaRecorder API. This all happens locally — nothing is sent to any server.
6. Download the WebM file. Once encoding is complete, a download button appears. The output is a WebM video file, playable in any modern browser and easily convertible to MP4 with a tool like HandBrake if needed.

How Browser-Based Video Encoding Works

For anyone curious about the technical side: the conversion happens through a combination of two browser APIs — HTML5 Canvas and MediaRecorder.

The Canvas API provides an off-screen rendering surface. For each image in your sequence, the tool draws that image onto a canvas at the specified dimensions, then captures a frame from that canvas into a video stream. The MediaRecorder API records that stream into a WebM video container, applying VP8 or VP9 video compression depending on browser support.

Because everything runs in the browser's JavaScript engine, performance depends on your device's hardware. On modern laptops and desktops, encoding 300 frames at 24 FPS typically takes 5–15 seconds. Older devices or large 4K image sequences may take longer.

The main limitation compared to desktop tools like FFmpeg is output format — browsers can natively produce WebM but not MP4 directly. If you need MP4, the WebM file can be converted with a free tool like HandBrake in under a minute.

Image Format Tips: PNG vs JPG

Both PNG and JPG work as input formats, but they behave differently and affect the visual quality of the output video:

• PNG input gives you lossless source frames. Since no image quality has been lost in the source files, the video encoder has the cleanest possible data to work with. For 3D animation renders, VFX, and motion graphics where color accuracy is critical, always use PNG source frames.
• JPG input introduces mild compression artifacts from the source files before the video encoder even touches them. For photo slideshows and casual content where file size matters more than pixel-perfect quality, JPG is fine and much more storage-efficient.

Note that both inputs produce a WebM video — the output container is the same. The quality difference comes from what's in the source frames.

Common Issues and How to Fix Them

• Images are in the wrong order: Drag and drop the thumbnail tiles in the grid to rearrange them. The tool does not auto-sort alphabetically, so manually reordering ensures the sequence is correct.
• Browser tab crashes during encoding: This is a memory issue. Reduce the number of images per batch (split into multiple renders of 100–200 frames each), or switch from PNG to JPG source files which use significantly less RAM.
• Video plays too fast or too slow: Adjust the FPS setting. If your 30-image stop-motion animation plays in 1 second at 30 FPS, try 8 or 12 FPS for a more natural speed.
• Output video is blurry: This is usually caused by the video encoder's compression, not the source images. Try using higher-resolution PNG source images if quality is critical, or accept that WebM compression will reduce quality slightly compared to lossless source frames.

Frequently Asked Questions