‘How did you do that’ no.1: The flaming Kelly Kettle animated GIF

I get to answer my first query with the new blog: Posted on one of my other blogs, the flaming Kelly Kettle was made in a few minutes from a small piece of video using ffmpeg – but with GIMP and pitivi you could do far more.

Page bookmarks:
Selecting the video
Preprocessing with pitivi
Crop, scale, and convert with ffmpeg
Post processing with GIMP
Publishing

No matter how classy the visual design of your web page, what really adds ‘life’ to page is a good animation to capture the eye – helping to render an otherwise flat display into something more 3D. That used to be the province of flash; now defunct. Animations under HTML5/CSS3 have possibility, or simply embedding a video, but then you hit issues of browser compatibility and the need to design an animation sometimes frame-by-frame.

For a really lightweight design, and a little practice, the good old fashioned animated GIF is still the simplest and most efficient way of adding eye candy to a page layout – and one that reliably works across all browsers on whatever platform.

The animated GIF of the Kelly Kettle I added to the ‘Long Walks & Anarcho-Primitivism’ index literally took just a few minutes. The problem is not so much the creation of the GIF file. The important part is finding the right piece of video to process into a GIF.

In this post I’ll do a brief walk through of how you go from video to GIF, and what you need to think about along the way.

Selecting the video

The point at which this process will either be incredibly successful, or a complete waste of time, is the very first moment when you select a piece of video to convert into a GIF. Get that right, and literally this whole process can be just a matter of minutes.

I’m currently making some videos for my new work around ‘Long Walks & Anarcho-Primitivism’, and had videoed a walk a having a brew out in some foul weather. As I watched the raw video back for the first time I suddenly spotted a beautiful opportunity – the perfect snippet of footage to create an animated GIF.

What kind of video should you look for to convert to an animated GIF?:

I was really lucky with the Kelly Kettle; quite literally the opportunity jumped out at me without prompting. Sometimes that’s the best source of animated GIFs rather than doggedly trying to find something that conforms to your preconceptions.

What you should have at the end of this stage, then, is one or two video time indexes scribbled down, giving the precise start and end point of the clips in hours:minutes:seconds; there’s no point worrying about an accuracy of less than a second in terms of what follows, and I recommend adding an extra second before or after the clip allows flexibility for editing later.

Preprocessing with pitivi

I didn’t need to do this with the Kelly Kettle, but I've often used it elsewhere. The point about preprocessing the video before conversion is that it is better to apply filters to the video before rather than after. It creates a better finished result as the filter has more picture information to work on with a larger frame, and higher frame rate, than the small GIF produced after scaling and conversion.

My video editor of choice is pitivi – an open source editor that has been the workhorse behind my YouTube channel for the last four years. As with Linux though, many others are available.

There are two reasons to pre-process the video:

Firstly, it gives the opportunity to precisely crop the piece of video you want to convert to a GIF – although as you will see in the next section that's not necessary.

Most importantly a video editing suite gives the opportunity to apply colour correction, captions and video filters to the clip to give the effect you want to create – which can only happen at this stage as the sections following can’t do that. If you really want to invest the time, you could specifically tailor a small section of video, using transparent layered videos and effects, and then turn it into a GIF for more efficient playing on-line than an embedded video (but that's a separate post in itself!).

Apart from applying filters etc., the most important thing to do is crop down the source video to just the clip(s) that you want to convert, and then export them as new video files that can be processed in the next section (though not essential if the video does not need advanced editing work).

Crop, scale, and convert with ffmpeg

This is the simplest, but most important part of the whole process. Using ffmpeg the precise video clip is located, cropped and scaled, then converted to the animated GIF format.

ffmpeg is a truly massive program. I’ve been playing with it for years and still haven’t begun to plum the depths of the incredibly detailed level of processing, of both audio and video, that the program is capable of applying.

In this section we’ll focus just on what you need to know for this operation, and nothing more. If you really want to find out what ffmpeg is capable of, though, a good place to start is the documentation pages of the FFmpeg website.

Firstly, if you did’t pre-process the video

If there's one flaw to ffmpeg then it's the initial ‘seek’ process. It reads through the entire video, which might be tens of minutes long, until it finds just the second or two you want to crop out. That is why it’s a good idea to crop the clips in preprocessing.

If you didn’t pre-process, then the first thing to do is crop the clip you want to work on; to avoid that tedious ‘seek’ process if you need to crop and scale more than once to get the result just right. This is the command used:

$ ffmpeg -ss {index} -t {length} -i {file} -an -c:v copy {clip}

Let’s go through that piece-by-piece:

  • -ss {index} – This tells the program to seek to a point in the video at hours:minutes:seconds.tenths. Rather than worrying about precise frames, tenths of seconds is accurate enough to make a GIF.
  • -t {length} – This is the length of the clip you want to extract in seconds.tenths.
  • -i {file} – This is the name of the file to read from; it’s important that the seek instruction comes before the file name. ffmpeg can read pretty much anything except closed proprietary formats; the exact suite of codecs for your version is set when it is installed.
  • -an – This tells the program to dump the audio stream, leaving just the video stream.
  • -c:v copy – This tells the program to copy the clip you are extracting without any alterations to its size or encoding (that comes next).
  • {clip} – This is the file name of the clip you are going to make. It should have the same file extension as the file you read from; .mp4, .mov, .mkv, etc..

Of course, to get the -t above you need substract the start time index from the end time index, or set an arbitrary length for the clip. If you don’t want the hassle of subtracting one time index from another, just replace this with, -to {index}, and then enter your end time index in hours:minutes:seconds.tenths.

Cropping the frame

You could combine all the operations in this section into one single command, but it creates a really complicated command line. If you get anything wrong, it’ll also waste time compared to steadily taking it one operation at a time. For that reason this section will outline cropping separately as you might not need to do this in any case.

Video tends to have a fixed aspect ratio: Today’s most common aspect ratio is 16:9, older videos are 4:3, and films come in a variety of aspect ratio. What if you want to have a square GIF image? What if you want to crop just a small part of a bigger frame? That is what cropping is designed to achieve.

This is the command to crop a video frame:

$ ffmpeg -i {file} -vf "crop={width}:{height}:{X}:{Y}" -c:v copy {newclip}

{file} is explained above; {newclip}, as above, should be a new file name for the cropped clip, different from the original clip but with the same extension.

The really tricky part is how you find "crop={width}:{height}:{X}:{Y}". To solve that:

  • Open your clip in a video player and then take a screenshot of the video. It’s important to use a video player because you need just the video frame, whereas a desktop screenshot would include elements of your desktop too.
  • Open the screenshot image with an image editor, such as GIMP (which we get to in the next section).
  • Point the cursor at the top-left of the area you want to crop from the video. Now look at the co-ordinates of the cursor that the image editor gives and this shows the {X}:{Y} part of the problem – scribble down the two numbers.
  • From that point click the mouse and drag a frame across the image; as you go the image editor should tell you the size of the frame in pixels. When you’ve dragged the frame to the area you want to crop out of the video, the size of the frame will give you the {width}:{height} part of the problem – scribble down the two numbers.
  • Just to be complicated, when ffmpeg creates a frame its width and height must be even numbers. If either your width or height are an odd number, add or subtract 1 as appropriate. Also, unless those numbers are divisible by 16, the program will throw you a strange error message – but you can ignore that.

You now have the {width}:{height}:{X}:{Y} sequence to run the command and create your cropped video.

Scale and convert

Now for the main event! This is the command which will scale and convert the video clip to a GIF:

$ ffmpeg -ss {index} -t {length} -i {file} -vf "fps={frames},scale={width}:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" -loop 0 {output.gif}

Looks complicated, but it’s fairly easy to fathom:

  • {file} is the name of the clip to process;
  • {output.gif} is the name of the final file, so you may change ‘output’ to be whatever you require;
  • -loop 0 tells the GIF to loop forever, which is how we create the animation effect;
  • as for all those flags=, that’s ffmpeg’s complicated video processing language to package a GIF frame from the video frame.

There are only four parameters in the command which you need worry about:

  • {width}:-1 sets the width of the video. The -1 part tells ffmpeg to scale the height to whatever is required to keep the same aspect ratio. You could set this manually, but for accuracy it’s easier just to set one dimension and let the program calculate the other. This also means that you could enter -1:{height} instead and get the same result.
  • {frames} is the frame rate for the final GIF file in frames per second. The more frames, the more realistic the video; but the larger the final file will be. Ideally you want a number somewhere between 6 and 12. You may have to run this command a few times, playing with the number, until you get the right animation effect that gives the best file size.
  • {index} and {length} were discussed above. They are the time index of where to start processing the video, and how many seconds of the video to process. Earlier I said that a second should be left before and after the section you want to turn into a GIF. The reason is that as you play with the {frames} number, changing the start point or length of the video by just a tenth to a half a second can give a big difference in the quality of the final animation.

This final step is what really determines how good the animation looks – and it may be that you have to repeatedly run this command, changing {frames}, {index}, and {time} on each run, until you get the effect you want. Even then, it might not be perfect, which is why I said you should always have another clip or two to try and see if you get a better result.

In the end though what this is a battle between is the frame rate (increasing it always makes the end result better) versus the file size produced, and what you are prepared to live with in order to get the effect you require.

Post processing with GIMP

The GIF files that ffmpeg produces are pretty good. Chances are you will not need to to any post-processing on them. What GIMP provides is the ability to do a little fine tuning on the results produced by ffmpeg.

Just like ffmpeg, GIMP is a massive program capable of immensely complex manipulation of images – on a par with anything that proprietary programs can muster on Windoze machines. As with pre-processing there isn’t space to go into the complexities of GIMP, though a good place to start are the extensive documentation & tutorial pages on their website.

Admittedly though, GIMP’s powers with animated GIFs are limited, but still useful. Rather than go into this at length you should see the tutorials from their website, or some of the other, rather useful pages which deal with animated GIFs.

There are two main reasons to use GIMP:

When you have finished playing around you have to use ‘File→Export As…’ to save a new version if the GIF animation. The most important thing to remember is to check the boxes ‘As animation’ and ‘Loop forever’ or the new GIF file won’t work properly.

Publishing

When you have finished and you have an animation you are happy with, you can publish. Many social media sites accept animated GIFs. Likewise they are easily usable across most web sites.

Unlike HTML5 embeds and Java-based animated media, animated GIFs require nothing more than a standard image tag:

<img src="{URL}" class="{style}" width="{width}" height="{height}" alt="{a label}">


I hope this quick run-through of converting videos to animated GIFs has been helpful. Of course, to get the most from this you have to actually try a few times, honing your skill in not only processing the video, but – as I outlined at the very beginning – being able to spot a piece of video which would be ideal to convert into a GIF. That skill of ‘spotting’ the source footage, more than using the commands listed above, is what makes inspiring GIFs.