Just one way to make an animated gif

We wanted to learn more about motion and how static images can be composited to perceive motion, part of the research for an upcoming music video for @Hyperubik. To this end, we selected a random series of images and set out to animate them. Our images were of a prize animal at the Walla Walla Fair, hopefully now grouchily relaxing in some quaint backyard, reminiscing about the glory days.

Vine is dead but it doesn't mean you can't make your own

A powerful, command-line tool for doing this type of work is FFmpeg. Download the correct version for your operating system and follow along. Grab a dozen images or so from your collection and give it a shot!

Create a folder for the images you are going to use and copy them there. This is the easiest way to go if you're starting out.

Extract the archive and copy the FFmpeg executable into the folder with your images.

Once we have the images all together, let's renumber them in the order that we want them to appear in the final animation. We decided to just suffix each file with a number from 1 to 20.

Let's see what the documentation has to say about creating a video.

ffmpeg -f image2 -framerate 12 -i foo-%03d.jpeg -s WxH foo.avi

The syntax foo-%03d.jpeg specifies to use a decimal number composed of three digits padded with zeroes to express the sequence number. It is the same syntax supported by the C printf function, but only formats accepting a normal integer are suitable.

When importing an image sequence, -i also supports expanding shell-like wildcard patterns (globbing) internally, by selecting the image2-specific -pattern_type glob option.

For example, for creating a video from filenames matching the glob pattern foo-*.jpeg:

ffmpeg -f image2 -pattern_type glob -framerate 12 -i 'foo-*.jpeg' -s WxH foo.avi

After reading the documentation, it seems that creating a video from our images is possible. Let's try to apply that to our situation.

We have filenames that look like this:

• image1.jpg
• image2.jpg
• image3.jpg

Since %d stands for decimal and the input accepts wildcards, we'll base our numbering scheme off of that fact.

Attempt 1: .\ffmpeg -f image2 -framerate 12 -i 'image%d.jpg' generatedVideo.avi

That's turned out pretty good for a first try but there are some problems with it that we need to attack.

1. Now that we can see the sequence of images, we want to manipulate elements of the animation such as time. We'll get to this one in a bit. It's important to tackle the high-impact tasks of a project early, which brings us to the second issue.

2. The video is turned on its side and needs to be rotated. Remember the neck-crick you always get at a library from the head lean needed to read the titles? There are variants of this, like the back-crick you get shuffling through crates of vinyl and the ankle-crick you get when you step off a curb wrong. Unpleasant, so let's get this one fixed.

• ?>https://www.google.com/search?q=ffmpeg+rotation
• SO>https://stackoverflow.com/a/9570992/12919

Attempt 2:.\ffmpeg -f image2 -framerate 12 -i 'image%d.jpg' -vf "transpose=1" generatedVideo.avi

Beautiful, we now have a correctly-orientated video.

3. We want to export the video in another format.

In this case, we want to make an animated gif. Sometimes things are a lot more difficult than they should be but this one turned out to be be pretty easy. We just replaced the file extension with .gif and it seemed to figure it out.

Attempt 3: .\ffmpeg -f image2 -framerate 12 -i 'image%d.jpg' -vf "transpose=1" generatedVideo.gif

[REDACTED For BANDWIDTH]

After running the command, it seems like it has just created an image but drag that gif into a browser and voila! You get video quality in the browser but at a cost. The animated gif was 79,493,300 bytes! That means we need to add an item #4 to our list.

4. We need to create a resized version of our animated gif so we can put it up on a website or share it via social networks.

• ?>https://www.google.com/search?q=ffmpeg+resize
• >http://www.renevolution.com/ffmpeg/2013/05/02/understanding-ffmpeg-part-ii-scaling-video.html
  • Thanks for letting us know about the ratio:-1 trick!
  • https://twitter.com/renecalles

Attempt 4:.\ffmpeg -f image2 -framerate 12 -i 'image%d.jpg' -vf "transpose=1, scale=640:-1" generatedVideo.gif

Our animated gif now weighs in at 3,817,994 bytes, much better but that's still pretty big.

[REDACTED For BANDWIDTH]

Attempt 5 .\ffmpeg -f image2 -framerate 12 -i 'image%d.jpg' -vf "transpose=1, scale=320:-1" generatedVideo.gif

Now we're at 1,080,975 bytes.

And here you go, the finished product. Ready for meme-appropriation. If you make a cool image using this guide, we'd love to see it. Tag @ACMEPrime on Twitter.