Convert a video into an animated GIF using ffmpeg

In this article we show you how to convert any video into an animated gif image.
This method is one of the best to convert a video into an animated gif image under Linux systems (almost any distribution), and also an excellent option for Windows and Mac users.

Let's start directly seeing how to transform any video file into an animated GIF file using ffmpeg. As we have seen on other occasions, and following the basic structure of the ffmpeg command, the only thing that we have to do to get an animated GIF file, is to include the .gif extension in the output file and ffmpeg will know what to do. So to transform a sample file (example.mp4) to animated GIF format, we would only have to enter the following command:

ffmpeg -i video.avi video.gif -hide_banner

The process is completed fairly quickly (this conversion process is very fast) and we get video.gif output file. Well, now we bear in mind the following:

  • First, and what is certainly the most important, this process has converted a file of 767KB (mpeg4 video with a bitrate of 430kb/s) into an animated GIF file which occupies more than 20MB of storage space (the bitrate of the new file is 11820kb/s which is 25 times larger than the original one)
  • In this case it has no effect because the original video had no sound, but we also need to know, that animated GIFs can not have sound, so the audio would be lost in the process.

The file size is an issue in video files that are very big. That is why animated GIFs are often used in very short videos or animations (with a duration of only a few seconds). The animated GIF format is basically a sequence of GIF images, so it offers no video compression at all like other video codecs, and thus produces very large files.

If you're still wondering why should we use this format, the truth is that I think that everybody will gradually use other video formats, but for now, they are used because it is easier to put a picture on a website than a video (it is easier to include a <img> tag than to include a <video> one), and there is also a problem playing videos on the iPhone or iPad devices.

In these devices video elements on websites do not allow certain options. Among these options there is the self-reproduction option (autoplay parameter), so a video starts playing immediately when the page loads. In these devices, if the user does not press the play button, the video will not begin to reproduce. This does not happen with animated GIFs that can reproduced themselves immediately on these devices, so many websites use them.

How to reduce the size of animated GIFs

Given all the above, there are some things that we can do to have files of this type with a more manageable size:

  • First, try the video to be as short as possible. If a video has a duration of 20 seconds, and 5 of them really do not contribute to the video, we can remove thus having a video of 15 seconds and therefore smaller. See how to extract a video part from a video.
  • It is possible to reduce the video resolution. For example, if you have a video of 1920x1080 (HD) we can reduce it to a resolution of 300x168. This reduction will make each image resolution smaller and therefore all video too. (In the example we have mentioned before we get a video 40 times smaller). The downside of doing this is that we also reduce quality of the video and if we try to play this video in a large window we will have a lot of "pixelation". See more on how to change video resolution.
  • Another very common thing we can do is to reduce the frames per second of the video. We can convert a video of 30 frames per second to an animated GIF of 10 frames per second and therefore have a file 3 times smaller. The trouble with this is that we will lose a sense of softness on the video.

I hope that these points can be helpful to have GIF animations smaller size, and if they are not enough we can combine them to have smaller file sizes. We will see some examples.

Examples of video conversion to animated GIF

We start with an original video of resolution 320x180 pixels. Here it is:

We convert this mp4 video to an animated GIF using the following command:

ffmpeg -i video_320x180.mp4 agif_320x180.gif -hide_banner

And here you can see the result:

You can notice:

  • It is automatically playing
  • It is looping itself
  • It has no video controls by default as the original video.
  • If you are watching this video from an iPad or an iPhone you can see this video directly, but not the original one (which you have to push play button, and then the video plays in full screen mode)
  • It has no sound (it has lost the audio track in the conversion)
  • It has lost some quality on the conversion (you can notice in some colors)
  • The GIF file is almost 5 times larger than the mp4 original file.

Now, we will be doing some conversions in order to have a reduced file size. First we will convert this 46 seconds video into a 20 seconds video extracting from second 15 to second 35 of the original video. We use:

ffmpeg -i video_320x180.mp4 -ss 15 -t 20 agif_15-35_320x180.gif -hide_banner

Here you can see the result which occupies less than half of the previous file size.

Or as we have explained in the article, we can reduce video resolution. Here we reduce video resolution from 320x180 to 160x90:

ffmpeg -i video_320x180.mp4 -vf scale=160:90 agif_160x90.gif -hide_banner

You can see the result here:

And then you can say the browser to use the original resolution with this reduced gif file, so you will have:

Or you can reduce the frame per second rate in order to have a smaller file. Here we will reduce from 30 frames per second to 10 frames per second:

ffmpeg -i video_320x180.mp4 -r 10 agif_r10_320x180.gif -hide_banner

Here is the output file:

In this case we have reduced about half the size of the original file. Then, if we want to combine all together we can use:

ffmpeg -i video_320x180.mp4 -r 10 -ss 15 -t 20 -vf scale=160:90 agif_r10_d20_160x90.gif -hide_banner

And we get a 326KB output (less than one tenth of the original size) which looks like this:

Now, you only have to choose which transformations to use. Good luck!

    Did you find this article helpful?

techs: