Creating animated GIFs of videos using free tools

A small step by step tutorial explaining how to make animated GIFs of videos using free software.

 

Note: Tutorial was made on Windows, though the same steps could be followed for Linux as the tools being used to make the gif are cross platform.

Aquire Software

First of all get the software that you will be needing. For this tutorial we need two separate tools:

1) ffmpeg (http://ffmpeg.org/)
2) ImageMagick (http://www.imagemagick.org)

ffmpeg - this is a really powerful software library that deals with audio/video. We will be using it to extract frames from a video.

ImageMagick - another very powerful software library, this one deals with images. We will of course primarily be using it to combine the frames into a gif.

Extract Frames

To extract frames using ffmpeg, we will be using the following command:

 

.\ffmpeg\ffmpeg.exe -ss $startSeconds -i "$sourceFile" -r $frameRate -t $duration $outputDir\frame%04d.bmp 

 

Arguments are as follows:

 

$startSeconds - specifies how many seconds into the video frames should start to be extracted.

$sourceFile - video whose frames need to be extracted.

$frameRate - rate at which frame should be extracted. Rate close to video's native frame rate = smoother animation, but larger gif; Lower rate = jerky animation, but smaller gif.

$duration - specifies how many seconds worth of video do you want to extract frames for.

$outputDir - where the extracted frames should be placed.

 

The above command will output bmp files (in theory this should maintain the highest quality+be the fastest).

 

A real world example:

 

.\ffmpeg\ffmpeg.exe -ss 957 -i "N:\video\tv\The Simpsons - The Complete Seventh Season\The Simpsons - S07E02 - Radioactive Man.avi" -r 24 -t 8 "N:\tmp\frame%04d.bmp"

 

In the above example we start extracting frames from video "The Simpsons - S07E02 - Radioactive Man.avi" at 00:15:57 (fifteen minutes, 57 seconds). (In seconds this is of course 15x60+57 = 957). Frame rate is 24, and we extract 8 seconds worth of frames from the movie. The output is put into the N:\tmp folder, with the files prefixed with 'frame'.

 

After the command is complete we can see the frames extracted in the folder:

 

Folder showing the extracted frames.

As expected we have 192 frames extracted here, as 8 (duration) x 24 (frame rate) = 192 frames.

Resizing The Images (optional)

We could make the gif directly out of the extracted frames, however we will want to re-size them a bit to make the output gif smaller (as it's going to be animated the size will be larger than average image, so we would like to shave off as much of the size as possible).

To do this we are going to be using the following ImageMagick command:

 

.\image-magick\mogrify -resize $resizePercentage $outputDir\*.bmp

 

Arguments are as follows:

 

$resizePercentage - how much bigger or how much smaller you want to make the images. eg. Speficing 80% here will make the image 20% smaller.

$outputDir - the folder where the images that will be re sized are to be found. (*.bmp means all bitmap images in the folder will be re sized).

 

Real world example:

 

.\image-magick\mogrify -resize 50% "N:\tmp\*.bmp"

 

Here we are making the images half their original size.

 

Make The Animated Gif

 

Now for the final step, which is combining the images into an animated gif.

 

For this we the following ImageMagick command:

 

.\image-magick\convert.exe -delay $delay -loop 0 "$outputDir\*.bmp" "$gifFileName.gif"

 

Arguments are as follows:

 

$delay - The gif's frame rate. Should be specified as 1x24 or 1x16. (1x24 = 24 frames per second, 1x16 = 16 frames per second etc). 1x16 appears to be the best value considering some browsers cap GIF frame rates.

$outputDir - This is where we have our frames extracted, in this case all bitmap files in outputDir will be added to the gif.

$gifFileName - The name of the gif file that will be generated.

 

Real world example:

 

.\image-magick\convert.exe -delay 1x16 -loop 0 "N:\tmp\*.bmp" "N:\simpsons.gif"

 

And that's it, after the above command completes, you should have your animated gif.

 

Here is the one we created for this tutorial:

 

The final output.

 

Well that's it, hope you found the tutorial useful.

 

I will be creating a powershell script to automate these steps, will share it when it's ready.