【转】WebP 图片格式介绍

转自：豆包AI

WebP 是谷歌（Google）推出的现代图像格式，兼顾有损、无损、透明通道、动画，核心优势是同等画质下文件体积比 JPG/PNG 更小，多用于网页、App 图片资源。

✅ 核心特性

1. 两种编码模式
   • 有损 WebP：基于 VP8 视频编码技术压缩，相比 JPG，相同视觉质量下体积减少 25%~35%
   • 无损 WebP：类似 PNG，支持透明通道；相比 PNG，体积缩小 26% 左右
2. 支持 Alpha 透明通道 JPG 不支持透明；PNG 支持但体积大，WebP 无损 / 有损版本都能带透明。
3. 支持动画（Animated WebP） 替代 GIF：相同画质下，动画 WebP 比 GIF 小很多，支持 24 位色彩 + 透明，GIF 只有 256 色。
4. 支持元数据：可以嵌入 EXIF、XMP 信息。
5. 支持渐进式解码（部分实现），网络差时可以逐步渲染图片。

📊 和常见格式对比

表格

格式	压缩	透明	动画	特点
JPEG	有损	❌	❌	照片，体积中等，无透明
PNG	无损	✅	❌	图标 / 透明图，体积偏大
GIF	无损	有限✅	✅	仅 256 色，动画体积大
WebP	有损 / 无损	✅	✅	综合体积最小

⚠️ 兼容性

现在主流全部支持：Chrome、Edge、Firefox、Safari 14+、移动端浏览器、微信 / 抖音等 App。

老旧浏览器（IE、非常旧的 Safari）不支持，网页开发一般做降级方案：WebP 优先， fallback 到 JPG/PNG。

🛠️ 常用工具

• 谷歌官方：cwebp（转 WebP）、dwebp（WebP 转其他）命令行工具
• 图形软件：Photoshop、GIMP、Figma、Sketch 都支持导出 WebP
• 在线工具：Squoosh（谷歌出品，可视化调节质量）
• 库：libwebp（C 库，很多编程语言封装，C#/Python/JS 都可用）

🚀 使用场景

• 网站图片、商品图、头像、Banner，提升网页加载速度，节省带宽
• App 内置图片资源
• 替代 GIF 做轻量动画表情
• 小程序、H5 资源优化

局限

1. 编码 / 解码 CPU 开销更高：压缩、解码比 JPG 慢一点（现代设备感知不强）
2. 专业印刷场景不推荐，印刷行业标准还是 TIFF/PNG/JPG
3. 部分老旧看图软件默认不识别（新版 Windows、Mac 预览原生支持）

网页示例（HTML 降级写法）

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="图片">
</picture>