FFMPEG - Create WebP Animated Images

I wanted to find an animated image format that would allow me to have a larger, better quality image, than what I can achieve with GIF.

This is how one can use Ffmpeg to convert a short video into a WebP animated image.

Steps

Copy, paste, and execute the script below after having tweaked the variables at the top to match your needs.

#!/bin/bash

# Specify the path to the video you wish to convert to an animated webp.
INPUT_VIDEO=input.mp4

# Set framerate of animated image.
FRAMERATE=30

# Set output width/height
WIDTH=800
HEIGHT=450

# Set compression of webp images between 1-100 with 100 being perfect.
QUALITY=60

ffmpeg \
  -i $INPUT_VIDEO \
  -vcodec libwebp \
  -preset default \
  -loop 0 \
  -an -vsync 0 \
  -vf "fps=$FRAMERATE, scale=$WIDTH:$HEIGHT" \
  -qscale $QUALITY \
  output.webp

If you need a script that will first extract the appropriate clip from your video, use the following instead:

#!/bin/bash

# Specify the path to the video you wish to convert to an animated webp.
INPUT_VIDEO=myVideoFile.mkv

# Specify the start time of the video that the clip should be taken e.g. 1 minute and 10 seconds in
START_TIME="00:01:10"

# Specify the length of time for the clip. E.g. 10 seconds
LENGTH_TIME="00:00:10"

# Specify the name for the generated animated image.
OUTPUT_FILENAME=myGeneratedFile.webp


ffmpeg \
  -ss $START_TIME \
  -t $LENGTH_TIME \
  -i $INPUT_VIDEO \
  -vcodec copy \
  -acodec copy \
  /tmp/clip.mkv

# Set framerate of animated image.
FRAMERATE=30

# Set output width/height
WIDTH=800
HEIGHT=450

# Set compression of webp images between 1-100 with 100 being perfect.
QUALITY=60

ffmpeg \
  -i /tmp/clip.mkv \
  -vcodec libwebp \
  -preset default \
  -loop 0 \
  -an -vsync 0 \
  -vf "fps=$FRAMERATE, scale=$WIDTH:$HEIGHT" \
  -qscale $QUALITY \
  $OUTPUT_FILENAME

Below is an animated WebP image I managed to create that would fit within Discord's 8 MB file limit:

Unfortunately, it appears that Discord does not currently support WebP images, but they did in the past.

Gif Comparison

I converted the video to a GIF as well for comparison (below), which resulted in a larger file and a much poorer quality.

References

• Super User - How do i generate Webp preview animations using FFMPEG