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 arguments I’ll use are:
|-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
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.