最近想在网站放一个贴片广告，Lighthouse 工具检测到并推荐使用 WebP 格式的图片，这样更加节省资源。
之前了解过几个网站，可以转换图片为 WebP 格式，比如：Convertio、又拍云等。
Convertio 转换之后稍微大一些，又拍云压缩比特别高，能达到 90% 多，他们都有一个共同点，就是会失真，不过问题不大。
下面记录一下用命令行转换图片为 WebP 格式，以及在页面中使用 WebP 图片并兼容不支持 WebP 的老版本浏览器的方法。
命令行工具图片转 WebP 格式：
首先安装 WebP 命令行工具，在链接页面下载工具包，并解压到软件安装常用的目录，比如我解压后的目录是 D:Program Fileslibwebp-1.3.2-windows-x64。
添加环境变量，Windows 11 用户，Win Q 键搜索“环境变量”，会显示“编辑系统环境变量”选项，打开会弹出“系统属性”窗口，点击右下角的环境变量。
找到变量 Path，双击编辑，新建一条 D:Program Fileslibwebp-1.3.2-windows-x64bin，确定保存。
命令行就可以开始工作了。
打开命令行，通过 cwebp 命令，就可以转换图片了：
代码语言：javascript复制cwebp -q 50 images/flower1.jpg -o images/flower1.webp此命令的含义是以 50 的质量（0-100 是最佳）转换 images/flower1.jpg 文件，并将其保存为 images/flower1.webp。
注意 ：WebP 具有两个单独的命令，分别用于对 WebP 图片进行编码和解码。cwebp 可将图片编码为 WebP 格式，而 dwebp 可将图片解码为 WebP 格式。
执行此命令后，应该会在控制台中看到如下内容：
代码语言：javascript复制Saving file 'images/flower1.webp'
File: images/flower1.jpg
Dimension: 504 x 378
Output: 29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12 35.09 dB
(1.24 bpp)
block count: intra4: 750 (97.66%)
intra16: 18 (2.34%)
skipped: 0 (0.00%)
bytes used: header: 116 (0.4%)
mode-partition: 4014 (13.6%)
Residuals bytes |segment 1|segment 2|segment 3|segment 4| total
macroblocks: | 22%| 26%| 36%| 17%| 768
quantizer: | 52 | 42 | 33 | 24 |
filter level: | 16 | 9 | 6 | 26 |现在图片已经转换为 WebP 格式。
但是，这样一次只能转换一张图片。可以使用以下命令批量转换。（不要忘记使用反引号）：
代码语言：javascript复制`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`此命令会以 50 质量转换 images/ 目录中的所有图片，并将它们另存为同一目录中的新文件（文件名相同，但文件扩展名为 .webp）。
现在，images/ 目录中应该有 6 个文件：
flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp使用 <picture> 标签添加 WebP 图片（老版本浏览器兼容）：
利用 <picture> 标签，在较新版浏览器显示 WebP 文件，同时继续支持旧版浏览器。
将 <img src="images/flower1.jpg"/> 替换为以下内容：
<picture>
<source type="image/webp" srcset="images/flower1.webp">
<source type="image/jpeg" srcset="images/flower1.jpg">
<img src="images/flower1.jpg">
</picture>接下来，使用 Lighthouse 验证一下，是不是可以上通过 WebP 图片检测了。
未经允许不得转载：Web前端开发资源网 » Windows命令行转换生成WebP图片及老版本浏览器支持
