Programster's Blog

Tutorials focusing on Linux, programming, and open-source

FFMPEG - Create WebP Animated Images

FFmpeg WebP

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

Copy to clipboard

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

Copy to clipboard

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

Last updated: 8th August 2022
First published: 28th February 2021

This blog is created by Stuart Page

I'm a freelance web developer and technology consultant based in Surrey, UK, with over 10 years experience in web development, DevOps, Linux Administration, and IT solutions.

Need support with your infrastructure or web services?

Get in touch
Programster's Blog Ⓒ 2025