Encoding WebP animated images with FFmpeg

FFmpeg, WebP, gif — Jan 22, 2022

I found myself having to encode a gif from a video for a project, but considering how big these gif files get I figured there had to be a better alternative. WebP is an image format created by google to be a modern replacement for both jpg and png. It also happens to support animated images. In this post I’ll go through the most common use cases for creating animated images using FFmpeg.

Prerequisites

Make sure you have FFmpeg installed. On Linux and macOS this is pretty easily done with the included package manager.

sudo apt-get install ffmpeg    # Debian based distros with APT 
sudo pacman -S ffmpeg          # Arch with pacman
sudo dnf install ffmpeg        # Fedora (requires RPMfusion repos)

brew install ffmpeg            # macOS using homebrew.

On Windows you can download a static build from https://www.ffmpeg.org/download.html OR you can use the Windows Subsystem for Linux (WSL) with the Linux distro of your choice, if you’re using Ubuntu on Windows version you can then just run apt-get install ffmpeg to install it.

Note: If you’re using the static build you need to add the location of the FFmpeg bin/ folder to your environment path variable to be able to use it from anywhere. And type ffmpeg.exe instead of just ffmpeg.

Lossy encoding

ffmpeg -i "input.mp4" -ss 00:01:00 -t 5 -vcodec libwebp -loop 0 -vf "fps=15, scale=720:-1" "output-lossy.webp"

We’ll specify the starting point of our webp with the -ss hh:mm:ss option and the duration with -t 10 meaning 10 seconds. You can use -to 00:01:10 if you want to specify the end time instead of duration.

-vf "fps=15, scale=720:-1 sets the frame rate to 15 and we scale down the video to a width of 720 pixels and tell FFmpeg to preserve the aspect ratio by setting the height to -1.

-loop 0 means that the animated image should loop forever, set it to 1 to disable looping.

Even with the default settings we’re getting very good quality and the file size is under 1MB.

Lossy encoding with higher quality

ffmpeg -i "input.mp4" -ss 00:01:00 -t 5 -vcodec libwebp -loop 0 -vf "fps=15, scale=720:-1" -compression_level 6 -quality 90 "output-lossy90.webp"

-compression_level 6 a higher number will increase the quality of the animation at the cost of extra processing time. The default is 4, the valid range is 0 to 6.

-quality 90 controls the image quality for lossy compression, the default is 75.

Slightly better quality at the cost of a higher file size (2MB) and processing time.

Lossless compression

ffmpeg -i "input.mp4" -ss 00:01:00 -t 5 -vcodec libwebp -loop 0 -vf "fps=15, scale=720:-1" -lossless 1 "output-lossless.webp"

-lossless 1 enables lossless compression. This will increase the file size of the file dramatically. By setting the -compression_level higher here will reduce the file size, but at the expense of extra cpu power.

We can see that the file size is significantly bigger at 13.6MB. So for most use cases it’s probably better to just tweak the quality and compression levels and sticking to the lossy compression method instead.

That should cover the most common use cases for creating an animated WebP file, if you wanna read more about the encoding options you can do so here

Thanks for reading and happy encoding.