最近想在网站放一个贴片广告,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 图片检测了。
未经允许不得转载:Web前端开发资源网 » Windows命令行转换生成WebP图片及老版本浏览器支持