png序列帧转换WebP动画

最新推荐文章于 2025-09-26 06:06:26 发布

原创最新推荐文章于 2025-09-26 06:06:26 发布 · 2.2w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#webp #android

android 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用img2webp工具将PNG序列帧文件转换为WebP动画，并提供了一个shell脚本以简化转换流程。

最近项目要用webp格式展示动画（webp格式的优点在这我就不说了，baidu很多），由于UI同学无法给予我们支持，只能给我们png序列帧文件，所以接下来的事情需要开发自己转换，所有有了这篇的总结：进入正题

对于png 、jpg、 gif 等格式转换webp ,google给提供了命令行工具，下载地址：https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html
可以找到对应系统版本，在这里我用的是libwebp-1.0.0-rc2-mac-10.13.tar.gz ，所以我是在mac 环境下进行操作的

工具介绍

下载下来后，解压文件夹，目录如下：
这里写图片描述

bin文件夹下就是给我们提供的工具：

这里写图片描述

这些方法我不是全部了解，只知道常用的：cwebp、dwebp、gif2webp、imag2webp、webpmux

但是它给我们提供了doc和README文档，里面都有对工具的说明，我看的是根目录下的README文档，里面是说明的集合

由于我这次要找的是png序列帧转换webp动画，所以我在文档中找到了这样一个方法：

Animation creation tool:
========================
The utility 'img2webp' can turn a sequence of input images (PNG, JPEG, ...)
into an animated WebP file. It offers fine control over duration, encoding
modes, etc.

Usage:  //使用

  img2webp [file-level options] [image files...] [per-frame options...]

//还给了例子
example: img2webp -loop 2 in0.png -lossy in1.jpg -d 80 in2.tiff -o out.webp

意思就是：img2webp可以转换图像序列(PNG, JPEG等格式)
进入一个动画的WebP文件

见到这句话感觉眼都亮了，赶快试一下效果

工具的安装：

先配置下环境变量，配置到bin，bin下所有工具都可以使用，下面是我存放的位置，需要替换成自己的

export WEBP=/Users/jiangshujing/Downloads/libwebp-1.0.0-mac-10.13/bin

//将WEBP 添加到PATH中
export PATH=${PATH}:${ANDROID_HOME}/platform-tools:${ANDROID_HOME}/tools:${JAVA_HOME}:${WEBP}

配置完成后，就可以用这些工具了，
我们打开终端，输入命令
如：

img2webp -loop 0 -lossy imag1.png imag2.jpg imag3.jpg -o out.webp

ok webp动画转换搞定了

操作符：

File-level options (only used at the start of compression):
 -min_size ............ minimize size
 -loop <int> .......... loop count (default: 0, = infinite loop)
 -kmax <int> .......... maximum number of frame between key-frames
                        (0=only keyframes)
 -kmin <int> .......... minimum number of frame between key-frames
                        (0=disable key-frames altogether)
 -mixed ............... use mixed lossy/lossless automatic mode
 -v ................... verbose mode
 -h ................... this help
 -version ............. print version number and exit

Per-frame options (only used for subsequent images input):
 -d <int> ............. frame duration in ms (default: 100)
 -lossless  ........... use lossless mode (default)
 -lossy ... ........... use lossy mode
 -q <float> ........... quality
 -m <int> ............. method to use

快速输出webp 脚本文件

由于序列帧比较多，不能手动一个一个敲，我写了个shell脚本，可以直接使用（对shell 不是很熟悉，不过功能可以实现）

一下为shell脚本内容，之后我会上传的

read -p "Please input directory path : " path
echo "directory path is :" $path

filelist=`ls $path`
echo $path  
imgs=''
#echo $path
for file in $filelist
do 
#这里只操作png文件
if [ -f $file ] && [ "${file##*.}" = "png" ]
then

imgs=$imgs$file" "
fi
done
img2webp -loop 0 -lossy $imgs -o $path"/"out.webp #执行命令

shell 脚本使用（img2webp.sh）

在终端中执行 img2webp.sh 文件，提示输入要转换的序列帧文件夹路径，然后回车，会在根目录生成out.webp文件，ok了

$ /Users/jsj/Desktop/img2webp.sh 

Please input directory path : /Users/jsj/Downloads/imags

方法二

png序列帧转换webp动画，除了使用goolge提供的img2webp 工具，还可以使用 cwebp + webpmux，先将png文件通过cwebp工具分别进行转换为webp静态序列，质量压缩等自己可以根据需求转换，然后在用webpmux 工具，将所有的webp静态序列打包成webp动态动画，这个过程我也有写成shell脚本，名字为webpmux.sh ,使用方法同img2webp.sh一样

此方法是通过 https://www.jianshu.com/p/8dc745523e03 给出的办法，在这里也谢谢作者

对于webp文件，Android用Fresco加载的

工具地址：https://download.youkuaiyun.com/download/hjiangshujing/10449690