完整 WebP 指南（2025）

什么是 WebP？

WebP 是 Google 自 2010 年以来开发的图片格式，专为 Web 使用设计。它提供卓越的压缩 — 在同等视觉质量下通常比 JPEG 小 25–35% — 同时支持有损和无损压缩、Alpha 透明度，甚至动画。

如今，WebP 已获得全球 97%+ 所有浏览器的支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。它已成为 Web 图片优化的事实标准，被 Google PageSpeed Insights、Lighthouse 和 Core Web Vitals 指南推荐。

WebP vs JPEG：实际对比

以下是一张典型 1200×800 产品照片的 WebP 压缩实际效果：

节省效果在页面上会累积。一个包含 20 张图片的电商产品列表可以从 3.7 MB（JPEG）降至 1.2 MB（WebP）— 总图片重量减少 67%，直接提升页面加载速度和 Core Web Vitals 分数。

了解 WebP 质量设置

质量参数（0–100）控制文件大小与视觉保真度之间的权衡。以下是每个范围的实际含义：

• 质量 90–100：收益递减。文件大得多，但相比质量 85 几乎看不到改善。除非归档，否则避免使用。
• 质量 80–85：最佳平衡点。对大多数照片来说视觉上与原始图片无差别，文件体积减少 60–70%。这是行业标准。
• 质量 60–75：适合缩略图、预览和非关键图片。在平坦区域和渐变中有轻微细节损失。
• 质量 40–50：可见伪影。仅适合非常小的缩略图或装饰性背景。
• 无损模式：精确保留每个像素。最适合截图、图表和含文字的图片。文件比有损大但仍小于 PNG。

WebP 浏览器支持

截至 2025 年，WebP 拥有出色的浏览器支持：

• Chrome: Full support since v32 (2014)
• Firefox: Full support since v65 (2019)
• Safari: Full support since v14 (2020)
• Edge: Full support since v18 (2019)
• Opera: Full support since v19 (2014)
• Samsung Internet: Full support since v4.0

全球覆盖率为 97%+。对于剩余 3%（非常老的浏览器），使用 <picture> 元素并提供 JPEG 回退：

如何提供 WebP 并设置回退

使用 HTML <picture> 元素向支持的浏览器提供 WebP，同时为旧浏览器提供 JPEG 回退：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

始终包含 width 和 height 属性以防止累积布局偏移 (CLS) — 这是 Google 用于排名的 Core Web Vitals 指标。

应避免的常见 WebP 错误

• 转换已压缩的图片：如果源文件是低质量 JPEG，转换为 WebP 不会恢复丢失的细节。从最高质量的源文件开始。
• 使用质量 100：这会产生不必要的大文件。质量 80–85 几乎适用于所有场景。
• 忘记回退：如果 <picture> 元素中没有 JPEG 回退，非常老的浏览器会显示破碎的图片。
• 转换前不调整大小：4000×3000 的图片显示为 800×600 浪费 25 倍带宽。先调整大小，再转换。
• 忽略 EXIF 方向：某些相机在 EXIF 数据中存储旋转信息。确保你的转换器正确处理方向。

免费转换图片为 WebP

BulkPicConv 让你直接在浏览器中将图片转换为 WebP — 无需上传、无需注册、无水印。拖入图片，调整质量，秒速下载优化的 WebP 文件。