8 ms·

Create animated GIF and WebP from videos using FFmpeg

172 points by Audiolite 6y ago

bitsen 6y ago
How about APNG?
jonplackett 6y ago
I switched to ffmpegging my gifs a year ago and haven't looked back. It'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's worth the pain!
- devadvance 6y ago
  Author here. This is the same journey I went through and I 100% agree! It can be intimidating at first, but FFmpeg is a a worthwhile utility to begin learning. I've also added some shell functions[0] to my dotfiles to make it a bit easier to use when switching between several different machines. [0] https://gist.github.com/devadvance/03d3c8f57b3e0254fb989e9464587556 https://gist.github.com/devadvance/03d3c8f57b3e0254fb989e946...
  - jonplackett 6y ago
    You've made a really handy cheat sheet, thanks! Bookmarked it for future use! And yeah, it's great, and not just for gifs. Just quickly re-encoding something in a different format / container is so much easier than faffing around opening a proper program. Took a while to not get annoyed with it though and figure out annoying watch-outs like -pix_fmt yuv420p, which I now finally have memorised.
- cm2187 6y ago
  If you start from .png files I struggled to get ffmpeg to produce a high quality gif, and had much more luck with imagemagick.
canada_dry 6y ago
Handy guide, thx! A bit overkill but, a gui to hand-hold old folks like me would handy. Perhaps an addin for blender could work - since it's video handling chops are growing bigger every day? > I'm an engineering manager at Google Stadia That's gotta be an interesting gig!
- deleted 6y ago
  [deleted]
nicbou 6y ago
Perhaps it'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. This is how I convert videos to 720p web-playable videos (if it's not already web-playable): https://github.com/nicbou/homeserver/blob/22c0a160f9df5f4c34cc7a0dc322d5461a73a28b/videoprocessing/src/jobs.py#L97 https://github.com/nicbou/homeserver/blob/22c0a160f9df5f4c34... This is how I create hover previews like on modern streaming sites: https://github.com/nicbou/timeline/blob/9d9340930ed0213dffdd884bef17f65c73e86ffc/backend/source/timeline/file_utils.py#L31 https://github.com/nicbou/timeline/blob/9d9340930ed0213dffdd... [1] http://bropages.org/tar http://bropages.org/tar
- panabee 6y ago
  this is a wonderful idea. we launched a repo here to do exactly this; we'll update the repo over time as we collect commands. https://github.com/HotpotDesign/FFMpeg-Online https://github.com/HotpotDesign/FFMpeg-Online could we list and credit your commands?
  - nicbou 6y ago
    Sure, they're open source for a reason! The videoprocessing one is more mature. It's been converting various torrents movies to playable mp4s for a few years. The 10x1s preview looks magical once you see it in production. It's also a great introduction to ffmpeg filter syntax, which really isn't that complex.
    - panabee 6y ago
      thanks! i just wanted to confirm your permission before posting on the repo. :) on a related note, do you have a command for converting HTML5 animations into webp or mp4 videos?
  - fireattack 6y ago
    I just noticed you have one for "Create single-image video with audio". This seemingly easy task is actually pretty hard to get right with FFMPEG. Just leave a few notes here if anyone want to use that. Video part Chroma sampling Without any `pix_fmt` argument, FFMPEG defaults to 4:4:4 instead of typical 4:2:0. Which has very limited support (for example, Firefox doesn't support it.) To fix: add `pix_fmt yuv420p`, or chain a `format=yuv420p` vf at the end to your other vf(s). Color space FFMPEG by default uses BT.601 when converting your RGB images into YUV. This is an issue if your image / output video is in HD resolution. Almost all video players (including browsers) would assume BT.709 for anything >=720P. This causes color to shift in playback（255,0,0 would become 255,24,0). To fix: add `-vf zscale=matrix=709`. Note: there are some other video filters can do the same. The most famous being good ol' `scale` (based on libswscale). However, it has a notorious bug that would cause the color to shift on its own (becomes yellow) if the input is in BGR (all the `.bmp`s). See: https://trac.ffmpeg.org/ticket/979 https://trac.ffmpeg.org/ticket/979 So stick with better `zscale`. Framerate etc. You can set framerate with `-r` to a small number for both input (reading the same image X times per second) and output (since it's a still image, you can get away with very low framerate. `-tune stillimage` should also be used for (default) x264 encoder. In summary: ffmpeg -loop 1 -r 1 -i image.png -i audio.wav -r 1 -shortest -vf zscale=matrix=709,format=yuv420p -c:v libx264 -tune stillimage output_video.mp4 Audio part - length mismatch bug Even if we ignore all the image/video troubles above, `ffmpeg -loop 1 -i image.png -i sound.mp3 -shortest video.mp4` still doesn't work well. "-shortest" argument has a long-standing bug (https://trac.ffmpeg.org/ticket/5456 https://trac.ffmpeg.org/ticket/5456) that is the output video would be longer than your input audio (by quite a few seconds, worse if using -r 1). There are some workarounds (listed in the ticket) but they don't eliminate the issue entirely. Your best bet (if the length match is crucial) is to just convert the output video again and use -t to cut to the proper length.
eneve 6y ago
I use something similar in MetaMeme for Android
- devadvance 6y ago
  Are you using FFmpeg or directly using libavcodec (or similar)?
dheera 6y ago
Oh please no. Why would you ever do this? Please use the <video> 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? <video width="320" height="240" autoplay loop playsinline muted> <source src="foo.mp4" type="video/mp4"> <source src="foo.ogg" type="video/ogg">  <img src="foo.gif" width="320" height="240"> </video> With H.264 or any modern codec you'll get 24-bit color and smaller file sizes than GIF. It's better in every way I can imagine.
- sp332 6y ago
  Agreed. I think people see little video clips and think "oh, a GIF" without realizing that imgur, giphy, etc. don't actually use GIFs.
  - ourcat 6y ago
    Also, twitter and Facebbok convert uploaded GIFs to video.
  - pcr910303 6y ago
    While they might not know the specific term, they do know that something is different with those services b.c. they can’t save the ‘gif’ videos as easily as they can with real gifs.
- superdisk 6y ago
  GIFs are nice for short looping clips, because they can be embedded anywhere and they don't glitch out unexpectedly like every single "using videos as gifs" solution out there.
  - xvilka 6y ago
    Animated WebPs also can do that but significantly better. And they are supported by all browsers now.
qwerty456127 6y ago
WTF is an animated WebP? Shouldn't it be just a normal WebM video?
- jjcm 6y ago
  Not necessarily, as it's treated differently by the browser. Animated WebPs will autoplay without a `muted` or `autoplay` attribute. Under the hood they're no different than a webm video, with the exception of no support for audio tracks.
  - est31 6y ago
    > Under the hood they're no different than a webm video From a very high level point of view you are right. Yes, webm videos use vp8 and webp uses vp8 key frames, but there are still differences between animated webp and webm videos without sound. A webm video is a video with a vp8/vp9 video stream contained inside an mkv container, while webp files, including the animated ones, are inside RIFF containers. Also, webp's animation mode does not have the full inter frame system that vp8 has. It does support carrying over of state from one frame to the next, but does this in the simplest way possible: just paint the next frame over the prior one, respecting the alphas. Most importantly, those frames are still encoded like vp8 Intraframes (keyframes), not like vp8 Interframes [1]. So you won't need a full vp8 decoder to write an animated webp decoder. [1]: https://tools.ietf.org/html/rfc6386#section-3 https://tools.ietf.org/html/rfc6386#section-3
- kupopuffs 6y ago
  Isnt webp potentially lossless? and webm is a container for lossy codecs VP8/VP9?
jwalton 6y ago
It’d be nice if you had a brief explanation of what all these flags are and why you’re using them. You can after all convey a video to gif with “ffmpeg -i video.mp4 -o video.gif”.
Thaxll 6y ago
Better link with explanation: https://engineering.giphy.com/how-to-make-gifs-with-ffmpeg/ https://engineering.giphy.com/how-to-make-gifs-with-ffmpeg/
robertoandred 6y ago
Don’t use GIFs for videos.
- empyrical 6y ago
  I really hope that HEIF animations can take the place of GIFs someday. http://nokiatech.github.io/heif/comparison.html http://nokiatech.github.io/heif/comparison.html
  - gruez 6y ago
    >I really hope that HEIF animations considering that HEIF is based on HEVC, wouldn't "HEIF animations" just be HEVC videos?
    - empyrical 6y ago
      Basically what this commenter said, but substitute WebP and WebM for HEIF and HEVC https://news.ycombinator.com/item?id=26298606 https://news.ycombinator.com/item?id=26298606 GIFs have a nice convenience to them that straight-up video files lack
tambourine_man 6y ago
What linux disto are you using that’s so similar to macOS?
- devadvance 6y ago
  If you're referencing the GIF of the terminal: it's a small docker image[0] I use to have a consistent demo environment. In this case, I'm running it within iterm on macOS. [0] https://github.com/devadvance/terminalcheatsheet/blob/staging/demo_env/Dockerfile https://github.com/devadvance/terminalcheatsheet/blob/stagin...
  - tambourine_man 6y ago
    Ah, I see, thanks.
shmerl 6y ago
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's a relatively easy step in comparison to that cumbersome set up of dithering for gif generation. https://gif.ski https://gif.ski
forgingahead 6y ago
It'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: https://ffmpeg.org/donations.html https://ffmpeg.org/donations.html
pianoben 6y ago
Nice work! 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'm pleased to learn how to do it concisely.
power78 6y ago
Wasn't ffmpeg compiled using Web Assembly? So you could make a web app out of this.
habi 6y ago
I often use https://github.com/thevangelist/FFMPEG-gif-script-for-bash https://github.com/thevangelist/FFMPEG-gif-script-for-bash for achieving this. It's a little helper script that does pretty much what is given in the linked blog post.
geokon 6y ago
Yeah but this actually not very good. The good GIFs don't redraw the static areas of the image. You can see it in the keyboard gif As far as I know there is no automated tool to do it though. It's done manually by the meme lords 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 I'd actually be really interested to know if there is a better reference out there
- arthur2e5 6y ago
  There has been an automated tool to not redraw stuff for ages. It's called gifsicle, and you should absolutely give it a try. It also does very good lossy compression. https://www.lcdf.org/gifsicle/ https://kornel.ski/lossygif (merged into gifsicle) Even imagemagick's convert can the static stuff. As for the palette stage, that depends on ffmpeg to get things right. I find the guide at https://superuser.com/a/556031 https://superuser.com/a/556031 a lot more comprehensive.
bfoster 6y ago
could be useful https://freetools.site/video-editors/make-animation https://freetools.site/video-editors/make-animation
deleted 6y ago
[deleted]

172 points by Audiolite 6y ago

How about APNG?

I switched to ffmpegging my gifs a year ago and haven't looked back. It'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's worth the pain!

devadvance 6y ago
Author here. This is the same journey I went through and I 100% agree! It can be intimidating at first, but FFmpeg is a a worthwhile utility to begin learning. I've also added some shell functions[0] to my dotfiles to make it a bit easier to use when switching between several different machines. [0] https://gist.github.com/devadvance/03d3c8f57b3e0254fb989e9464587556 https://gist.github.com/devadvance/03d3c8f57b3e0254fb989e946...
- jonplackett 6y ago
  You've made a really handy cheat sheet, thanks! Bookmarked it for future use! And yeah, it's great, and not just for gifs. Just quickly re-encoding something in a different format / container is so much easier than faffing around opening a proper program. Took a while to not get annoyed with it though and figure out annoying watch-outs like -pix_fmt yuv420p, which I now finally have memorised.
cm2187 6y ago
If you start from .png files I struggled to get ffmpeg to produce a high quality gif, and had much more luck with imagemagick.

canada_dry 6y ago

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

deleted 6y ago
[deleted]

nicbou 6y ago

Perhaps it'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. This is how I convert videos to 720p web-playable videos (if it's not already web-playable): https://github.com/nicbou/homeserver/blob/22c0a160f9df5f4c34cc7a0dc322d5461a73a28b/videoprocessing/src/jobs.py#L97 https://github.com/nicbou/homeserver/blob/22c0a160f9df5f4c34... This is how I create hover previews like on modern streaming sites: https://github.com/nicbou/timeline/blob/9d9340930ed0213dffdd884bef17f65c73e86ffc/backend/source/timeline/file_utils.py#L31 https://github.com/nicbou/timeline/blob/9d9340930ed0213dffdd... [1] http://bropages.org/tar http://bropages.org/tar

panabee 6y ago
this is a wonderful idea. we launched a repo here to do exactly this; we'll update the repo over time as we collect commands. https://github.com/HotpotDesign/FFMpeg-Online https://github.com/HotpotDesign/FFMpeg-Online could we list and credit your commands?
- nicbou 6y ago
  Sure, they're open source for a reason! The videoprocessing one is more mature. It's been converting various torrents movies to playable mp4s for a few years. The 10x1s preview looks magical once you see it in production. It's also a great introduction to ffmpeg filter syntax, which really isn't that complex.
  - panabee 6y ago
    thanks! i just wanted to confirm your permission before posting on the repo. :) on a related note, do you have a command for converting HTML5 animations into webp or mp4 videos?
- fireattack 6y ago
  I just noticed you have one for "Create single-image video with audio". This seemingly easy task is actually pretty hard to get right with FFMPEG. Just leave a few notes here if anyone want to use that. Video part Chroma sampling Without any `pix_fmt` argument, FFMPEG defaults to 4:4:4 instead of typical 4:2:0. Which has very limited support (for example, Firefox doesn't support it.) To fix: add `pix_fmt yuv420p`, or chain a `format=yuv420p` vf at the end to your other vf(s). Color space FFMPEG by default uses BT.601 when converting your RGB images into YUV. This is an issue if your image / output video is in HD resolution. Almost all video players (including browsers) would assume BT.709 for anything >=720P. This causes color to shift in playback（255,0,0 would become 255,24,0). To fix: add `-vf zscale=matrix=709`. Note: there are some other video filters can do the same. The most famous being good ol' `scale` (based on libswscale). However, it has a notorious bug that would cause the color to shift on its own (becomes yellow) if the input is in BGR (all the `.bmp`s). See: https://trac.ffmpeg.org/ticket/979 https://trac.ffmpeg.org/ticket/979 So stick with better `zscale`. Framerate etc. You can set framerate with `-r` to a small number for both input (reading the same image X times per second) and output (since it's a still image, you can get away with very low framerate. `-tune stillimage` should also be used for (default) x264 encoder. In summary: ffmpeg -loop 1 -r 1 -i image.png -i audio.wav -r 1 -shortest -vf zscale=matrix=709,format=yuv420p -c:v libx264 -tune stillimage output_video.mp4 Audio part - length mismatch bug Even if we ignore all the image/video troubles above, `ffmpeg -loop 1 -i image.png -i sound.mp3 -shortest video.mp4` still doesn't work well. "-shortest" argument has a long-standing bug (https://trac.ffmpeg.org/ticket/5456 https://trac.ffmpeg.org/ticket/5456) that is the output video would be longer than your input audio (by quite a few seconds, worse if using -r 1). There are some workarounds (listed in the ticket) but they don't eliminate the issue entirely. Your best bet (if the length match is crucial) is to just convert the output video again and use -t to cut to the proper length.

eneve 6y ago

I use something similar in MetaMeme for Android

devadvance 6y ago
Are you using FFmpeg or directly using libavcodec (or similar)?

dheera 6y ago

Oh please no. Why would you ever do this? Please use the <video> 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? <video width="320" height="240" autoplay loop playsinline muted> <source src="foo.mp4" type="video/mp4"> <source src="foo.ogg" type="video/ogg">  <img src="foo.gif" width="320" height="240"> </video> With H.264 or any modern codec you'll get 24-bit color and smaller file sizes than GIF. It's better in every way I can imagine.

sp332 6y ago
Agreed. I think people see little video clips and think "oh, a GIF" without realizing that imgur, giphy, etc. don't actually use GIFs.
- ourcat 6y ago
  Also, twitter and Facebbok convert uploaded GIFs to video.
- pcr910303 6y ago
  While they might not know the specific term, they do know that something is different with those services b.c. they can’t save the ‘gif’ videos as easily as they can with real gifs.
superdisk 6y ago
GIFs are nice for short looping clips, because they can be embedded anywhere and they don't glitch out unexpectedly like every single "using videos as gifs" solution out there.
- xvilka 6y ago
  Animated WebPs also can do that but significantly better. And they are supported by all browsers now.

qwerty456127 6y ago

WTF is an animated WebP? Shouldn't it be just a normal WebM video?

jjcm 6y ago
Not necessarily, as it's treated differently by the browser. Animated WebPs will autoplay without a `muted` or `autoplay` attribute. Under the hood they're no different than a webm video, with the exception of no support for audio tracks.
- est31 6y ago
  > Under the hood they're no different than a webm video From a very high level point of view you are right. Yes, webm videos use vp8 and webp uses vp8 key frames, but there are still differences between animated webp and webm videos without sound. A webm video is a video with a vp8/vp9 video stream contained inside an mkv container, while webp files, including the animated ones, are inside RIFF containers. Also, webp's animation mode does not have the full inter frame system that vp8 has. It does support carrying over of state from one frame to the next, but does this in the simplest way possible: just paint the next frame over the prior one, respecting the alphas. Most importantly, those frames are still encoded like vp8 Intraframes (keyframes), not like vp8 Interframes [1]. So you won't need a full vp8 decoder to write an animated webp decoder. [1]: https://tools.ietf.org/html/rfc6386#section-3 https://tools.ietf.org/html/rfc6386#section-3
kupopuffs 6y ago
Isnt webp potentially lossless? and webm is a container for lossy codecs VP8/VP9?

jwalton 6y ago

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

Thaxll 6y ago

Better link with explanation: https://engineering.giphy.com/how-to-make-gifs-with-ffmpeg/ https://engineering.giphy.com/how-to-make-gifs-with-ffmpeg/

robertoandred 6y ago

Don’t use GIFs for videos.

empyrical 6y ago
I really hope that HEIF animations can take the place of GIFs someday. http://nokiatech.github.io/heif/comparison.html http://nokiatech.github.io/heif/comparison.html
- gruez 6y ago
  >I really hope that HEIF animations considering that HEIF is based on HEVC, wouldn't "HEIF animations" just be HEVC videos?
  - empyrical 6y ago
    Basically what this commenter said, but substitute WebP and WebM for HEIF and HEVC https://news.ycombinator.com/item?id=26298606 https://news.ycombinator.com/item?id=26298606 GIFs have a nice convenience to them that straight-up video files lack

tambourine_man 6y ago

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

devadvance 6y ago
If you're referencing the GIF of the terminal: it's a small docker image[0] I use to have a consistent demo environment. In this case, I'm running it within iterm on macOS. [0] https://github.com/devadvance/terminalcheatsheet/blob/staging/demo_env/Dockerfile https://github.com/devadvance/terminalcheatsheet/blob/stagin...
- tambourine_man 6y ago
  Ah, I see, thanks.

shmerl 6y ago

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's a relatively easy step in comparison to that cumbersome set up of dithering for gif generation. https://gif.ski https://gif.ski

forgingahead 6y ago

It'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: https://ffmpeg.org/donations.html https://ffmpeg.org/donations.html

pianoben 6y ago

Nice work! 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'm pleased to learn how to do it concisely.

power78 6y ago

Wasn't ffmpeg compiled using Web Assembly? So you could make a web app out of this.

habi 6y ago

I often use https://github.com/thevangelist/FFMPEG-gif-script-for-bash https://github.com/thevangelist/FFMPEG-gif-script-for-bash for achieving this. It's a little helper script that does pretty much what is given in the linked blog post.

geokon 6y ago

Yeah but this actually not very good. The good GIFs don't redraw the static areas of the image. You can see it in the keyboard gif As far as I know there is no automated tool to do it though. It's done manually by the meme lords 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 I'd actually be really interested to know if there is a better reference out there

arthur2e5 6y ago
There has been an automated tool to not redraw stuff for ages. It's called gifsicle, and you should absolutely give it a try. It also does very good lossy compression. https://www.lcdf.org/gifsicle/ https://kornel.ski/lossygif (merged into gifsicle) Even imagemagick's convert can the static stuff. As for the palette stage, that depends on ffmpeg to get things right. I find the guide at https://superuser.com/a/556031 https://superuser.com/a/556031 a lot more comprehensive.

bfoster 6y ago

could be useful https://freetools.site/video-editors/make-animation https://freetools.site/video-editors/make-animation

deleted 6y ago

[deleted]