网站优化实战：Windows 下配置 libwebp 批量转换图片
网站优化实战：Windows 下配置 libwebp 批量转换图片
小曹同学为什么要折腾 WebP？
平时折腾网站和博客的时候，经常需要上传各种高清配图。但原生的 PNG 或 JPG 图片体积往往偏大，这不仅白白消耗服务器的带宽和存储，还会严重拖慢网页的加载速度，导致访客体验极差。
有没有办法在肉眼看不出画质损耗的前提下，把图片体积压缩到极致？而且在 Windows 电脑上点个右键就能批量搞定？
Google 官方推出的 WebP 格式配合 libwebp 工具就能完美解决这个痛点。下面这篇保姆级教程，带你一次配置，日常无脑使用。
实战之前，可以先到又拍云 WebP 演示页，体验一波效果！
准备工作：下载与安置
1. 下载 libwebp 工具包
1. 前往官方下载页
点击下方卡片，前往 libwebp 下载页面。
若Google for Developers无法访问，可以前往小曹同学の网盘下载，并跳过第二步 。
2. 下载 Windows 版本
在页面中找到并点击 Download for Windows 进行下载。
2. 解压并安置文件
3. 移动到安全位置
下载完成后，解压压缩包。把解压出来的整个文件夹移动到一个不容易被误删的目录里（比如图中的 D:\Software）。
⚠️ 注意：这个文件夹是核心工具，后续配置好环境变量后，千万不能随意移动或删除它，否则转换命令会直接报错失效！
核心配置：设置环境变量
为了让电脑能随时随地识别我们的转换命令，需要把工具所在的路径“告诉”系统。
1. 提取工具路径
4. 打开 bin 文件夹
依次点开刚才安置好的 libwebp 文件夹，进入里面的 bin 文件夹。点击顶部地址栏的空白处。
5. 复制绝对路径
把显示的完整路径（例如 D:\libwebp-1.5.0-windows-x64\bin）复制下来。
2. 写入系统变量
6. 打开运行窗口
同时按下键盘的 Win + R 键，在弹出的提示框中输入 sysdm.cpl，然后回车。
7. 进入环境变量设置
在弹出的系统属性窗口中，点击顶部的“高级”选项卡，接着点击右下角的“环境变量”按钮。
8. 编辑 Path 变量
在下方的“系统变量”列表里，往下拉找到 Path 这一项，点击选中它，然后点下面的“编辑”。
9. 新建并粘贴路径
点击右侧的“新建”按钮，把刚才在第 5 步复制的 bin 文件夹路径粘贴进去。
10. 提升优先级
点击刚才新建好的这条路径，点击右侧的“上移”按钮，建议直接一直点，移到最顶上。
💡 提示：移到最上面可以确保系统优先读取我们的工具，避免跟其他软件起冲突。
11. 保存配置
依次点击这两个窗口底部的“确定”按钮，彻底完成配置。
实战演练：一键批量转换
环境配好之后，日常转换就只剩两步了。
1. 运行一键转换命令
12. 在终端中打开
找到你需要压缩的图片（JPG/PNG）所在的文件夹。在空白处点击右键，选择“在终端中打开”（Win10 用户可以选择“在此处打开 PowerShell 窗口”）。
13. 执行批量脚本
这里放两个我常用的命令，按需复制，粘贴到黑框终端里，敲回车！
1 | Get-ChildItem -Recurse -Include *.jpg,*.jpeg,*.png,*.JPG,*.JPEG,*.PNG,*.HEIC | ForEach-Object { $out = Join-Path $_.DirectoryName ($_.BaseName + '.webp'); cwebp -q 80 -metadata all $_.FullName -o $out } |
1 | Get-ChildItem -Recurse -Include *.jpg,*.jpeg,*.png,*.JPG,*.JPEG,*.PNG,*.HEIC | ForEach-Object { $out = Join-Path $_.DirectoryName ($_.BaseName + '.webp'); cwebp -size 102400 -pass 6 -metadata all $_.FullName -o $out } |
