Convert frames to WebP, then use webpmux

The webpmux program comes with Google’s reference library for WebP, namely libwebp, which you can install through your package manager if not present yet. Its man page reads:

webpmux — create animated WebP files from non-animated WebP images, extract frames from animated WebP images, and manage XMP/EXIF metadata and ICC profile.

If your individual frames are in another format, you’ll first need to convert them to WebP. For this task you can use ImageMagick (more options here—be sure to disable lossy compression unless you want it):

convert frame001.png -define webp:lossless=true frame001.webp

Then you can combine frames using webpmux. The syntax is the following, where the capitalized words are placeholders:

webpmux \
  -frame frame001.webp +D1+X1+Y1+M1±b \
  -frame frame002.webp +D2+X2+Y2+M2±b \
  -frame frame003.webp +D3+X3+Y3+M3±b \
  [-loop L]  [-bgcolor A,R,G,B] \
  -o animation.webp

Each frame expects a number of settings. All of them but the duration can be left implicit.

• Di is the duration of the frame, in milliseconds.
• (Xi, Yi) is the spatial offset of the frame in the canvas (counting from the top-left corner, X going right and Y going down).
• Mi is the dispose method for this frame, in other words what to do once this frame has expired. It has two possible values:
  • 0: do not dispose, leave the canvas as-is;
  • 1: dispose, i.e. clear the canvas and fill it with background (consumes energy, for that matter).
• ±b is the blending method for this frame, which specifies how to superimpose this frame on top of the existing canvas (it is only relevant when the frame has an alpha channel, otherwise it overwrites what is below it anyway). This parameter has two possible values:
  • -b: do not blend, the frame overwrites the existing canvas;
  • +b: use alpha blending, the frame combines with the existing canvas.

Then come the optional settings that apply to the animation as a whole:

• -loop L specifies the number L of times to play the animation. You’ll probably want it to be infinite, which is meant by -loop 0, which is the default value.
• -bgcolor A,R,G,B specifies the background color. The values of the four components (alpha, red, green, blue) range from 0 to 255. Viewers may use this color as a background for the canvas, so that the canvas is opaque, but they are not required to; in practice the canvas is overlayed on top of other elements, as in a web page for example, and I have not seen this color used.

See also the WebP specification about animations.

Final tip: since the command line options for each frame are more than just the input file name, you cannot use a wildcard like frame*.webp directly and writing the command line proves cumbersome. Thankfully, you can use your shell to build the command line, e.g with Bash:

frames=( )
for f in frame*.webp ; do
    frames+=( -frame "$f" +100+0+0+0+b )
done
webpmux "${frames[@]}" -o animation.webp

The example above creates an animation whose frames are all images matching frame*.webp, have a duration of 100 ms, have no spatial offset, and combine with the previous frames (use alpha blending for new frames and do not dispose of them afterwards).