总结
- 一种图片格式
一、什么是 WebP？
WebP（发音为 “weppy”）是由 Google 推出的一种现代图片格式，支持有损压缩和无损压缩，旨在提供更小的文件体积和更高质量的图像显示。
它兼容常见的图片功能，如：
- 透明通道（Alpha 通道）
- 动画支持（类似 GIF）
- 有损压缩（类似 JPEG）
- 无损压缩（类似 PNG）
二、WebP 的优势
| 对比维度 | JPEG/PNG | WebP |
|---|
| 文件体积 | 较大 | 更小（有损小 25%~34%，无损小 26%） |
| 透明支持 | PNG 支持 | 支持 Alpha 通道 |
| 动画支持 | GIF/PNG | 支持，比 GIF 更小更清晰 |
| 压缩效率 | 一般 | 更高，压缩率更好 |
| 浏览器兼容性 | 高 | 现代浏览器广泛支持（IE 不支持） |
三、WebP 的使用场景
| 场景 | 说明 |
|---|
| 网站图片优化 | 替换传统 JPEG/PNG 图片，减小页面体积 |
| 移动端优化 | 减少图片加载时间，节省流量 |
| 电商网站、图库类应用 | 高清小体积图片提升用户体验 |
| SEO 优化 | 页面加载速度提升有助于 SEO 排名 |
四、如何使用 WebP？
1. HTML 中使用
<img src="image.webp" alt="WebP 图片" />
2. CSS 中使用
.background {background-image: url("image.webp");
}
3. 提供多格式回退（兼容不支持 WebP 的浏览器）
<picture><source srcset="image.webp" type="image/webp" /><img src="image.jpg" alt="图片描述" />
</picture>
五、如何生成 WebP 图片？
你可以使用以下工具将 PNG/JPEG 转换为 WebP：
1. 使用命令行工具 cwebp
cwebp -q 80 image.jpg -o image.webp
2. 使用在线转换工具
- CloudConvert
- OnlineConvert
- TinyPNG WebP 转换
3. 使用构建工具自动化转换
- Webpack：使用
imagemin-webp 插件 - Vite：通过
vite-plugin-imagemin 插件压缩并转换图片
六、浏览器兼容性
| 浏览器 | 是否支持 |
|---|
| Chrome | ✅ 支持（自 Chrome 23 起） |
| Firefox | ✅ 支持（自 Firefox 65 起） |
| Safari | ✅ 支持（自 Safari 14 起） |
| Edge | ✅ 支持 |
| iOS / Android | ✅ 支持（现代设备） |
| IE | ❌ 不支持 |
七、总结
| 特性 | 说明 |
|---|
| 格式类型 | 有损/无损压缩、支持透明、动画 |
| 优势 | 更小体积、更高质量、更好压缩率 |
| 使用方式 | <img>、<picture>、CSS、构建工具 |
| 推荐场景 | 图片优化、移动端、SEO 提升 |
| 注意事项 | 需要转换工具，IE 不支持，建议提供回退方案 |
