Skip to content

Instantly share code, notes, and snippets.

@phripley
Forked from witmin/ffmpeg-mp4-to-animated-webp.md
Last active October 7, 2021 21:19
Show Gist options
  • Save phripley/9aaa35e13140e63ecce3d7392d688dd7 to your computer and use it in GitHub Desktop.
Save phripley/9aaa35e13140e63ecce3d7392d688dd7 to your computer and use it in GitHub Desktop.
Convert MP4 file to animated WebP in ffmpeg

Convert MP4 file to animated WEBP file in ffmpeg CLI

1. Install ffmpeg CLI through homebrew

In terminal.app, install ffmpeg through homebrew

brew install ffmpeg

Validate the installation:

which ffmpeg

Expect to see terminal returns the directory path of ffmpeg such as /usr/local/bin/ffmpeg

2. Set webp properties and convert

Example command which would convert an mp4 file to a lossless loop playing webp file in 20FPS with resolution 800px(width) * h600px(height):

ffmpeg -i input_filename.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 1 -loop 0 -preset default -an -vsync 0 -s 800:600 output_filename.webp

Export an animated lossy WebP with preset mode picture:

ffmpeg -i input.mp4 -vcodec libwebp -filter:v fps=fps=20 -lossless 0  -compression_level 3 -q:v 70 -loop 1 -preset picture -an -vsync 0 -s 800:600 output.webp

Export an looping animated lossy WebP with preset mode default, with multiline and commented:

# turn on commenting in zsh
setopt interactivecomments

# commented command to convert a mp4 to a webp with compression decent settings
ffmpeg -i input.mp4 \
  -vcodec libwebp \
  -filter:v fps=fps=10 `#10 frames per second seems about right` \
  -lossless 0 `#lets have lossy compression` \
  -compression_level 6 `#this really just controls how many algorithms are used, doesn't seem to matter` \
  -q:v 50 `#quality of 50 seems about right` \
  -loop 0 `#loop all the things!` \
  -preset default `#hint at the type of image` \
  -an \
  -vsync 0  \
  -s 600:294 `#optional resize w:h` \
  output.webp

primary options:

  • set frame per second as 20: -filter:v fps=fps=20
  • set output file lossless: -lossless 1
  • set output webp file loop play: -loop 0. For non-loop, use -loop 1
  • set rendering mode -preset default , can set as picture, photo, text, icon, drawing and none as needed. It would effect output file size. http://ffmpeg.org/ffmpeg-all.html#Options-28
  • set output webp resolution as w800px * h600px -s 800:600

For more option details, please visit the the ffmpeg libwebp documentation

This method should applicable for majority video formats including .mov, .avi, .flv, etc. as input files as well as .gif format as output file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment