Photoshop splits an animated GIF into separate frames by importing the file as a layered document and exporting each frame layer as its own PNG through the File > Export > Layers to Files command, while browser-based tools like GIF Splitter produce the same numbered PNG output directly from the GIF without installing image-editing software or uploading the file to a server. The key detail in either path is that the PNG you download must show the full visible canvas at that moment in the animation, not the small rectangle the GIF actually stored on disk. GIF encoders frequently save only the pixels that changed since the previous frame and rely on disposal instructions to clear or restore earlier pixels before the next patch is drawn. A raw patch PNG would look like a clipped, mostly transparent image that confuses any editor expecting a full frame. Both Photoshop and a composited browser export solve this by reconstructing the entire logical canvas at each frame and saving that reconstruction, so what you see in the resulting PNG matches what you saw at that instant when the animation played.
What splitting a GIF into frames actually does
Splitting a GIF into frames means turning a single animated file into a sequence of still images that can be opened independently, edited one by one, or fed back into an animation tool. Each still should show exactly what the viewer would have seen on screen at a given moment during playback. A sticker blinking across a chat, a loading spinner, or a tutorial overlay that reveals a button after a few hundred milliseconds all share the same internal structure: a starting canvas, followed by a list of small updates that each say "change this rectangle, leave the rest alone, then either clear or restore before the next update." If you extract only those small rectangles, you get a folder full of broken-looking, partially transparent tiles.
The fix is to replay each step into a complete canvas at export time. That is what Photoshop does internally when it converts an opened animated GIF into a layered document, and that is also what a dedicated splitter does when it composites every block over a running canvas before writing out the PNG. Without this composition step, the resulting stills are misleading thumbnails rather than the frames your audience actually saw.
How to split a GIF into frames in Photoshop
The exact workflow in Photoshop uses the standard Open and Export commands rather than a hidden feature, so it works in any reasonably recent version.
- Choose File > Open and select the animated GIF. Photoshop reads the GIF, expands its animation into a timeline, and places one frame per layer in the Layers panel.
- Open Window > Timeline to confirm the frame count, the order, and the per-frame delay. Each layer in the panel corresponds to one timeline frame.
- Rename the layers to ordered labels such as frame-01 and frame-02 if you want the exported PNGs to sort in the same order as the original animation.
- Choose File > Export > Layers to Files. Pick PNG as the file type, select an output folder, and confirm.
- Photoshop writes one PNG per layer into the folder. The naming follows the layer names you set, and the canvas size matches the original GIF's logical canvas rather than the size of any individual update rectangle.
- Open three of the exported PNGs in any viewer and flip through them manually to confirm the animation looks correct when played back as stills.
Photoshop's strength here is that it preserves all of the layered artwork, so you can also retouch or rearrange individual frames before exporting. Its weakness for a one-off split is the install footprint and the license. When the goal is just numbered PNGs, a browser-based splitter produces the same set in less time.
How to split a GIF into frames in your browser with GIF Splitter
For readers who do not have Photoshop installed or do not want to load a full image editor for a single split, GIF Splitter performs the same composition in a regular browser tab. The whole pipeline runs locally on the page using the browser's GIF decoder and a canvas, so the source file never leaves the device.
- Open GIF Splitter and choose an animated GIF up to 20 MB from your local drive using the file picker.
- Select the Extract PNG frames action and wait for the local compositing pass to finish. The status indicates when the frame list is ready.
- Review the numbered previews, the frame number, the canvas size, and the decoded delay shown next to each entry on the page.
- Download the full PNG frames you need by clicking the individual download link beside each preview. Each file is named from the source filename plus a padded frame number, so a file manager sorts them in animation order.
There is no ZIP archive to wait for and no server upload to approve. Each displayed download link points to a real PNG Blob that the page built locally from canvas pixels using the browser's HTMLCanvasElement.toBlob method. The PNGs preserve the full logical canvas dimensions, keep transparency where the original frame had transparency, and remain available until you replace the input, navigate away, or close the tab.
What gets exported vs. what was stored inside the GIF
The distinction between an animation frame a viewer sees and an image block stored in the GIF is the most common source of confusion when splitting an animation. A GIF stores a starting canvas plus a list of updates. Each update covers a rectangle that changed since the previous frame, may include transparent pixels, and may carry a disposal instruction telling the decoder to clear that rectangle or restore the prior canvas after the frame is displayed. A naive export that copies those raw rectangles to disk produces a folder of mostly transparent tiles that line up only when stacked back in order with the same disposal rules applied.
GIF Splitter and Photoshop both handle this correctly by keeping a running logical canvas. Each update is drawn on top of the current canvas, the previous frame's disposal instruction is applied at the right moment, and the resulting full canvas is exported as the PNG. The frame number shown next to each preview follows the decoded GIF image order starting at one, and the listed delay is the decoded display delay in milliseconds for reference. It is contextual information, not a guarantee that every viewer will play back the original animation at the exact same speed.
Safety limits and why they exist
The tool applies deliberate input limits to prevent a small-looking upload from allocating an unreasonable amount of browser memory. A short GIF can decompress into far more canvas pixels than its byte size suggests, especially when every frame is the full canvas rather than a small update. The page checks the file size, the canvas dimensions, the per-frame pixel count, and the frame count before it begins to create PNGs. A rejected input shows a clear message and no partial frame list.
| Limit | Maximum value | Why it exists |
|---|---|---|
| Source file size | 20 MB | Keeps the initial decode bounded and prevents large files from overloading the browser tab |
| Canvas width or height | 4,096 pixels | Avoids canvases that exceed common browser limits for allocation |
| Pixels per frame | 3,000,000 | Prevents a single large frame from exhausting available memory |
| Frame count | 50 image frames | Bounds the aggregate patch work and combined output pixels |
If a GIF exceeds any of these thresholds, the page stops rather than producing broken or mislabeled output. For larger or longer animations, splitting in a desktop editor such as Photoshop or trimming the GIF first with a local tool is the safer path.
Common checks after extraction
After the PNGs are downloaded, a quick visual audit catches the rare cases where the decoder and the original GIF disagreed. Open the first exported PNG, a middle PNG, and the final PNG in any image viewer. Play them back in order at the original frame timing. Pay extra attention to transitions that only change part of the canvas, such as a moving cursor or a partial background update. If a region looks blank where it should show content, the GIF likely used very subtle transparency or non-standard extension data, and the source file should be inspected in its original player.
The PNGs preserve the full logical canvas dimensions and the original alpha, so they can be loaded straight into editors such as Photoshop, GIMP, Figma, or a browser-based composition tool. If you then need a smaller output image or a brand-new animation built from those stills, the Image Resizer and GIF Maker tools pick up where the split left off, all without uploading the working files.
When a browser tool beats Photoshop for this task
Photoshop is the right choice when the goal is to also edit, retouch, or rearrange the frames before exporting. A browser splitter is the right choice when the goal is numbered, full-canvas PNGs and nothing else. The table below summarizes the practical difference for this specific task.
| Aspect | Photoshop | GIF Splitter |
|---|---|---|
| Install required | Yes, full Creative Cloud or standalone app | No, runs in a browser tab |
| File upload to server | No, opens locally | No, decodes locally |
| Frame editing before export | Supported via the Layers panel | Not supported |
| Export format per frame | PNG, JPEG, PSD, or TIFF | PNG only |
| Output naming | Uses layer names you set | Source filename plus padded frame number |
| Speed for a one-off split | Slower, due to launch overhead | Faster, no app to open |
For the common case of grabbing a few stills from a sticker, a chat reaction, a UI animation, or a tutorial GIF, the browser path produces the same PNG set in less time and with no install. For anything that needs per-frame color correction, masking, or rearrangement before export, Photoshop remains the more capable tool.