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 命令,就可以转换图片了:

代码语言: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 个文件:

代码语言:javascript
复制
flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

使用 <picture> 标签添加 WebP 图片(老版本浏览器兼容):

利用 <picture> 标签,在较新版浏览器显示 WebP 文件,同时继续支持旧版浏览器。

<img src="images/flower1.jpg"/> 替换为以下内容:

代码语言:javascript
复制
<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图片及老版本浏览器支持