I frequently find myself needing to create videos from a series of rendered frames. I have been using ffmpeg to generated mp4’s but it would be nice to be able to create GIF’s - or in this case animated WebP files. The biggest benefits of this are that I don’t need to rely on an external hosting service for the video and that they can be used anywhere an image is used.
To do this I’ll be using img2webp from the Google WebP image format tools.
Creating the Animated WebP File
Say I have a collection of images named in a sortable manner - for example:
frame-001.png frame-002.png frame-003.png ...
...
frame-075.png frame-076.png frame-077.png ...
...
frame-298.png frame-299.png frame-300.png
In this case I want to create a 10 second video (30 FPS) with the 300 frames listed above.
The input files must be lexically sorted for img2web to properly order them. A simple way to do this is using leading zeros.
The arguments I’ll use are:
| argument | value | meaning |
|---|---|---|
| -d | 33 | 33 ms per frame (1000 / 30) |
| -loop | 0 | Loops (0 is continuous) |
| frame-* | The file pattern (leading zero matters for sorting) | |
| -o | gen100.webp | Output file name |
img2webp -d 33 -loop 0 frame-* -o gen100.webp
It is not possible to resize an animated webp file using cwebp. If you want to resize the output you can either resize the inputs before creation or use `webpmux` to extract the individual frames from the animated webp file.
And the output is an animated WebP image file shown here:
Warning: Performance on iOS is Terrible
The following video shows the above animated webp playing on an iPhone XR (iOS 15.4) in Brave with the same experience in Safari. Notice that the performance isn’t just linearly bad - it seems to actually get worse as the image plays.