Windows命令行转换生成WebP图片及老版本浏览器支持

最近想在网站放一个贴片广告，Lighthouse 工具检测到并推荐使用 WebP 格式的图片，这样更加节省资源。

之前了解过几个网站，可以转换图片为 WebP 格式，比如：Convertio、又拍云等。

Convertio 转换之后稍微大一些，又拍云压缩比特别高，能达到 90% 多，他们都有一个共同点，就是会失真，不过问题不大。

下面记录一下用命令行转换图片为 WebP 格式，以及在页面中使用 WebP 图片并兼容不支持 WebP 的老版本浏览器的方法。

命令行工具图片转 WebP 格式：

首先安装 WebP 命令行工具，在链接页面下载工具包，并解压到软件安装常用的目录，比如我解压后的目录是 D:\Program Files\libwebp-1.3.2-windows-x64。

添加环境变量，Windows 11 用户，Win + Q 键搜索“环境变量”，会显示“编辑系统环境变量”选项，打开会弹出“系统属性”窗口，点击右下角的环境变量。

找到变量 Path，双击编辑，新建一条 D:\Program Files\libwebp-1.3.2-windows-x64\bin，确定保存。

命令行就可以开始工作了。

打开命令行，通过 cwebp 命令，就可以转换图片了：

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 格式。

执行此命令后，应该会在控制台中看到如下内容：

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 格式。

但是，这样一次只能转换一张图片。可以使用以下命令批量转换。（不要忘记使用反引号）：

`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 图片检测了。

未经允许不得转载：前端资源网 - w3h5 » Windows命令行转换生成WebP图片及老版本浏览器支持