1. 什么是WebP
WebP（发音： weppy ）是谷歌2010年发布的一种新的图片格式，可为 Web 上的图像提供卓越的无损和有损压缩。 使用 WebP，网站管理员和 Web 开发人员可以创建更小、更丰富的图像，从而使 Web 更快。
- 同样的分辨率，大小比 jpg、png 小 25% 以上；
- Chrome、Firefox、Edge、Opera 等都支持此格式。
2. WebP如何使用
2.1. 下载
下载对应平台软件包，软件包中包含 png/jpg 与 webp 相互转换的工具以及开发所需的库和头文件。
下载链接地址为：https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html
- Windows版本：libwebp-1.2.3-windows-x64.zip
- Linux版本：libwebp-1.2.3-linux-x86-64.tar.gz
- Mac版本：libwebp-1.2.3-mac-x86-64.tar.gz
2.2. 安装
以Windows版本为例，下载完成后解压至某个路径下，然后将其中的bin目录路径添加至环境变量path下即可：
bin目录下的文件有：
2.3. 工具介绍
1) cwebp
用于将其他格式图片转换为 WebP，支持的格式有：PNG、JPEG、TIFF、WebP 或原始 Y'CbCr 样本。
cwebp [options] -q quality input.png -o output.webp
其中option可选：-loss(有损压缩，默认），-lossless(无损压缩）
-q：质量指数（压缩率），有损压缩有效，无损压缩忽略
input.png：待转换图片
-o：输入图片名称格式。2) dwebp
将 WebP 转换为图像，支持的格式有：JPG、PNG、PAM、PPM 或 PGM 图像。
dwebp input.webp -o output.png -quiet
其中input.webp表示输入webp文件，output.png表示输出png文件，-quiet表示静默模式（不输出打印信息）3）gif2webp
将 GIF 图像转换为 WebP。
gif2webp picture.gif -o picture.webp4) img2webp
从输入图像序列创建动画 WebP 文件，支持的格式有：PNG、JPEG、TIFF 或 WebP。
img2webp -loop 2 in0.png -lossy in1.jpg -d 80 in2.tiff -o out.webp具体用法参见：第三章节。
4) vwebp
解压缩 WebP 文件并使用 OpenGL 在窗口中显示它。
vwebp input.webp 或者 vwebp input.webp -info
其中input.webp表示输入webp文件，-info表示打印信息。5) webpinfo
用于输出webp文件信息
webpinfo input.webp
其中input.webp表示输入webp文件。2.4. png/jpg 与 Webp 相互转换
-
webp 转 png/jpg
dwebp xxx.webp -o xxx.png dwebp xxx.webp -o xxx.jpg -
3、png/jpg 转 webp
cwebp -q 100 xxx.png -o xxx.webp cwebp -q 100 xxx.jpg -o xxx.webp -
批量 webp 转 png
find ./ -name "*.webp" -exec dwebp {} -o {}.png;
3. 将多张图片制作成WebP
原因：有图片尺寸不一致，是无法转换成功的，需要找设计重新给图，尺寸大小需要一模一样。
3.1. 下载imagemagic
下载地址：https://imagemagick.org/script/download.php#windows
3.2. 安装imagemagic
点击exe程序进行安装
3.3. 使用 magick mogrify 命令修改图片尺寸
D:\tools\ImageMagick-7.1.0-Q16-HDRI\magick.exe mogrify -resize 1910x930! *.png注意1910x930中间是小写字母x，不是*号。!表示要将图像调整为特定尺寸而又不保持原始图像的宽高比。
具体用法参见官方网站：https://imagemagick.org/script/mogrify.php
使用ImageMagick调整图像大小：https://blog.csdn.net/cukw6666/article/details/107984135
3.4. 使用 img2webp 命令将图片合并成动图
img2webp -loop -0 -lossy 1.png -d 1000 2.png -d 1000 3.png -d 1000 4.png -d 1000 5.png -d 1000 6.png -d 1000 7.png -d 1000 8.png -d 1000 9.png -d 1000 10.png -d 1000 11.png -d 1000 12.png -d 1000 13.png -d 1000 -o output.webp4. 将视频文件制作成webP
主要使用 ffmpeg 工具将视频
4.1. ffmpeg工具下载与安装
下载地址：https://github.com/BtbN/FFmpeg-Builds/releases/tag/latest
- Linux版本：ffmpeg-master-latest-linux64-gpl-shared.tar.xz
- Windows版本：ffmpeg-n5.1-latest-win64-gpl-shared-5.1.zip
windows安装方法是：下载解压至本地文件，然后添加到环境变量
打开cmd窗口，输入ffmepg即可开启。
其他操作系统的安装方法见：https://blog.csdn.net/weixin_44704985/article/details/109532224
4.2. 使用 ffmpeg 将视频分割成图片
D:\tools\ffmpeg\bin\ffmpeg.exe -i 20220805_181425.mp4 -ss 00:00:00 -y -f image2 -vf fps=1.6 -s 1920*1080 -qscale:v 4 .\images\%d.jpg参数含义：
| 参数 | 含义 |
|---|---|
| -i | 表示抽帧的视频 |
| -ss | 表示抽取视频的开始时间 |
| -t | 表示抽取的时间长度 |
| fps | 帧率，表示每秒钟从视频中抽取多少帧形成图片 |
| -s | 表示视频的长宽 |
| -y | 覆盖输出文件，即如果文件已经存在的话，不经提示就覆盖掉了 |
| -f fmt | 指定格式(音频或视频格式) |
其他参数见：https://www.jianshu.com/p/049d03705a81
4.3. 最后再利用 img2webp 命令将图片合并成动图
img2webp -loop 0 -lossy 1.jpg -d 300 2.jpg -d 300 3.jpg -d 300 4.jpg -d 300 5.jpg -d 300 6.jpg -d 300 7.jpg -d 300 8.jpg -d 300 9.jpg -d 300 10.jpg -d 300 11.jpg -d 300 12.jpg -d 300 13.jpg -o output.webp参数含义：
| 参数 | 含义 |
|---|---|
| -loop | 代表循环，0就是一直循环，1是重复1遍 |
| -d | 表示每张图片展示的时间长度，单位：毫秒 |
| -lossless, -lossy | 使用无损或有损压缩模式压缩下一个图像。默认模式是无损的。 |
| -o | 输出到文件 |
4.4. Windows生成动图的Bat脚本
@echo off & setlocal EnableDelayedExpansion
set path=%~dp0
set file_name_str=
cd %path%
mkdir \images
D:\tools\ffmpeg\bin\ffmpeg.exe -i 20220805_181425.mp4 -ss 00:00:00 -y -f image2 -vf fps=4 -s 1920*1080 -qscale:v 4 .\images\%%d.jpg
rem Create an array with filenames in right order
cd %path%images
for %%f in (*.jpg) do (
for /F "delims=-" %%n in ("%%f") do (
set "number=00000%%n"
set "file[!number:~-6!]=%%f"
)
)
rem Process the filenames in right order
for /F "tokens=2 delims==" %%f in ('set file[') do (
set file_name_str=!file_name_str! %%f, -d 300
)
set "file_name_str=%file_name_str:,= %"
D:\tools\libwebp\bin\img2webp.exe -loop 0 -lossy %file_name_str% -o output.webp
pause附录：WebP图片展示
