Create animated GIF and WebP from videos using FFmpeg

Perhaps it&#x27;s time to start a collection of ffmpeg commands for every situation, similar to bro pages [1]. I feel like I have to look at my old projects every time I need to use it. It took me a lot of trial and error to write an all-purpose ffmpeg command.<p>This is how I convert videos to 720p web-playable videos (if it&#x27;s not already web-playable):<p><a href="https:&#x2F;&#x2F;github.com&#x2F;nicbou&#x2F;homeserver&#x2F;blob&#x2F;22c0a160f9df5f4c34cc7a0dc322d5461a73a28b&#x2F;videoprocessing&#x2F;src&#x2F;jobs.py#L97" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;nicbou&#x2F;homeserver&#x2F;blob&#x2F;22c0a160f9df5f4c34...</a><p>This is how I create hover previews like on modern streaming sites:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;nicbou&#x2F;timeline&#x2F;blob&#x2F;9d9340930ed0213dffdd884bef17f65c73e86ffc&#x2F;backend&#x2F;source&#x2F;timeline&#x2F;file_utils.py#L31" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;nicbou&#x2F;timeline&#x2F;blob&#x2F;9d9340930ed0213dffdd...</a><p>[1] <a href="http:&#x2F;&#x2F;bropages.org&#x2F;tar" rel="nofollow">http:&#x2F;&#x2F;bropages.org&#x2F;tar</a>

I switched to ffmpegging my gifs a year ago and haven&#x27;t looked back. It&#x27;s a bit annoying to begin with but now so much easier than using some 3rd rate program or having to upload everything to EZGif. It&#x27;s worth the pain!

I found that gifski makes great quality animated gifs. ffmpeg is a mess to use for that. You still need ffmpeg to generate individual frames from a video, but that&#x27;s a relatively easy step in comparison to that cumbersome set up of dithering for gif generation.<p><a href="https:&#x2F;&#x2F;gif.ski" rel="nofollow">https:&#x2F;&#x2F;gif.ski</a>

It&#x27;s pretty amazing how much of modern video editing tech is still powered by ffmpeg under the hood. Highly recommend that people donate if you can:<p><a href="https:&#x2F;&#x2F;ffmpeg.org&#x2F;donations.html" rel="nofollow">https:&#x2F;&#x2F;ffmpeg.org&#x2F;donations.html</a>

Better link with explanation: <a href="https:&#x2F;&#x2F;engineering.giphy.com&#x2F;how-to-make-gifs-with-ffmpeg&#x2F;" rel="nofollow">https:&#x2F;&#x2F;engineering.giphy.com&#x2F;how-to-make-gifs-with-ffmpeg&#x2F;</a>

It’d be nice if you had a brief explanation of what all these flags are and why you’re using them. You <i>can</i> after all convey a video to gif with “ffmpeg -i video.mp4 -o video.gif”.

Oh please no. Why would you ever do this? Please use the &lt;video&gt; tag to embed your actual video with a GIF fallback if you wish. Why are we using an ancient 8-bit lossless format for video when pretty much all browsers support video embeds these days?<p><pre><code> &lt;video width=&quot;320&quot; height=&quot;240&quot; autoplay loop playsinline muted&gt; &lt;source src=&quot;foo.mp4&quot; type=&quot;video&#x2F;mp4&quot;&gt; &lt;source src=&quot;foo.ogg&quot; type=&quot;video&#x2F;ogg&quot;&gt; &lt;!-- GIF fallback for ancient browsers but it&#x27;s 2021 and you probably don&#x27;t need this anymore --&gt; &lt;img src=&quot;foo.gif&quot; width=&quot;320&quot; height=&quot;240&quot;&gt; &lt;&#x2F;video&gt; </code></pre> With H.264 or any modern codec you&#x27;ll get 24-bit color and smaller file sizes than GIF. It&#x27;s better in every way I can imagine.

Handy guide, thx!<p>A bit overkill but, a gui to hand-hold old folks like me would handy. Perhaps an addin for blender could work - since it&#x27;s video handling chops are growing bigger every day?<p>&gt; I&#x27;m an engineering manager at Google Stadia<p>That&#x27;s gotta be an interesting gig!

Yeah but this actually not very good. The good GIFs don&#x27;t redraw the static areas of the image. You can see it in the keyboard gif<p>As far as I know there is no automated tool to do it though. It&#x27;s done manually by the meme lords<p>Also dialing in the quality is some black magic and not only about adjusting the fps. You can adjust the image size and bitdepth and other parans. This is also not automated and ffmpeg makes it very cumbersome to dial in the right parameters to get decent quality and small file size<p>I&#x27;d actually be really interested to know if there is a better reference out there

Don’t use GIFs for videos.

I often use <a href="https:&#x2F;&#x2F;github.com&#x2F;thevangelist&#x2F;FFMPEG-gif-script-for-bash" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;thevangelist&#x2F;FFMPEG-gif-script-for-bash</a> for achieving this. It&#x27;s a little helper script that does pretty much what is given in the linked blog post.

Nice work!<p>I once wrote a similar thing as part of a tool to record Android devices and make gifs from the resulting video. I recall having to make two or three separate ffmpeg invocations, but here I only see one. It always frustrated me to have to do that, and I&#x27;m pleased to learn how to do it concisely.

WTF is an animated WebP? Shouldn&#x27;t it be just a normal WebM video?

Wasn&#x27;t ffmpeg compiled using Web Assembly? So you could make a web app out of this.

could be useful <a href="https:&#x2F;&#x2F;freetools.site&#x2F;video-editors&#x2F;make-animation" rel="nofollow">https:&#x2F;&#x2F;freetools.site&#x2F;video-editors&#x2F;make-animation</a>

What linux disto are you using that’s so similar to macOS?

I use something similar in MetaMeme for Android

How about APNG?