I wrote an article last year to teach you how to make GIF animations with FFmpeg. Today, when discussing a program crash caused by an .apng animation material encountered in the project, a student suggested: Why don't we use WebP instead of .apng? Yeah, why not?
I found an article online . I tried it myself and found that the powerful FFmpeg really supports the creation of WebP animations, so I made some notes.
Let's try this command first:
ffmpeg -ss 25 -t 5 -i D:\Media\bear.wmv -vf scale=240:-1 -r 10 -lossless 1 -loop 0 -y D:\bear-lossless.webp
Means: to D: \ Media source directory bear.wmv , from 25 start second position, taken 5 videos second length, the width of the screen scaling to 240 pixels, and controls the output frame rate is 10fps after transfection, Into a webp file, and finally saved as D:\bear-lossless.webp . Notice that we are using lossless compression ( -lossless 1 ) this time, and the generated animation is played in an infinite loop ( -loop 0 ).
When you can’t wait to find the freshly generated bear-lossless.webp file, double-click the mouse, and the system’s default viewing software pops up-er, why isn’t it an animation? Don't worry! That's just because the picture-viewing software you use is too slick. Drag the bear-lossless.webp file into the Chrome browser, and you will see the effect immediately!
Now that lossless compression is mentioned, let's try lossy compression again. At this time, qscale quality factor is used. Its value range is 0-100. The higher the value, the better the image quality. Let's try it with 80, the command line is as follows:
ffmpeg -ss 25 -t 5 -i D:\Media\bear.wmv -vf scale=240:-1 -r 10 -qscale 80 -loop 0 -y D:\bear-q80.webp
For comparison, we use the same video to generate a GIF animation, the command line is as follows:
ffmpeg -ss 25 -t 5 -i D:\Media\bear.wmv -vf scale=240:-1 -r 10 -y -f gif D:\bear.gif
After comparison, it is found that the lossless compressed bear-lossless.webp file is the largest, with 1.3MB; after using lossy compression, the bear-q80.webp file becomes much smaller, only 177KB; and the same smaller bear.gif file (only 154KB), the image quality is significantly worse than bear-q80.webp. What is the problem? The WebP compression algorithm is excellent!
Back to the actual software project, can the WebP we want to use be extracted from the video? This is usually not the case. Designers often make a series of static pictures corresponding to the complete animation process. So, how to generate a WebP animation from this picture sequence? In fact, it is very simple, the command line is as follows:
ffmpeg -f image2 -framerate 10 -i D:\Media\pics\cache_loading_%02d.jpeg -loop 0 -y D:\loading.webp
Means: Name the single-frame images of the animation created by the designer in the format of cache_loading_xx.jpeg, where xx is a continuous two-digit integer, and put these files in the same folder. After executing the above command, these static files will generate a WebP animation file D:\loading.webp at a frame rate of 10fps.
Great, just drag loading.webp into Chrome browser and have a look! Comparing the file size (loading.apng 81KB vs. loading.webp 42KB), it's almost reduced by half, full of surprises!
