Convert Video to GIF or GIF to Video

By  on  
Convert Video to GIF

I feel like GIFs are more popular now than back in the day when they were just about the only way to have moving imagery on the web.  They were so useful because crap like Real Video Player, Windows Media, and other crap formats all required a special codec and browser plugin.  We have better video stands in browsers these days but GIFs are all over now, partially just for the banter of them.

Convert Video to GIF

So what's the easiest way to convert an entire video or just a snippet to a GIF?  Let's use my favorite media utility:  ffmpeg.

To convert the entire video to GIF, use the following command:

ffmpeg -i small.mp4 small.gif

To convert just a portion of a video clip to GIF, use the following command:

ffmpeg -t 3 -ss 00:00:02 -i small.webm small-clip.gif

The snippet above directs ffmpeg to create a GIF 3 seconds long starting at 2 seconds into the video.

The default conversion doesn't appear to be high quality, so you can configure the bitrate via another parameter:

ffmpeg -i small.mp4 -b 2048k small.gif

Convert GIF to Video

The command is quite simple:

ffmpeg -f gif -i animation.gif animation.mp4

You can use this same command format to convert to other video formats:

ffmpeg -f gif -i animation.gif animation.mpeg

ffmpeg -f gif -i animation.gif animation.webm

ffmpeg and ImageMagick are awesome media utilities which you should take some time to check out if you have any questions about how to get something done!

Recent Features

  • By
    Tips for Starting with Bitcoin and Cryptocurrencies

    One of the most rewarding experiences of my life, both financially and logically, has been buying and managing cryptocurrencies like Bitcoin, Litecoin, Ethereum. Like learning any other new tech, I made rookie mistakes along the way, but learned some best practices along the way. Check out...

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

Incredible Demos

  • By
    Smooth Scrolling with MooTools Fx.SmoothScroll

    I get quite a few support requests for my previous MooTools SmoothScroll article and the issue usually boils down to the fact that SmoothScroll has become Fx.SmoothScroll. Here's a simple usage of Fx.SmoothScroll. The HTML The only HTML requirement for Fx.SmoothScroll is that all named...

  • By
    MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...

Discussion

  1. MaxArt

    I suggest using a tool like gifsicle to reduce the size of the returned gif. IIRC, ffmpeg doesn’t optimize very much.

  2. Sarah Reinhardt

    You could also use a free webservice like http://www.video2gif.org/. Its easy to use, many video formats are supported and there are a lot options to reduce the file size of your resulting Gif.

  3. I used

    ffmpeg -i foo.mp4 -r 5 -vf scale=270:-1 foo.gif

    , where -r 5 cuts it to 5 frames per second, and -vf scale=270:-1 scales the output to a width of 270 pixels and a height that matches the aspect ratio.

  4. Phil Plückthun

    It’s actually possible pregenerate a colour palette for a gif by doing sth like this:

    ffmpeg -i "input.mp4" -r 10 -vf fps=15,scale=320:-1:flags=lanczos,palettegen palette.png
    

    And then using it with this, in your actual conversion:

    -filter_complex "fps=5,scale=1016:-1:flags=lanczos[x];[x][1:v]paletteuse"
    

    Also piping into gifsicle can improve the size a lot:

    ... -f gif - | gifsicle --optimize=3 --delay=15 > out.gif
    
  5. Chris

    What if you only have individual gifs which are not animated? How to create mp4 then?

    ffmpeg -f image2 -framerate 25 -pattern_type glob -r 3 -i '*.gif' test.avi
    ffmpeg version 3.4.1 Copyright (c) 2000-2017 the FFmpeg developers
      built with gcc 4.4.7 (GCC) 20120313 (Red Hat 4.4.7-18)
      configuration: 
      libavutil      55. 78.100 / 55. 78.100
      libavcodec     57.107.100 / 57.107.100
      libavformat    57. 83.100 / 57. 83.100
      libavdevice    57. 10.100 / 57. 10.100
      libavfilter     6.107.100 /  6.107.100
      libswscale      4.  8.100 /  4.  8.100
      libswresample   2.  9.100 /  2.  9.100
    [image2 @ 0x20684c0] Could not find codec parameters for stream 0 (Video: none, none): unknown codec
    Consider increasing the value for the 'analyzeduration' and 'probesize' options
    Input #0, image2, from '*.gif':
      Duration: 00:03:20.00, start: 0.000000, bitrate: N/A
        Stream #0:0: Video: none, none, 3 fps, 3 tbr, 3 tbn, 3 tbc
    Stream mapping:
      Stream #0:0 -> #0:0 (? (?) -> mpeg4 (native))
    Decoder (codec none) not found for input stream #0:0
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!