总结

1. 一种图片格式

---

一、什么是 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 不支持，建议提供回退方案

---