Guide
如何将图片转换为WebP：完整分步指南
将图片转换为WebP很简单，可以显著提升网站性能。本指南涵盖将图片转换为WebP格式的多种方法。
方法一：在线转换器（最简单）
使用像本站这样的在线转换器是将图片转换为WebP最简单的方式：
- 1上传图片 - 拖放或点击选择文件
- 2调整质量设置 - 选择1-100%质量
- 3转换 - 点击转换按钮
- 4下载 - 单独下载WebP文件或打包为ZIP
优势：无需安装软件，适用于任何设备，支持批量转换。
方法二：使用图片编辑软件
›Photoshop
- 1在Photoshop中打开图片
- 2转到文件 → 存储副本
- 3从格式下拉菜单中选择「WebP」
- 4调整质量设置
- 5点击保存
›GIMP（免费）
- 1在GIMP中打开图片
- 2转到文件 → 导出为
- 3将文件命名为.webp扩展名
- 4点击导出
- 5在对话框中调整压缩设置
方法三：命令行（适合开发者）
Google provides command-line tools for WebP conversion:
›安装cwebp
下载地址：Google WebP下载: Google WebP Downloads
›基本转换
bash
# 有损转换（默认质量75）
cwebp input.png -o output.webp
# 指定质量（0-100）
cwebp -q 85 input.jpg -o output.webp
# 无损转换
cwebp -lossless input.png -o output.webp›批量转换（Linux/Mac）
bash
# 转换目录中的所有PNG文件
for f in *.png; do cwebp -q 85 "$f" -o "${f%.png}.webp"; done方法四：构建工具和插件
›Next.js（自动）
Next.js在使用Image组件时自动提供WebP图片：
jsx
import Image from 'next/image';
<Image src="/image.jpg" alt="Description" width={800} height={600} />›Webpack插件
javascript
// webpack.config.js
const ImageminWebpWebpackPlugin = require('imagemin-webp-webpack-plugin');
module.exports = {
plugins: [
new ImageminWebpWebpackPlugin({
config: [{
options: {
quality: 85
}
}]
})
]
};WebP转换最佳实践
- 照片：使用75-85%质量获得最佳平衡
- 带文字的图形：使用90-100%质量或无损
- 图标和Logo：使用无损压缩
- 动画图片：将GIF转换为动态WebP
- 始终测试：比较不同设置下的质量
在网站上实现WebP
使用<picture>元素获得最佳兼容性：
html
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Description" width="800" height="600">
</picture>总结
将图片转换为WebP非常简单，有多种选择。对于大多数用户，在线转换器提供最简单的解决方案。开发者可以将WebP转换集成到构建流程中实现自动化优化。