PNG转WEBP格式的动态图

最近接手的项目上需要替换以前的UI资源，其中有部分动态图使用的是freso+webp进行显示，然而设计给的只有一帧帧的PNG格式，本来想随便转个GIF弄上去，结果透明背景的PNG转成GIF很容易出现白色毛边，这样在非白色背景下显示会非常粗糙，于是找了几种转换的办法，发现还是直接生成webp比较符合要求，webp胜在图片清晰，体积还小（相对），于是搜到了某博主的文章（链接在文末，本文旨在补充并记录），了解到了google官方的这个webp转换工具，其中就有img2webp这个方法可以实现用图片合成动态webp，掌握了之后发现如此轻松简单，步骤如下

1.首先下载libwebp工具包

工具包下载链接：https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html（直接拉到最下面 ，下载对应操作系统的版本压缩包，带no字样的应该是缩减版，这里我用的是libwebp-1.1.0-windows-x64.zip）

bin目录截图

2.然后复制这个bin目录全路径  打开环境变量-系统变量 在Path变量里添加复制的路径，点击确定

压缩包附带了英文的使用文档，img2webp使用方法如下，需要直接看生成步骤的请略过

 

3.由于我这里的PNG数量比较多，所以参考了博主的bat批处理，实测没问题（前提是环境变量配置OK），如果是少数图片可以直接使用如上命令行，图片较多可以放在一个全英文的目录中，然后修改图片名称为带顺序的数字，10张以上请从100开始命名，否则命令执行顺序会乱，更多的图片同理，命名结尾的数字需要大一位，bat命令如下：

 

@echo off
setlocal enabledelayedexpansion

set SrcFolder=D:\ProgramFiles\testwebp\pic_rocket_light
set DstFolder=D:\ProgramFiles\testwebp\pic_rocket_light\webp
set imgs= 
for /f "delims=\" %%a in ('dir /b "%SrcFolder%\*.png*"') do (
  echo %%a
  set "imgs=!imgs!"%%a" "
)
echo %imgs%
set /a loop = 0
set /a time = 40
set /a q = 65
cd /d %SrcFolder%


 
img2webp -v -loop %loop% -lossy -q %q% -d %time%  %imgs% -o %DstFolder%\out_quality%q%_loop%loop%_frametime%time%.webp


pause

上面有三行 img2webp 命令  分别输出了有损、无损、混合质量的webp，有时候（比如图片少、像素少）会出现无损webp比有损的体积更小，所以用哪种自行判断，图片不多可以直接生成三种再进行选择

img2webp -v -loop %loop% -lossy -q %q% -d %time%  %imgs% -o %DstFolder%\out_quality%q%_loop%loop%_frametime%time%.webp

img2webp -v -loop %loop% -lossless -d %time%  %imgs% -o %DstFolder%\out_lossless_loop%loop%_frametime%time%.webp

img2webp -v -loop %loop% -mixed -d %time%  %imgs% -o %DstFolder%\out_mixed_loop%loop%_frametime%time%.webp

4.新建txt文件复制如上命令，保存并修改后缀为bat，就可以直接双击使用了，弹出的cmd窗口会显示完成状态

这时候再去看输出的目录，就会发现对应生成的webp文件了，在电脑上需要用浏览器打开预览，至此，就可以直接拿到项目里取用啦！

失败记录：Frame #1 dimension mismatched! Got 29 x 17. Was expecting 29 x 19.

原因：有图片尺寸不一致，是无法转换成功的，需要找设计重新给图，尺寸大小需要一模一样