什么是 WebP 格式，为什么要用它

WebP 的起源与目标

WebP 是由 Google 于 2010 年发布的图片格式，基于 VP8 视频编解码器技术开发，专为现代网络传输优化。Google 开发 WebP 的核心动机是：互联网流量中有很大一部分是图片，更高效的图片格式能够直接减少带宽消耗、加快网页加载速度、降低服务器成本。

WebP 的独特之处在于它集成了多种功能于一身：支持有损压缩（类似 JPG）、无损压缩（类似 PNG）、透明度（Alpha 通道，类似 PNG）、以及动画（类似 GIF）。这意味着 WebP 在理论上可以替代所有传统的网页图片格式。

WebP 的压缩效率

根据 Google 的官方基准测试：有损 WebP 比同等质量的 JPG 小约 25–35%；无损 WebP 比 PNG 小约 26%。这意味着，如果你的网站上有 100 张 JPG 图片，合计 10MB，将它们全部转换为 WebP 后，总大小可能降至 6.5–7.5MB，节省 25–35% 的流量。

WebP 实现这种高效压缩的技术原理包括：使用自适应块量化（adaptive block quantization）代替 JPG 的固定块量化；使用更高效的预测编码；对颜色和纹理应用不同的压缩策略；支持比 JPG 更精细的质量控制。

WebP 的浏览器支持情况

截至 2024 年，WebP 的浏览器支持已经非常广泛：Chrome（自 v23 起）、Firefox（自 v65 起）、Safari（自 iOS 14 / macOS 11 Big Sur 起）、Edge（基于 Chromium 的版本）、Opera（自 v12.1 起）都完全支持 WebP。全球浏览器对 WebP 的支持率约为 97%，这意味着只有极少数用户使用的旧版本浏览器不支持。

对于需要支持旧浏览器的网站，可以使用 HTML5 的 元素实现 WebP 与 JPG/PNG 的自动切换：先提供 WebP 版本，如果浏览器不支持则自动回退到 JPG/PNG 版本。这样既利用了现代浏览器对 WebP 的支持，又保持了对旧浏览器的兼容性。

在网站上使用 WebP 的正确方式

<!-- 使用 picture 元素提供 WebP + 回退 -->
<!-- Using picture element for WebP with fallback -->
<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 图片 / Responsive WebP images -->
<picture>
  <source
    type="image/webp"
    srcset="small.webp 480w, medium.webp 800w, large.webp 1200w"
    sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  >
  <img
    src="medium.jpg"
    alt="Product photo"
    loading="lazy"
  >
</picture>

WebP 的局限性

尽管 WebP 优势明显，但也有一些局限性需要注意：（1）编码速度较慢：WebP 的编码速度比 JPG 慢，批量转换大量图片时需要更多时间和 CPU 资源；（2）旧软件不支持：旧版本的 Photoshop、Windows 图片查看器等不支持 WebP，需要安装插件或升级软件；（3）不支持 CMYK 色彩空间，不适合印刷用途；（4）元数据支持有限，某些专业摄影元数据（IPTC 等）的支持不如 JPG/TIFF 完整。

对于 Web 用途，WebP 是优秀的选择。但对于摄影工作流（RAW 处理、色彩管理、打印输出）和专业设计应用，PNG、TIFF 或专有格式（如 Photoshop 的 PSD）仍然是更好的选择。

将现有图片批量转换为 WebP

# 使用 cwebp 命令行工具 / Using cwebp command-line tool
# 安装 / Install: brew install webp (macOS)

# 单文件转换 / Single file
cwebp -q 80 input.jpg -o output.webp
cwebp -lossless input.png -o output.webp

# 批量转换 / Batch conversion
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

# Python 批量转换 / Python batch conversion
from PIL import Image
import os

def convert_to_webp(input_path, quality=80, lossless=False):
    output_path = os.path.splitext(input_path)[0] + '.webp'
    with Image.open(input_path) as img:
        if lossless:
            img.save(output_path, 'WEBP', lossless=True)
        else:
            img.save(output_path, 'WEBP', quality=quality)
    return output_path

WebP 在 SEO 和性能方面的实际收益

Google 的 PageSpeed Insights 和 Lighthouse 工具都会建议"使用新一代图片格式"（即 WebP 或 AVIF），并将其作为性能优化的重要项目。实际案例表明，将网站图片从 JPG/PNG 迁移到 WebP 后，页面重量通常减少 20–40%，首次内容绘制（FCP）和最大内容绘制（LCP）等核心 Web 指标显著改善，这直接影响 Google 搜索排名。

对于电商网站而言，图片优化的业务价值尤为显著。Amazon 的研究表明，页面加载时间每增加 100ms，销售额减少 1%。将产品图片从 JPG 切换到 WebP，可以直接带来可衡量的转化率提升。