24 ms·

High quality GIF with FFmpeg

482 points by ux 12y ago

theophrastus 12y ago
This is an interesting discussion, thank you. It would be great to see it compared with the parallel ImageMagick methods: http://www.imagemagick.org/Usage/anim_opt/ http://www.imagemagick.org/Usage/anim_opt/
- ux 12y ago
  ImageMagick is very popular, but apparently the algorithms in pngquant gives excellent results. Don't forget to include it if you do comparisons with the different solutions. Also keep in mind that the compression efficiency and quality depends a lot on the content and how you play with the encoding options (how surprising...). I tried to cover most of the cases in my post, but make sure you are "fluent" with the other tools as well to make an objective comparison. Overall, I think FFmpeg trump-card is that it includes the whole stack; timing, decoding, filtering, encoding, everything is in.
artursapek 12y ago
I use this shell script for generating gifs out of .mov files: https://gist.github.com/artursapek/5b3d15ecac5ff75593c4 https://gist.github.com/artursapek/5b3d15ecac5ff75593c4 I can probably improve it further by using some of what's in this article, but it's already faster and better than any online tool I've found.
- sorenjan 12y ago
  You can pipe the frames from FFmpeg to convert to avoid temporary files. http://superuser.com/a/730389 http://superuser.com/a/730389
  - artursapek 12y ago
    Neat! Unix pipes are amazing. Thanks.
- ux 12y ago
  > (convert -delay 5 -loop 0 $tmp_dir/ffout*.png $2) >& /dev/null So using ImageMagick for this... How is this memory wise BTW? (all frames are in memory at once or not?)
  - artursapek 12y ago
    Not sure, actually. Never had it be enough of a resource hog to even think about it.
  - bigboat 12y ago
    Yes, all frames will be in memory prior to making the GIF. Probably fine for most GIFs, but if you want to go FFmpeg | ImageMagick | FFmpeg for processing a video, or maybe for a longer GIF, you can use this script to keep only a frame at a time in memory: http://www.imagemagick.org/Usage/scripts/process_ppm_pipeline http://www.imagemagick.org/Usage/scripts/process_ppm_pipelin...
FranOntanaya 12y ago
ffmpeg doesn't get nearly enough credit. As long as you can grok the various settings, it makes you feel like McGyver with a paperclip. We work often with media from unusual sources, and after the first "can we do this with ffmpeg" filter there's very little left to handle.
deleted 12y ago
[deleted]
imaginenore 12y ago
And to complete the circle, run the gif through Gfycat and check out the mindblowing bandwidth savings: http://gfycat.com/IllustriousHairyGermanpinscher http://gfycat.com/IllustriousHairyGermanpinscher GIF: 1 MB Video: 73k
- dublinben 12y ago
  Yes please. Let's leave GIF in the 20th Century, where it belongs.
  - IgorPartola 12y ago
    If only iOS (and Android?) allowed you to play inline videos the way you can on the desktop, and the way they play animated GIF's inline. Besides allowing us to adopt video throughout and save on bandwidth and have better video quality, this will be a huge productivity boost to developers: we can finally stop having the GIF vis JIF pronunciation debate.
    - dublinben 12y ago
      Firefox on Android plays inline videos just fine. Sites like GFYcat work as expected, and loop appropriately.
      - 1ris 12y ago
        "Works" with the android stock browser, however there the controls stay in the way. Same for Chrome. Does not work with opera mobile.
      - barrkel 12y ago
        Much to my annoyance. I desire to disable all autoplay of all inline videos across all browsers on my phone. Quite difficult to achieve.
        IgorPartola 12y ago
dangerlibrary 12y ago
ffmpeg is downright magical - just don't get caught using the one in the Ubuntu/Debian repositories. Compile your own ffmpeg if you have any need to do serious work; the Libav fork just isn't as capable. The reasons are obvious if you look into the development philosophies of the two projects. https://github.com/mpv-player/mpv/wiki/FFmpeg-versus-Libav https://github.com/mpv-player/mpv/wiki/FFmpeg-versus-Libav
- MarcScott 12y ago
  I think that ffmpeg is returning in Ubuntu 15 http://www.webupd8.org/2014/11/ffmpeg-returns-to-official-ubuntu.html http://www.webupd8.org/2014/11/ffmpeg-returns-to-official-ub...
  - shmerl 12y ago
    Actually in Debian as well.
    - deleted 12y ago
      [deleted]
- Thaxll 12y ago
  Don't compile it just use the official binaries!
  - dangerlibrary 12y ago
    That's a good option if the official binaries support all the codecs you need and have all the correct hardware acceleration flags set for your particular CPU/GPU. That's ... theoretically possible, I suppose.
    - astrange 12y ago
      ffmpeg binaries come with all possible codecs and all possible CPU features. The first is actually bad, because it will do far more things than you've actually tested and can secure. (In fact, nobody on earth has tested most possible ffmpeg command lines.) The second is the way almost all sensible x86 software should behave.
lnanek2 12y ago
The improved screenshots do look quite improved, with less screen door effect. Nice.
quotedmycode 12y ago
So it's using a simple Median Cut quantization... which is okay, but you can get great results using an octree quantizer, and without dithering. Dithering kills your compression savings in GIF so you'd want to avoid it if possible. In any case, you can see the difference a better quantizer makes here: http://www.leptonica.com/color-quantization.html http://www.leptonica.com/color-quantization.html
- ux 12y ago
  The median cut quantization with a few tweaks (using the the variance typically - see the post for more) actually gives very good results. According to your post, it seems it will not provide much better results with Octree, if any. That calls for testing though (I won't but feel free to, the infrastructure is ready for you to hack in), as improvements are very welcome. Concerning the dithering, you can disable it (dither=none). And indeed, it kills the compression, mainly when using animation, that's why I added the diff_mode option typically (see at the end of the post).
- leeoniya 12y ago
  here's how my quantizer does: full-color, undithered, floyed-dithered: http://imgur.com/a/lrLTd#0 http://imgur.com/a/lrLTd#0 repo: https://github.com/leeoniya/RgbQuant.js https://github.com/leeoniya/RgbQuant.js demos: http://o-0.me/RgbQuant/ http://o-0.me/RgbQuant/ this image is actually a pretty poor example of quantization, it's too easy. full color gradients give a much better indicator of behavior, quality and performance. if you really are interested in different algorithms, check this out: http://www.codeproject.com/Articles/66341/A-Simple-Yet-Quite-Powerful-Palette-Quantizer-in-C http://www.codeproject.com/Articles/66341/A-Simple-Yet-Quite... error-diffusion dithering explained (and kernels): http://www.tannerhelland.com/4660/dithering-eleven-algorithms-source-code/ http://www.tannerhelland.com/4660/dithering-eleven-algorithm...
  - quotedmycode 12y ago
    That is pretty amazing, thanks for sharing. I am interested in different quantization methods, if only for screenshot usage ( I am working on a remote control product, and the quantization used to be quite poor before I added in octree ). Of course, most of my code is in C# but I can at least take a look at the algorithms, and if they are MIT licensed, I can see what it would take to convert them.
sorenjan 12y ago
Nice article and good job implementing it. I would have preferred a small explanation of the filter graph option (-lavfi), but I guess that's outside the scope of the post.
- ux 12y ago
  Yeah, but the article is already quite long so I omit the "details" on that... Basically, it's just to specify a complex filtergraph: in the case of -vf you're just passing one video stream which gets filtered by successive filters. In the case of -lavfi (or -filter_complex if you prefer) you can feed multiple inputs (and get multiple outputs). In this case, the second input is the palette image. You can find more information on http://ffmpeg.org/ffmpeg-filters.html#Filtering-Introduction http://ffmpeg.org/ffmpeg-filters.html#Filtering-Introduction
mplewis 12y ago
I wanted to use FFmpeg in an iOS app, but I ran into licensing issues—the FFmpeg wrapper [1] and FFmpeg itself [2] are both LGPL 2.1, which I didn't think you could use in an iOS app. Since this project does exactly that, I took a second look and found a discussion on that specific use case [3]. It didn't quite clarify things, but it looks like it _might_ be legal to use FFmpeg in an app. [1] https://github.com/OpenWatch/FFmpegWrapper https://github.com/OpenWatch/FFmpegWrapper [2] https://www.ffmpeg.org/legal.html https://www.ffmpeg.org/legal.html [3] https://trac.ffmpeg.org/ticket/1229 https://trac.ffmpeg.org/ticket/1229
- chrisballinger 12y ago
  Oh hey, I wrote that! There are plenty of apps that are distributing LGPL code on the App Store, for example, VLC for iOS [1] includes FFmpeg. The static linking requirement on iOS 7 and earlier prompted some proprietary app developers (like Sparrow [2]) to distribute their object files to allow re-linking. Now that iOS 8 offers dynamic frameworks, I'm not sure if this situation has changed. Even though they are dynamically linked, it is impossible for the end user to replace a library due to the code signing requirements. 1. http://www.videolan.org/vlc/download-ios.html http://www.videolan.org/vlc/download-ios.html 2. https://web.archive.org/web/20131013023029/http://sprw.me/lgpl.php https://web.archive.org/web/20131013023029/http://sprw.me/lg...
1ris 12y ago
>As you probably know, GIF is limited to a palette of 256 colors. No, it's not. OK, the current, wrong, implementations do limit it to 256 colors, but that's not a limitation of gif. Mulitple frames without a delay allow multiple pallets and multiple times 265 colors. But this limitation is just another reason not to use it. Can I use Webm? http://caniuse.com/#feat=webm http://caniuse.com/#feat=webm Yes, you can, and you should. Or h.264: http://caniuse.com/#feat=mpeg4 http://caniuse.com/#feat=mpeg4
- ux 12y ago
  Can you show an example of an animation with more than 256 colors? As you said, the hack to get more than 256 colors is to redefine a sub rectangle with a new palette. But that's also the mechanism used to make animations. Are you able to get fluid playback with that? Note: I'm not talking about new frame being just a new sub rectangle, more about N sub rectangles for the same frame, then a delay event, then M sub rectangles for the new frame, etc
  - 1ris 12y ago
    None that works with current browsers implantations, because they erroneous ignore no delay between frames and wait anyway. But that's a bug in the gif decoder, not a limitation of gif. OK, this is hairsplitting, but it illustrates how borken the state of gif is.
    - eridius 12y ago
      Maybe someone who cares about this should submit patches? All of the major browser engines are open-source.
      - chc 12y ago
        This would probably cause regressions with other GIFs that neglect to specify a delay but are supposed to have one. It's hard to imagine this universal behavior is accidental. It's probably like everything else on the Web — a hack to keep things that shouldn't work from actually not working.
syoc 12y ago
There is no reason to create new content in .gif and not webm as of now. FFmpeg is really nice though.
- mikehearn 12y ago
  I'm not going to tell you anything new here, but there are reasons to use GIF instead of video. WebM isn't supported on Safari & IE. H.264 isn't officially supported on Firefox (though I believe OS X and Window may now provide their own decoders that Firefox uses). To get a similar experience to GIF, you need two formats and it needs to be embedded in an HTML file using a <video> tag. Compare that to the GIF experience, where you link to the image and it works the same way everywhere. There simply is not a video-based standard that implies "short, silent, autoplayed, looped video" in the way that animated GIFs do. There are ways to approximate the behavior in HTML, but none of them are perfect in the way GIFs are.
  - kuschku 12y ago
    Actually, Firefox supports h264 nowadays. Cisco bought a license to the patent, and gave it to Mozilla for free, so they can freely distribute an h264 decoder.
oakwhiz 12y ago
What would be really cool is if ffmpeg/avconv gained the ability to create lossy LZW GIFs, like in this tool: https://github.com/pornel/giflossy https://github.com/pornel/giflossy
neeee 12y ago
Gifsicle is very good at making highly optimized GIFs, but slightly more cumbersome as you have to convert each frame to a separate image first. http://www.lcdf.org/gifsicle/ http://www.lcdf.org/gifsicle/
Pephers 12y ago
This is pretty cool. I use GIFs for marketing for my SaaS startup[1] because it has the best support for autoplaying across devices, but the file sizes are a bit high (690 KB and 270KB for screencasts of a few minutes each). I use licecap[2] for recording and Gifsicle for optimizing, but perhaps I should give ffmpeg a go and compare the results. [1] https://zapla.co https://zapla.co [2] http://www.cockos.com/licecap/ http://www.cockos.com/licecap/
pkhamre 12y ago
I like your domain.
simas 12y ago
Very nice of you to share this with the community! Examples are just awesome.

482 points by ux 12y ago

This is an interesting discussion, thank you. It would be great to see it compared with the parallel ImageMagick methods: http://www.imagemagick.org/Usage/anim_opt/ http://www.imagemagick.org/Usage/anim_opt/

ux 12y ago
ImageMagick is very popular, but apparently the algorithms in pngquant gives excellent results. Don't forget to include it if you do comparisons with the different solutions. Also keep in mind that the compression efficiency and quality depends a lot on the content and how you play with the encoding options (how surprising...). I tried to cover most of the cases in my post, but make sure you are "fluent" with the other tools as well to make an objective comparison. Overall, I think FFmpeg trump-card is that it includes the whole stack; timing, decoding, filtering, encoding, everything is in.

artursapek 12y ago

I use this shell script for generating gifs out of .mov files: https://gist.github.com/artursapek/5b3d15ecac5ff75593c4 https://gist.github.com/artursapek/5b3d15ecac5ff75593c4 I can probably improve it further by using some of what's in this article, but it's already faster and better than any online tool I've found.

sorenjan 12y ago
You can pipe the frames from FFmpeg to convert to avoid temporary files. http://superuser.com/a/730389 http://superuser.com/a/730389
- artursapek 12y ago
  Neat! Unix pipes are amazing. Thanks.
ux 12y ago
> (convert -delay 5 -loop 0 $tmp_dir/ffout*.png $2) >& /dev/null So using ImageMagick for this... How is this memory wise BTW? (all frames are in memory at once or not?)
- artursapek 12y ago
  Not sure, actually. Never had it be enough of a resource hog to even think about it.
- bigboat 12y ago
  Yes, all frames will be in memory prior to making the GIF. Probably fine for most GIFs, but if you want to go FFmpeg | ImageMagick | FFmpeg for processing a video, or maybe for a longer GIF, you can use this script to keep only a frame at a time in memory: http://www.imagemagick.org/Usage/scripts/process_ppm_pipeline http://www.imagemagick.org/Usage/scripts/process_ppm_pipelin...

FranOntanaya 12y ago

ffmpeg doesn't get nearly enough credit. As long as you can grok the various settings, it makes you feel like McGyver with a paperclip. We work often with media from unusual sources, and after the first "can we do this with ffmpeg" filter there's very little left to handle.

deleted 12y ago

[deleted]

imaginenore 12y ago

And to complete the circle, run the gif through Gfycat and check out the mindblowing bandwidth savings: http://gfycat.com/IllustriousHairyGermanpinscher http://gfycat.com/IllustriousHairyGermanpinscher GIF: 1 MB Video: 73k

dublinben 12y ago
Yes please. Let's leave GIF in the 20th Century, where it belongs.
- IgorPartola 12y ago
  If only iOS (and Android?) allowed you to play inline videos the way you can on the desktop, and the way they play animated GIF's inline. Besides allowing us to adopt video throughout and save on bandwidth and have better video quality, this will be a huge productivity boost to developers: we can finally stop having the GIF vis JIF pronunciation debate.
  - dublinben 12y ago
    Firefox on Android plays inline videos just fine. Sites like GFYcat work as expected, and loop appropriately.
    - 1ris 12y ago
      "Works" with the android stock browser, however there the controls stay in the way. Same for Chrome. Does not work with opera mobile.
    - barrkel 12y ago
      Much to my annoyance. I desire to disable all autoplay of all inline videos across all browsers on my phone. Quite difficult to achieve.
      - IgorPartola 12y ago

dangerlibrary 12y ago

ffmpeg is downright magical - just don't get caught using the one in the Ubuntu/Debian repositories. Compile your own ffmpeg if you have any need to do serious work; the Libav fork just isn't as capable. The reasons are obvious if you look into the development philosophies of the two projects. https://github.com/mpv-player/mpv/wiki/FFmpeg-versus-Libav https://github.com/mpv-player/mpv/wiki/FFmpeg-versus-Libav

MarcScott 12y ago
I think that ffmpeg is returning in Ubuntu 15 http://www.webupd8.org/2014/11/ffmpeg-returns-to-official-ubuntu.html http://www.webupd8.org/2014/11/ffmpeg-returns-to-official-ub...
- shmerl 12y ago
  Actually in Debian as well.
  - deleted 12y ago
    [deleted]
Thaxll 12y ago
Don't compile it just use the official binaries!
- dangerlibrary 12y ago
  That's a good option if the official binaries support all the codecs you need and have all the correct hardware acceleration flags set for your particular CPU/GPU. That's ... theoretically possible, I suppose.
  - astrange 12y ago
    ffmpeg binaries come with all possible codecs and all possible CPU features. The first is actually bad, because it will do far more things than you've actually tested and can secure. (In fact, nobody on earth has tested most possible ffmpeg command lines.) The second is the way almost all sensible x86 software should behave.

lnanek2 12y ago

The improved screenshots do look quite improved, with less screen door effect. Nice.

quotedmycode 12y ago

So it's using a simple Median Cut quantization... which is okay, but you can get great results using an octree quantizer, and without dithering. Dithering kills your compression savings in GIF so you'd want to avoid it if possible. In any case, you can see the difference a better quantizer makes here: http://www.leptonica.com/color-quantization.html http://www.leptonica.com/color-quantization.html

ux 12y ago
The median cut quantization with a few tweaks (using the the variance typically - see the post for more) actually gives very good results. According to your post, it seems it will not provide much better results with Octree, if any. That calls for testing though (I won't but feel free to, the infrastructure is ready for you to hack in), as improvements are very welcome. Concerning the dithering, you can disable it (dither=none). And indeed, it kills the compression, mainly when using animation, that's why I added the diff_mode option typically (see at the end of the post).
leeoniya 12y ago
here's how my quantizer does: full-color, undithered, floyed-dithered: http://imgur.com/a/lrLTd#0 http://imgur.com/a/lrLTd#0 repo: https://github.com/leeoniya/RgbQuant.js https://github.com/leeoniya/RgbQuant.js demos: http://o-0.me/RgbQuant/ http://o-0.me/RgbQuant/ this image is actually a pretty poor example of quantization, it's too easy. full color gradients give a much better indicator of behavior, quality and performance. if you really are interested in different algorithms, check this out: http://www.codeproject.com/Articles/66341/A-Simple-Yet-Quite-Powerful-Palette-Quantizer-in-C http://www.codeproject.com/Articles/66341/A-Simple-Yet-Quite... error-diffusion dithering explained (and kernels): http://www.tannerhelland.com/4660/dithering-eleven-algorithms-source-code/ http://www.tannerhelland.com/4660/dithering-eleven-algorithm...
- quotedmycode 12y ago
  That is pretty amazing, thanks for sharing. I am interested in different quantization methods, if only for screenshot usage ( I am working on a remote control product, and the quantization used to be quite poor before I added in octree ). Of course, most of my code is in C# but I can at least take a look at the algorithms, and if they are MIT licensed, I can see what it would take to convert them.

sorenjan 12y ago

Nice article and good job implementing it. I would have preferred a small explanation of the filter graph option (-lavfi), but I guess that's outside the scope of the post.

ux 12y ago
Yeah, but the article is already quite long so I omit the "details" on that... Basically, it's just to specify a complex filtergraph: in the case of -vf you're just passing one video stream which gets filtered by successive filters. In the case of -lavfi (or -filter_complex if you prefer) you can feed multiple inputs (and get multiple outputs). In this case, the second input is the palette image. You can find more information on http://ffmpeg.org/ffmpeg-filters.html#Filtering-Introduction http://ffmpeg.org/ffmpeg-filters.html#Filtering-Introduction

mplewis 12y ago

I wanted to use FFmpeg in an iOS app, but I ran into licensing issues—the FFmpeg wrapper [1] and FFmpeg itself [2] are both LGPL 2.1, which I didn't think you could use in an iOS app. Since this project does exactly that, I took a second look and found a discussion on that specific use case [3]. It didn't quite clarify things, but it looks like it _might_ be legal to use FFmpeg in an app. [1] https://github.com/OpenWatch/FFmpegWrapper https://github.com/OpenWatch/FFmpegWrapper [2] https://www.ffmpeg.org/legal.html https://www.ffmpeg.org/legal.html [3] https://trac.ffmpeg.org/ticket/1229 https://trac.ffmpeg.org/ticket/1229

chrisballinger 12y ago
Oh hey, I wrote that! There are plenty of apps that are distributing LGPL code on the App Store, for example, VLC for iOS [1] includes FFmpeg. The static linking requirement on iOS 7 and earlier prompted some proprietary app developers (like Sparrow [2]) to distribute their object files to allow re-linking. Now that iOS 8 offers dynamic frameworks, I'm not sure if this situation has changed. Even though they are dynamically linked, it is impossible for the end user to replace a library due to the code signing requirements. 1. http://www.videolan.org/vlc/download-ios.html http://www.videolan.org/vlc/download-ios.html 2. https://web.archive.org/web/20131013023029/http://sprw.me/lgpl.php https://web.archive.org/web/20131013023029/http://sprw.me/lg...

1ris 12y ago

>As you probably know, GIF is limited to a palette of 256 colors. No, it's not. OK, the current, wrong, implementations do limit it to 256 colors, but that's not a limitation of gif. Mulitple frames without a delay allow multiple pallets and multiple times 265 colors. But this limitation is just another reason not to use it. Can I use Webm? http://caniuse.com/#feat=webm http://caniuse.com/#feat=webm Yes, you can, and you should. Or h.264: http://caniuse.com/#feat=mpeg4 http://caniuse.com/#feat=mpeg4

ux 12y ago
Can you show an example of an animation with more than 256 colors? As you said, the hack to get more than 256 colors is to redefine a sub rectangle with a new palette. But that's also the mechanism used to make animations. Are you able to get fluid playback with that? Note: I'm not talking about new frame being just a new sub rectangle, more about N sub rectangles for the same frame, then a delay event, then M sub rectangles for the new frame, etc
- 1ris 12y ago
  None that works with current browsers implantations, because they erroneous ignore no delay between frames and wait anyway. But that's a bug in the gif decoder, not a limitation of gif. OK, this is hairsplitting, but it illustrates how borken the state of gif is.
  - eridius 12y ago
    Maybe someone who cares about this should submit patches? All of the major browser engines are open-source.
    - chc 12y ago
      This would probably cause regressions with other GIFs that neglect to specify a delay but are supposed to have one. It's hard to imagine this universal behavior is accidental. It's probably like everything else on the Web — a hack to keep things that shouldn't work from actually not working.

syoc 12y ago

There is no reason to create new content in .gif and not webm as of now. FFmpeg is really nice though.

mikehearn 12y ago
I'm not going to tell you anything new here, but there are reasons to use GIF instead of video. WebM isn't supported on Safari & IE. H.264 isn't officially supported on Firefox (though I believe OS X and Window may now provide their own decoders that Firefox uses). To get a similar experience to GIF, you need two formats and it needs to be embedded in an HTML file using a <video> tag. Compare that to the GIF experience, where you link to the image and it works the same way everywhere. There simply is not a video-based standard that implies "short, silent, autoplayed, looped video" in the way that animated GIFs do. There are ways to approximate the behavior in HTML, but none of them are perfect in the way GIFs are.
- kuschku 12y ago
  Actually, Firefox supports h264 nowadays. Cisco bought a license to the patent, and gave it to Mozilla for free, so they can freely distribute an h264 decoder.

oakwhiz 12y ago

What would be really cool is if ffmpeg/avconv gained the ability to create lossy LZW GIFs, like in this tool: https://github.com/pornel/giflossy https://github.com/pornel/giflossy

neeee 12y ago

Gifsicle is very good at making highly optimized GIFs, but slightly more cumbersome as you have to convert each frame to a separate image first. http://www.lcdf.org/gifsicle/ http://www.lcdf.org/gifsicle/

Pephers 12y ago

This is pretty cool. I use GIFs for marketing for my SaaS startup[1] because it has the best support for autoplaying across devices, but the file sizes are a bit high (690 KB and 270KB for screencasts of a few minutes each). I use licecap[2] for recording and Gifsicle for optimizing, but perhaps I should give ffmpeg a go and compare the results. [1] https://zapla.co https://zapla.co [2] http://www.cockos.com/licecap/ http://www.cockos.com/licecap/

pkhamre 12y ago

I like your domain.

simas 12y ago

Very nice of you to share this with the community! Examples are just awesome.