How to Edit an Animated GIF: Text, Speed, Reverse and Frames
Most GIF edits are one of four jobs: add a caption, change the speed, play it backward, or fix and remove a few frames. Some take one click, others need a frame editor. This guide explains how a GIF is put together, which quick tool fits which job, and how to do the rest frame by frame without the usual surprises.
How an animated GIF is built
An animated GIF is a stack of still pictures, or frames, each with its own delay: how long it stays on screen. There is no frame-rate setting; a GIF that “plays at 10 fps” simply has a 0.1-second delay on every frame. Four properties of the format explain most problems:
- Delays are stored in hundredths of a second. 0.125 s cannot be written; Photoyam rounds every delay to the nearest 10 ms.
- Very short delays get slowed down. Browsers play frames marked 0 or 0.01 s at roughly 0.1 s, so a GIF “sped up” past 0.02 s per frame suddenly plays slower. Photoyam’s speed tools never write a delay below 0.02 s.
- Each frame has at most 256 colors. Gradients and photos are reduced to a palette, which is where banding and grain come from.
- Transparency is on or off. A GIF pixel is either fully transparent or fully opaque, so soft edges such as a drop shadow over nothing have to be flattened against a color on export.
Quick tools for one-step edits
For a single change to the whole GIF, a dedicated page is faster than the editor. Each runs in the browser tab and shows the original next to the result before you download:
| Job | Tool | What you choose |
|---|---|---|
| Faster or slower | GIF speed | A multiplier from 0.25× to 4×, or one fixed delay (in seconds) for every frame. |
| Play backward | Reverse GIF | Backward (last frame first) or Forward, then backward (boomerang). |
| Pull out stills | GIF frame extractor | Which frames, PNG, JPEG or WebP, and whether to skip frames identical to the one before. |
| Build from images | GIF maker | Frame order, one delay for all frames, output size, background and loop. |
| Add a caption | Add text to GIF | Captions drawn over every frame or only some of them, with font, size, color, outline and shadow; the steps are below. |
A speed multiplier keeps the relative timing: a deliberate two-second pause on the last frame becomes a one-second pause at 2×.
A boomerang does not repeat the first and last frames at the turning points, so a GIF of n frames becomes 2n − 2 frames. Our 10-frame test GIF became 18 frames and 1.8 seconds per loop, and the file grows to match. Every quick tool also has an Open in the editor button for when one step turns out not to be enough.
Hands-on: caption every frame
The Add Text to GIF page captions a GIF without leaving the page. You type a caption once and it is drawn onto every frame in the same place, so the words stay still while the picture moves underneath.
- Open the GIF. On the Add Text to GIF page, choose an animated GIF (animated PNG and WebP work too). It opens right on the page, playing, with a caption ready near the bottom edge. The line above the preview shows the size, the number of frames and the loop length.
- Type and style. Type your words, or start from the Caption, Meme or Watermark preset under Quick start. Pick the font, size, color and bold, and keep an outline or shadow on so the text stays legible over light and dark frames. Drag the text to move it and its corner handle to resize it; Add text adds a second caption, Delete removes the selected one.
- Choose when it shows. Each caption shows on every frame by default. To make a punchline appear after a beat, select it, tick Only on some frames under When it shows and enter the first and last frame; the preview pauses on the frame you type.
- Make the GIF. Press Play to watch a few loops, then press Add text to GIF. The frames are encoded into a new GIF with each frame’s original delay and the original loop setting, and the result plays under the preview with its file size next to the original’s.
- Download. Press Download GIF. If you want to keep working on the frames, Edit further in the editor opens the captioned GIF in the full editor instead.
Because the captions are drawn into the frames, the downloaded GIF looks the same for everyone, whether or not they have the font installed. The text is no longer editable in that file, so keep the original GIF if you may want to change the words later.
Advanced: captions in the editor
The editor keeps the caption as a live text layer, which is worth it when you also want to fix frames, retime them or tween a caption in. You type a caption once, on its own layer, and it appears on every frame. The steps below use a 10-frame, 480×320 test GIF of a bouncing ball.
- Open the GIF. In the editor, choose File › Open… (Ctrl+O, or Cmd+O on a Mac) or drop the file onto the window. Every frame becomes its own layer, named Frame 1, Frame 2 and so on, and the Frames panel shows the timeline with each frame’s delay underneath. If the panel is hidden, turn it on with Window › Frames.
- Type the caption. Press T for the Type tool, click where the text should start and type. The new text layer is added at the top of the Layers panel, above every frame layer, so it shows on all frames.
- Make it readable. In the Character panel, set the size and turn on bold. For a 320 px-tall GIF, about 40–46 px reads well on a phone. Then add an outline with Layer › Layer Style › Stroke…; a dark stroke of 3–4 px keeps white text legible over both light and dark frames.
- Copy the style to every frame. Open the Frames panel menu (the ☰ button at the bottom right of the panel) and choose Unify Layer Style. If you moved the caption after creating it, also choose Unify Layer Position. The next section explains why.
- Check it in motion. Press Play in the Frames panel and watch a few loops.
- Export a new GIF. Choose File › Export As › GIF (or the panel’s Export GIF button). Both open the Save for Web dialog with GIF selected, where you can step through the frames in the preview and see the estimated size before you press Export.
Why “Unify” is needed
In a frame animation, four layer properties belong to each frame: visibility, position, opacity and layer styles. That is what lets a layer show on one frame and hide on the next. The catch: when you change one of them, only the selected frame gets the new value.
We hit this while writing the guide. With frame 1 selected we added the stroke, and frame 4 still showed the caption without an outline. Unify Layer Style copies the selected layer’s current style (and opacity) to every frame; Unify Layer Position does the same for position. The words, font and size are shared by all frames.
Change timing, order and loops
The Frames panel changes timing at three levels:
- One frame: click the delay under a thumbnail (for example “0.1 sec”) and pick a preset, from No delay through 0.1, 0.2, 0.5, 1, 2, 5 and 10 seconds, or Other… for an exact value. The Delay field in the panel takes milliseconds, in steps of 10.
- Several frames: Ctrl+click (Cmd+click) thumbnails to add them to the selection, or Shift+click to select a run. Set Frame Delay… in the panel menu gives all of them the same delay; enter less than 0.02 s and the dialog warns that browsers will play it at about 0.1 s.
- Everything at once: Set Speed… multiplies the playback speed of all or the selected frames, from 0.25× to 4×, and shows the loop length before and after.
To reorder, drag a thumbnail to a new position, or select frames and press Alt+← or Alt+→ (Option on a Mac) to move them one step. Reverse Frames in the panel menu flips the whole animation, or only the selected frames when two or more are selected.
The Loops field sets how many times the GIF plays; 0 means forever. It carries over to the export dialog’s Looping options (Forever, Once or Other).
Fix, add and remove frames
Each frame is a normal layer, so you can repair one with any tool: select the frame thumbnail, click its layer (Frame 7, say) in the Layers panel, and paint, clone or heal. Only that frame changes, which is how you remove a one-frame glitch or a stray cursor in a screen recording. The buttons under the timeline cover the rest:
- Delete removes the selected frames from the timeline. Their layers stay in the Layers panel, hidden.
- Duplicate copies a frame. To hold a moment, raising that frame’s delay does the same job with fewer frames.
- + Frame adds a frame that shows the layers visible right now.
- Tween generates in-between frames that blend position, opacity and effects from one frame to another. Choose what to tween with (the selection, the next, previous, first or last frame), how many frames to add (5 by default), and which layers and parameters to include, for example to fade a caption in.
Onion skins show neighboring frames as ghosts while you position something. Onion Skin Settings… sets 1 to 8 frames before and after, their spacing, opacity, blend mode and tint. They only affect the view and are never exported. File › Frames to Files… exports all, selected, a range or every Nth frame as PNG, JPEG or WebP, as separate files or as a Sprite Sheet + JSON.
Export settings that matter
Save for Web shows the GIF options next to a playable preview and an estimated size. A few settings matter most:
- Colors: 256 is the maximum and the default. Fewer colors mean smaller files and more banding; simple graphics often look the same at 64.
- Palette: Auto (lossless when possible) is the safe choice; Per frame helps when the colors change a lot over the clip.
- Dither: Diffusion smooths gradients by scattering pixels; No Dither keeps flat graphics and text crisp and usually compresses better.
- Matte: with transparency on, soft edges are blended against this color. Pick the background the GIF will sit on.
- Optimize frames (store only changes): leave it on.
The Sticker preset menu sizes the output for a Discord emoji (128×128) or a Slack emoji (square). Switching Format to PNG or WebP offers an animated PNG (APNG) or animated WebP with full color and smooth transparency, if the place you post to accepts them. For strict size limits, see the GIF file size guide.
Troubleshooting
The caption’s outline or position is only right on one frame
Styles and positions are stored per frame. Select the text layer and use Unify Layer Style and Unify Layer Position from the Frames panel menu.
The caption disappears on some frames
The text layer was probably dragged below some of the frame layers, which cover the whole canvas. Drag it back to the top of the Layers panel.
I sped the GIF up and it got slower
The delays went below 0.02 s, which browsers play at about 0.1 s. Keep 0.02 s or more, and delete every other frame if the motion must be faster still.
Edges look jagged or have a colored fringe
That is the on-or-off transparency of GIF. Set the Matte to the background color the GIF will be shown on, or export an animated PNG or WebP instead.
Edit a GIF in Photoyam
Captions on every frame, timing, reordering and frame fixes in a free editor that runs in your browser. No sign-up, and your GIFs are never uploaded.
FAQ
Does editing a GIF lower its quality?
Changing only the speed, order or loop leaves the pictures alone. Adding text or painting means the frames are encoded again into at most 256 colors; with the default Auto palette and 256 colors the difference is usually hard to see.
Will the text appear on every frame?
Yes. On the Add Text to GIF page every caption is drawn on all frames unless you tick Only on some frames and choose a range. In the editor, a new text layer is added above the frame layers and shows on all frames; if you later change its style or position while one frame is selected, use Unify Layer Style or Unify Layer Position in the Frames panel menu to copy the change to every frame.
What is the fastest speed a GIF can play at?
A delay of 0.02 s per frame, which is 50 frames per second. Browsers play delays of 0 or 0.01 s at about 0.1 s, so going below 0.02 s makes the GIF slower, not faster.
How do I remove some frames from a GIF?
Open the GIF in the editor, select the frames in the Frames panel (Ctrl+click or Shift+click for several) and click the panel’s Delete button, then export again with File, Export As, GIF.