Close

How to Edit a GIF

example gif
(J/K I'm just illustrating a gif, not generating one)

Gifs are not specifically made to be edited so it's useful to consider why you want to edit a gif. What changes do you actually want to make? Are those kinds of changes easy or hard? In this article I'm going to discuss those considerations but first we need a quick overview of what a gif is.

Gif Basics

First off, you already know a gif is a file. It's a single image or it's a bunch of images displayed as a slideshow. Showing the images sequentially creates the animation. So you can think of gifs as being a slideshow of images. From here on, I'll try to refer to the individual images in a gif as a frames.

4 gif frames illustrated
Each frame draw ball in next location

Frames in a gif have more freedom than you might expect. For example, they don't need to be the same size and width as the entire image. Frames can be arbitrarily positioned over the other frames given an x/y coordinate.

Frames can have an associated duration that indicates how long to display before the next frame is painted.

Frames can also be assigned a disposal method. The disposal method indicates how to handle the frame when its duration has passed and it is time to show the next frame. The three choices are 1) don't dispose, 2) restore the background color, or 3) restore the previous frame.

Since gifs support transparency, each frame can specify a particular color to not paint at all. This means you'll have transparency causing the previous frame to shine through. In other words, it does exactly what you expect a gif to do.

That was a short list of some of the options the gif format gives you so the question is: can altering any of those change the gif in the way you want to edit it? Here are some easy edits they provide:

  • Change the timing between frames
  • Reposition a frame on the gif surface
  • Changing disposal method of frames (probably not too useful)
  • Draw onto existing frames
  • Insert your own frames

Unfortunately these are not the kinds of changes people have in mind when thinking of editing a gif. What they usually want to do is change some visual aspect of a gif, like one of the images in it, the text, or maybe colors. This can make things get complicated but not impossible. Eventually you'll be wondering if it's worth editing a gif rather than just making a new one from scratch.

Having said all that, I'm going to discuss the two ways I edit gifs. One is an open source solution, and the other is my own.

Example GIF Frames of a GIF in GIMP
A gif and some frames

Editing Gif Files

Most websites and applications for creating gifs have their own way of doing it. These methods are generally not interchangable. You cannot take a gif created on one website and edit it on a competing website. Except when you can...

Frames of a GIF in GIMP
Gif frames in GIMP

Because all gifs must meet the gif specification in order to be gifs, generalized tools exist to let you open gifs at a low level.

How to Edit a GIF in GIMP

The image above shows a gif that has been opened in a tool called GIMP. GIMP is a powerful image editor. Dragging a gif into GIMP will show you each individual frame making up the gif. You can change these individual frames in the gif and re-save it. Like so:

Gif altered with GIMP
A GIMP edited Gif

I quickly slopped in some over-sized text and that wasn't difficult at all. I just created a standard text layer and it becomes a frame in the gif. It's placement in the animation is dependent on where the layer appears in the list of image layers. This is also how I can add my own frames with original images. For each frame, using the frame labels, I can specify features of the frame. For example "Frame 32 (50ms) (combine)". See GIMP documentation for details on this.

GIMP is great because, as a full image editor, you have incredible power. But there is only so much it can do without the original images used to make the frames. Consider a background like below:

background image of cricket stadium
A sample background

You can add your own layers on this background to alter the original gif. However, if you want don't want the stadium lights on the background, there is nothing you can do but painstakingly paint out the lights. It might be easier to just draw your own stadium depending on your art skills.

The can of worms this is opening is quickly becoming quite icky. It is probably easiest just to find the best gif maker that meets your needs.

Editable GIFs

This website you're on right now is called "Editable GIFs".
So what's going on?

Here are a few secrets-not-really-secrets about gifs:

  • They only support up to 255 colors per frame.
  • They are create huge file sizes (disk size, often in Megabytes).
  • They are slow to create from your CPU's perspective.
  • There are far better options for small animations than the gif format.

In consideration of that list, many so-called gifs are not gifs at all; instead they might be videos or a different image format called webp. The word "gif" sticks around for historical reasons - it's the word we all know. Unfortunately because of this, we are still stuck using actual gif files. The good news is that programs/websites that create gifs can often create those other file formats as well.

This is where Editable GIFs comes in. At the core of any gif creation website or application is an animation engine of some type. The Editable GIFs animation engine is a scripting language called SCL (or just Canvas Language). Instead of using a bunch of timelines, checkboxes, dials, and drag and drops, SCL is just typed onto a web page.

The advantage to animations describe this way are three-fold.

  1. Learning and sharing. These go hand-in-hand actually. If you want to change some aspect of the gif, you can just change the code. You can try yourself. If you want to share the code, just copy and paste it.
  2. Customization. The vast majority of the animations make it easy to personalize by using simple entry fields. If you want to put your friend's name in a gif, just type it in and re-run the animation. If the gif doesn't have enough fireworks, just go into the SCL and code some more. Font too small? Just go into the SCL and set a larger size. editable gif entry fields
  3. Image Independence. Editable GIFs animations are sprite based. You don't need to worry about text being burnt into a frame image, or a smaller image burnt into the each frame. All images are independent and can be independently switched out using the image icon that accompanies each Editable GIF.
    Image upload screen capture showing how to replace gif image sprites
    Replace images used in sprites

If you find a gif from editablegifs.com, you can easily edit its base animation on the site. Find the gif template in our library, then edit the SCL code, upload replacement images, or just use the form entry fields.

More websites that use SCL for animations and game development: