OneTaskBy Tim King · Updated
Video to Sprite Sheet
Sprite Sheet and WebVTT Thumbnails for Scrub Previews in Video.js and Plyr
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Video to Sprite Sheet works
This video to sprite sheet tool grabs a frame at a fixed interval, packs them edge to edge into one image, and writes the matching WebVTT thumbnails file, so a web video player can show a small preview picture when someone hovers over or drags the seek bar.
What a video to sprite sheet is for
Players such as Video.js (with a thumbnails plugin), Plyr, JW Player and Vidstack load one sprite image instead of hundreds of separate thumbnails. A WebVTT file maps each time range to a rectangle in that image using the #xywh= fragment, and the player crops the right tile as the viewer scrubs.
Making the pair
Run the tool once with Download set to Sprite image, then again with WebVTT thumbnails file and the same settings. The VTT refers to the sprite by its file name, so upload both to the same folder, or edit the name in the VTT if your files live on a different path.
Choosing the interval and size
One frame every 5 to 10 seconds suits most videos; shorter clips can use 1 or 2 seconds. A 160 pixel wide frame is the common choice for seek bar previews. The tool stops at 1000 frames, so for very long videos use a longer interval or split the sprite.
Formats
JPG keeps the file smallest for real footage. WebP is smaller again in modern browsers. PNG is lossless but much larger, and is best kept for screen recordings with sharp text.
FAQ
How is this different from a contact sheet?
A contact sheet is a labelled overview for people to look at, with gaps, a header and timestamps. A sprite sheet has no gaps or labels and uses an exact, regular interval, because a video player needs to calculate where each tile sits.
Can I use the sprite sheet in a game or animation?
Yes. Set a short interval such as 0.1 seconds over a short clip and choose PNG. Each tile is the same size and laid out left to right, top to bottom, which most game engines can slice directly.
Is my video uploaded?
No. The frames are captured and packed by your browser on your own device and both files are created there too. Nothing is sent to a server.
See also: all Video & Screen tools, Images, Audio, PDF, SVG, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Contact Sheet Generator
Turn a video into one image of evenly spaced thumbnails.
Video Scene Detector
Find every cut in a video and list each scene.
Video To WebP
Turn a video clip into a small, looping animated WebP.
Frame By Frame Viewer
Step through a video frame by frame and save any frame.
Subtitle Burner
Hard-code subtitles from an SRT or VTT file into the picture.