Create animated GIF and WebP from videos using FFmpeg

A guide to using FFmpeg to create all the animated content you want.

Whether it’s for a website, a presentation, or sharing a fun clip with a friend on chat, you might want to convert a video to an animated GIF or animated WebP. Unfortunately, the visual tools for doing this vary by your operating system. Additionally, most conversion tools don’t support the WebP format, even in 2021. WebP is based on VP8, a relatively recent video codec standard compared to the GIF image format.

So, this guide is for those who are willing to learn a bit of terminal in order to convert any video to the animated format of their choosing. The best part: this will work on all major operating systems and gives you all the control of the output you could want!

Example GIF of typing “GIF” on a mechanical keyboard

Let’s get started!

Prerequisites

To use this guide, you will need the following:

• Basic knowledge of how to open and use the terminal on your operating system. If you need a cheat sheet or introductory guides, check out Terminal Cheat Sheet.
• FFmpeg v4+ installed on your operating system and executable from your path. Here are some suggested places to learn down to do this:
  • macOS: https://superuser.com/a/624562
  • Windows: https://video.stackexchange.com/a/20496
  • Linux: Use your preferred package manager (e.g., sudo apt install ffmpeg on Ubuntu)

What is FFmpeg?

From Wikipedia:

FFmpeg is a free and open-source software project consisting of a large suite of libraries and programs for handling video, audio, and other multimedia files and streams.

For our purposes, we will use it to convert between formats, such as videos to GIFs or animated WebP. It has many uses, so I recommend checking it out for all your video processing needs!

Before you start: make sure you can run FFmpeg from your terminal

Since all of these commands require FFmpeg, we need to make sure it’s available.

Open your terminal, and run this:

ffmpeg -version

If FFmpeg is available, you will note output similar to this:

FFmpeg version 4.3.1 Copyright © 2000–2020 the FFmpeg developers
...

Checking the FFmpeg version on Linux

Version 4 or higher of FFmpeg is recommended for this guide.

If you get an output that says something similar to command not found: ffmpeg -version, then check the Prerequisites section above and make sure you have FFmpeg installed on your system.

Convert to an animated GIF using FFmpeg

Convert a whole video to GIF

Base command

This is the base command with various options for converting an entire video to an animated GIF. You can use options like FPS or output width to determine the file size and quality of your output:

Example usage of this command

Here is an example of this command with the input options filled out:

Convert part of a video to GIF

Base command

This is the base command with various options for converting part of a video to an animated GIF:

Example usage of this command

Here is an example of this command with the input options filled out:

Convert to an animated WebP using FFmpeg

Convert a whole video to animated WebP

Base command

This is the base command with various options for converting an entire video to an animated WebP. You can use options like FPS, output width, and quality to determine the file size and quality of your output:

Example usage of this command

Here is an example of this command with the input options filled out:

Convert part of a video to animated WebP

Base command

This is the base command with various options for converting part of a video to an animated WebP:

Example usage of this command

Here is an example of this command with the input options filled out:

When should I use an animated GIF versus an animated WebP?

This depends on the quality, size, and support you want for your output. Modern browsers have support for animated WebP and the quality tends to be higher, but the processing power required is also higher.

Next steps

This guide serves as a brief introduction to using FFmpeg to create an animated GIF or animated WebP from a video, but there is so much more you can do with the tool. There are also many options that FFmpeg supports for these formats that are not covered.

You can also get the code for all the commands and examples in one place by visiting the GitHub Gist here.

An icon representing the GIF format

If you liked this post, let me know, and share it with others!

If you’re interested in reaching out, check my website, LinkedIn, GitHub, and many other platforms.